// 內 UCHI web — onboarding flow

function Onboarding({ onEnter }) {
  const D = window.UCHI;
  const [step, setStep] = React.useState("welcome");
  const [mode, setMode] = React.useState("join");
  const [email, setEmail] = React.useState("");
  const [oauth, setOauth] = React.useState(null);
  const [tier, setTier] = React.useState("fundador");
  const [ap, setAp] = React.useState({ name: "", email: "", role: "", company: "", phone: "",
    interests: [], freq: "", hear: "", why: "", ref: "" });
  const set = (k, v) => setAp(s => ({ ...s, [k]: v }));
  const toggle = (k, v) => setAp(s => ({ ...s, [k]: s[k].includes(v) ? s[k].filter(x => x !== v) : [...s[k], v] }));

  const finishAuth = (mail) => {
    setAp(s => ({ ...s, email: mail || s.email || "tu@exemplo.pt" }));
    if (mode === "login") onEnter(); else setStep("apply");
  };
  const doOauth = (which, mail) => { setOauth(which); setTimeout(() => { setOauth(null); finishAuth(mail); }, 1100); };

  return (
    <div className="fade">
      {step === "welcome" && <Welcome D={D}
        onJoin={() => { setMode("join"); setStep("signin"); }}
        onLogin={() => { setMode("login"); setStep("signin"); }}
        onCard={() => setStep("scan")} />}
      {step === "signin" && <SignIn D={D} mode={mode} oauth={oauth} email={email} setEmail={setEmail}
        onBack={() => setStep("welcome")} onOauth={doOauth} onMagic={() => setStep("magic")}
        onCard={() => setStep("scan")} />}
      {step === "scan" && <ScanCard D={D} onBack={() => setStep("welcome")} onFound={() => setStep("cardlink")} />}
      {step === "cardlink" && <CardLink D={D} onBack={() => setStep("scan")} onEnter={onEnter} />}
      {step === "magic" && <MagicLink email={email || "tu@exemplo.pt"} onBack={() => setStep("signin")} onOpen={() => finishAuth(email)} />}
      {step === "apply" && <Apply D={D} ap={ap} set={set} toggle={toggle} onBack={() => setStep("signin")} onDone={() => setStep("pending")} />}
      {step === "pending" && <Pending D={D} ap={ap} onApprove={() => setStep("tiers")} />}
      {step === "tiers" && <Tiers D={D} chosen={tier} setChosen={setTier} onBack={() => setStep("pending")} onNext={() => setStep("payment")} />}
      {step === "payment" && <Payment D={D} tier={D.tiers.find(t => t.id === tier)} onBack={() => setStep("tiers")} onPaid={() => setStep("in")} />}
      {step === "in" && <WelcomeIn D={D} onEnter={onEnter} />}
    </div>
  );
}

// thin top bar for auth pages
function AuthBar({ onBack, right }) {
  return (
    <div style={{ height: "var(--nav-h)", display: "flex", alignItems: "center", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", width: "100%" }}>
        {onBack
          ? <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)",
              fontFamily: "inherit", fontSize: 14, fontWeight: 600, display: "flex", alignItems: "center", gap: 8, padding: 0 }}>
              <Icon name="chevL" size={16} /> Voltar</button>
          : <Wordmark />}
        <div style={{ marginLeft: "auto" }}>{right || (onBack ? <Wordmark size={15} mark={20} /> : null)}</div>
      </div>
    </div>
  );
}

function Centered({ children, max = 460 }) {
  return (
    <div style={{ minHeight: "calc(100vh - var(--nav-h))", display: "flex", justifyContent: "center", padding: "56px 24px 80px" }}>
      <div style={{ width: "100%", maxWidth: max }}>{children}</div>
    </div>
  );
}

// ───────────────────────── Welcome (split hero) ─────────────────────────
function Welcome({ D, onJoin, onLogin, onCard }) {
  return (
    <div className="welcome-hero" style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
      <div style={{ position: "relative", display: "flex", flexDirection: "column", justifyContent: "space-between",
        padding: "clamp(40px,5vw,72px)", overflow: "hidden" }}>

        <div className="rise" style={{ position: "relative" }}><Wordmark size={16} mark={22} /></div>
        <div className="rise" style={{ position: "relative", animationDelay: ".08s" }}>
          <Eyebrow accent style={{ marginBottom: 18 }}>{D.club.tagline}</Eyebrow>
          <h1 className="display">EN&nbsp;House</h1>
          <div className="rule" style={{ margin: "28px 0 22px", width: 52 }} />
          <p className="body-lg" style={{ maxWidth: 420 }}>{D.club.blurb}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <Button variant="primary" onClick={onJoin} icon="arrowR">Pedir entrada</Button>
            <Button variant="ghost" onClick={onLogin}>Já sou membro</Button>
          </div>
          <button onClick={onCard} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)",
            fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, marginTop: 20, padding: 0,
            display: "inline-flex", alignItems: "center", gap: 9 }}>
            <Icon name="qr" size={17} style={{ color: "var(--accent)" }} /> Recebi um cartão por correio
          </button>
        </div>
        <div className="rise" style={{ position: "relative", animationDelay: ".16s" }}>
          <span className="cap">{D.club.gloss}</span>
        </div>
      </div>
      <div className="welcome-photo" style={{ position: "relative", minHeight: 360,
        backgroundImage: "url('assets/login-tokyo.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--bg), transparent 24%, transparent 88%, rgba(36,24,19,0.14))" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(12,8,6,0.42)", pointerEvents: "none" }} />
      </div>
    </div>
  );
}

// ───────────────────────── Sign in ─────────────────────────
function SignIn({ D, mode, oauth, email, setEmail, onBack, onOauth, onMagic, onCard }) {
  const join = mode === "join";
  return (
    <>
      <AuthBar onBack={onBack} />
      <Centered max={420}>
        <div className="fade">
          <Brush size={42} color="var(--accent)" style={{ marginBottom: 24 }} />
          <h1 className="h1">{join ? "Começa a tua entrada" : "Bem-vindo de volta"}</h1>
          <p className="body" style={{ margin: "14px 0 34px" }}>
            {join ? "Identifica-te primeiro. A candidatura leva dois minutos." : "Um toque e estás dentro. Sem palavra-passe."}
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <button className="oauth" disabled={!!oauth} onClick={() => onOauth("google", "pedro@gmail.com")}>
              {oauth === "google" ? <Spinner /> : <GoogleMark size={18} />}{oauth === "google" ? "A ligar a Google…" : "Continuar com Google"}
            </button>
            <button className="oauth" disabled={!!oauth} onClick={() => onOauth("ms", "pedro@outlook.com")}>
              {oauth === "ms" ? <Spinner /> : <MicrosoftMark size={16} />}{oauth === "ms" ? "A ligar a Outlook…" : "Continuar com Outlook"}
            </button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, margin: "28px 0 24px" }}>
            <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
            <span className="cap" style={{ letterSpacing: ".16em" }}>ou por email</span>
            <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
          </div>
          <Field label="O teu email" type="email" v={email} on={setEmail} ph="tu@exemplo.pt"
            hint="Enviamos um link mágico. Sem palavras-passe, nunca." />
          <div style={{ marginTop: 22 }}>
            <Button variant="ghost" block onClick={onMagic} icon="mail">Enviar link mágico</Button>
          </div>
          {!join && (
            <button onClick={onCard} style={{ width: "100%", marginTop: 12, padding: "13px 16px", cursor: "pointer",
              background: "none", border: "1px solid var(--line-2)", borderRadius: 4, color: "var(--ink)",
              fontFamily: "inherit", fontSize: 14, fontWeight: 600,
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
              <Icon name="qr" size={18} style={{ color: "var(--accent)" }} /> Tenho o cartão físico
            </button>
          )}
          <p style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 8 }}>
            <Icon name="lock" size={14} style={{ color: "var(--ink-3)" }} /><span className="cap">Ligação encriptada. Os teus dados ficam na casa.</span>
          </p>
        </div>
      </Centered>
    </>
  );
}

// ───────────────────────── Magic link ─────────────────────────
function MagicLink({ email, onBack, onOpen }) {
  return (
    <>
      <AuthBar onBack={onBack} />
      <Centered max={440}>
        <div className="fade" style={{ textAlign: "center", paddingTop: 16 }}>
          <div style={{ width: 72, height: 72, borderRadius: 999, margin: "0 auto 26px",
            background: "color-mix(in srgb, var(--accent) 12%, transparent)", border: "1px solid var(--line-2)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)" }}><Icon name="mail" size={30} /></div>
          <h1 className="h1">Vê o teu email</h1>
          <p className="body" style={{ margin: "14px auto 0", maxWidth: 340 }}>
            Enviámos um link mágico para <strong style={{ color: "var(--ink)" }}>{email}</strong>. Toca-lhe e estás dentro.
          </p>
          <div style={{ margin: "34px 0 0", padding: 22, textAlign: "left", background: "var(--bg-2)", borderRadius: 6, border: "1px solid var(--line)" }}>
            <Eyebrow accent>Demonstração</Eyebrow>
            <p className="small" style={{ margin: "10px 0 16px" }}>Neste protótipo não há caixa de correio — abre o link aqui.</p>
            <Button variant="primary" block onClick={onOpen} icon="arrowR">Abrir o link mágico</Button>
          </div>
          <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-3)",
            fontFamily: "inherit", fontSize: 13, marginTop: 22 }}>Não chegou? Reenviar</button>
        </div>
      </Centered>
    </>
  );
}

Object.assign(window, { Onboarding, AuthBar, Centered, Welcome, SignIn, MagicLink });