// Create storefront (SD-0001 §5.3) — a storefront-less Merchant establishes their one
// storefront (PUC-4/5; PUC-7 defense-in-depth on 409). Visuals per the ui/designs export
// (hf-storefront). The welcome banner carries PUC-3's honest copy from the verify step.
import { useState } from "react";
import { createStorefront, logout, type StorefrontResult } from "../api";
import { AccountChip, AuthCard, Banner, Eyebrow, Field, Footer, PrimaryButton, Screen, TopBar, Wordmark } from "../ui/kit";

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

export default function CreateStorefront({ email, welcome, onCreated, onAlreadyOwns, onSignedOut }: Props) {
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);
  const [alreadyOwns, setAlreadyOwns] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function signOut() {
    await logout();
    onSignedOut();
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    const res = await createStorefront(name);
    setBusy(false);
    if (res.ok) {
      onCreated(res.storefront);
      return;
    }
    if (res.error.code === "already_owns_storefront") setAlreadyOwns(true);
    else setError(res.error.message);
  }

  return (
    <Screen horizon>
      <TopBar left={<Wordmark size={22} />} right={<AccountChip email={email} onSignOut={signOut} />} />
      <main className="screen__main">
        <AuthCard>
          <form onSubmit={submit} style={{ display: "contents" }}>
            <div>
              <Eyebrow>One storefront, fully yours</Eyebrow>
              <h1 style={{ marginTop: 12 }}>Create your storefront</h1>
              <p className="card__sub">
                This is the one thing to do right now. It costs nothing and commits you to nothing.
              </p>
            </div>
            {welcome && (
              <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>
            )}
            {alreadyOwns && (
              <Banner title="Your account already has its storefront">
                ecomm is one storefront per account today.{" "}
                <button type="button" className="lk" onClick={onAlreadyOwns}>
                  Go to your admin →
                </button>
              </Banner>
            )}
            {error && <Banner title="That didn't work">{error} Try again.</Banner>}
            <Field
              label="Storefront name"
              optional
              helper="You can leave this blank — we'll pick a placeholder name you can change any time."
              inputProps={{
                type: "text",
                value: name,
                placeholder: "e.g. Ben's Bets",
                autoFocus: true,
                onChange: (ev) => setName(ev.target.value),
              }}
            />
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <PrimaryButton busy={busy}>{busy ? "Creating…" : "Create storefront"}</PrimaryButton>
              <p className="note">You can rename, configure, or close your storefront whenever you like.</p>
            </div>
          </form>
        </AuthCard>
      </main>
      <Footer />
    </Screen>
  );
}