// Admin shell (SD-0001 §5.4) — the storefront's stable home; honestly empty this release
// (PUC-8; PUC-9 sign-out). Renders from /me alone: storefront name + signed-in email. No
// zeroed metric tiles, no locked-feature teasers (OHM: Agency & Anti-Manipulation).
// Visuals per the ui/designs export (hf-admin).
import { logout } from "../api";
import { AccountChip, Banner, Eyebrow, Screen, TopBar } from "../ui/kit";

interface Props {
  storefrontName: string;
  email: string;
  welcome: "new" | "back" | null;
  onSignedOut: () => void;
}

export default function Admin({ storefrontName, email, welcome, onSignedOut }: Props) {
  async function signOut() {
    await logout();
    onSignedOut();
  }

  return (
    <Screen plain>
      <TopBar
        left={
          <span className="storeid">
            <img src="/brand/mark-tile.svg" width={24} height={24} alt="" />
            <span className="storeid__col">
              <span className="storeid__name">{storefrontName}</span>
              <span className="storeid__sub">ecomm storefront</span>
            </span>
          </span>
        }
        right={<AccountChip email={email} onSignOut={signOut} />}
      />
      <main className="screen__main">
        <div className="empty">
          {welcome && (
            <div style={{ marginBottom: 24, width: "100%" }}>
              <Banner tone="info" title={welcome === "new" ? "Welcome to ecomm" : "Welcome back"}>
                {welcome === "new"
                  ? "A new account was created for this email."
                  : "Signed in to your existing account."}
              </Banner>
            </div>
          )}
          <div className="empty__seal" aria-hidden="true">
            <img src="/brand/mark-mono-gold.svg" width={36} height={36} alt="" />
          </div>
          <Eyebrow>Your storefront</Eyebrow>
          <h1>{storefrontName}</h1>
          <p className="empty__copy">
            There's nothing to manage yet — and that's a finished state, not a missing one.
            Catalog, orders, and settings will appear here as ecomm grows.
          </p>
        </div>
      </main>
    </Screen>
  );
}