// Account flow: Sign in, Sign up, My Library

function useAccount() {
  const [user, setUser] = useState(() => {
    try { return JSON.parse(localStorage.getItem("fbo-user") || "null"); } catch { return null; }
  });
  useEffect(() => {
    if (user) localStorage.setItem("fbo-user", JSON.stringify(user));
    else localStorage.removeItem("fbo-user");
  }, [user]);
  const signIn  = (email)        => setUser({ email, name: email.split("@")[0], joined: new Date().toISOString() });
  const signOut = ()              => setUser(null);
  return { user, signIn, signOut };
}

function useLibrary() {
  const [items, setItems] = useState(() => {
    try { return JSON.parse(localStorage.getItem("fbo-library") || "[]"); } catch { return []; }
  });
  useEffect(() => { localStorage.setItem("fbo-library", JSON.stringify(items)); }, [items]);
  const add = (newItems) => {
    setItems(prev => {
      const map = new Map(prev.map(x => [x.key, x]));
      newItems.forEach(x => map.set(x.key, { ...x, purchasedAt: new Date().toISOString() }));
      return [...map.values()];
    });
  };
  return { items, add };
}

function AccountAuthPage({ mode, setPage, account }) {
  const [email, setEmail]   = useState("");
  const [pwd, setPwd]       = useState("");
  const [name, setName]     = useState("");
  const [school, setSchool] = useState("");
  const isSignup = mode === "signup";

  const submit = (e) => {
    e.preventDefault();
    if (!email || !pwd) return;
    account.signIn(email);
    setPage("library");
  };

  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 100 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} data-mobile="stack">
          {/* Left — pitch */}
          <div style={{ position: "sticky", top: 120 }}>
            <div className="eyebrow-rule">{isSignup ? "CREATE AN ACCOUNT" : "WELCOME BACK"}</div>
            <h1 className="h-section" style={{ margin: "24px 0" }}>
              {isSignup ? <>Set up <em>your library.</em></> : <>Open <em>your library.</em></>}
            </h1>
            <p style={{ color: "var(--text-2)", fontSize: 16, lineHeight: 1.6, maxWidth: 440 }}>
              {isSignup
                ? "Your account holds every bank you buy. Every quarterly refresh lands here automatically — you're never prepping for last cycle's test."
                : "Sign in to access the question banks and coaching sessions you've already paid for. Refreshes are pushed automatically."}
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "Lifetime access on the device of your choice",
                "Automatic quarterly refresh of every bank",
                "Coaching session history & rubrics in one place",
                "One-click cloud download + offline cache",
              ].map((x, i) => (
                <li key={i} style={{ fontSize: 14, color: "var(--text-2)", display: "flex", gap: 12 }}>
                  <span style={{ color: "var(--accent)" }}>✓</span>{x}
                </li>
              ))}
            </ul>
          </div>

          {/* Right — form */}
          <form onSubmit={submit} className="card" style={{ padding: 40, display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", letterSpacing: "0.16em" }}>
              {isSignup ? "STEP 01 — CREDENTIALS" : "SIGN IN"}
            </div>
            {isSignup && <Field label="Name"   value={name} onChange={setName} placeholder="Sophia Chen" />}
            <Field   label="Email"  value={email} onChange={setEmail} placeholder="you@uni.ac.uk" type="email" />
            <Field   label="Password" value={pwd} onChange={setPwd} placeholder="••••••••" type="password" />
            {isSignup && <Field label="University" value={school} onChange={setSchool} placeholder="LSE, UCL, HKU, etc." />}

            <button type="submit" className="btn btn-primary" style={{ marginTop: 14, justifyContent: "center" }}>
              {isSignup ? "Create account →" : "Sign in →"}
            </button>

            <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
              <ProviderBtn label="Continue with Google" />
              <ProviderBtn label="Continue with WeChat" />
            </div>

            <div style={{ fontSize: 13, color: "var(--text-3)", marginTop: 12, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
              {isSignup
                ? <>Already have an account? <button type="button" onClick={() => setPage("login")} style={{ color: "var(--accent)" }}>Sign in</button></>
                : <>No account yet? <button type="button" onClick={() => setPage("signup")} style={{ color: "var(--accent)" }}>Create one</button></>
              }
            </div>
          </form>
        </div>
      </section>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, type = "text" }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span className="eyebrow">{label}</span>
      <input className="input" type={type} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} />
    </label>
  );
}
function ProviderBtn({ label }) {
  return (
    <button type="button" className="btn btn-dark btn-sm" style={{ flex: 1, justifyContent: "center", fontSize: 12.5 }}>
      {label}
    </button>
  );
}

// Library page — "My banks & sessions"
function LibraryPage({ setPage, account, library, fmt }) {
  if (!account.user) {
    return (
      <div className="page-enter page-in container" style={{ paddingTop: 100, paddingBottom: 100, textAlign: "center" }}>
        <div className="serif-italic" style={{ fontSize: 36 }}>You need to sign in to view your library.</div>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 24 }}>
          <button className="btn btn-primary" onClick={() => setPage("login")}>Sign in</button>
          <button className="btn btn-ghost" onClick={() => setPage("signup")}>Create account</button>
        </div>
      </div>
    );
  }
  const banks    = library.items.filter(x => x.kind !== "service");
  const sessions = library.items.filter(x => x.kind === "service");
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 30 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="eyebrow-rule">YOUR LIBRARY</div>
            <h1 className="h-section" style={{ margin: "20px 0 0" }}>
              {account.user.name ? `Welcome back, ${account.user.name}.` : "Welcome back."}
            </h1>
            <div style={{ color: "var(--text-3)", fontSize: 13, marginTop: 14, fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>
              MEMBER · {account.user.email.toUpperCase()} · JOINED {new Date(account.user.joined).toLocaleDateString("en-GB", { month: "short", year: "numeric" }).toUpperCase()}
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => { account.signOut(); setPage("home"); }}>Sign out</button>
        </div>
      </section>

      <section className="container" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="section-label" style={{ marginBottom: 32 }}>
          <span className="num">I.</span>
          <span className="lbl">QUESTION BANKS</span>
          <span style={{ flex: 1, height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)" }}>{banks.length} IN LIBRARY</span>
        </div>

        {banks.length === 0 ? (
          <EmptyState
            title="No banks yet."
            sub="Pick a firm to get started — every purchase lands here immediately."
            cta="Browse the catalogue →"
            onClick={() => setPage("shop")}
          />
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} data-mobile="split2">
            {banks.map((b, i) => <LibraryBankCard key={i} item={b} fmt={fmt} />)}
          </div>
        )}
      </section>

      <section className="container" style={{ paddingTop: 60, paddingBottom: 80 }}>
        <div className="section-label" style={{ marginBottom: 32 }}>
          <span className="num">II.</span>
          <span className="lbl">COACHING SESSIONS</span>
          <span style={{ flex: 1, height: 1, background: "var(--border)" }} />
          <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)" }}>{sessions.length} BOOKED</span>
        </div>

        {sessions.length === 0 ? (
          <EmptyState
            title="No sessions booked."
            sub="Pair a question bank with a 1:1 mock for the highest hit rate."
            cta="View coaching →"
            onClick={() => setPage("coaching")}
          />
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }} data-mobile="stack">
            {sessions.map((s, i) => <LibrarySessionCard key={i} item={s} fmt={fmt} />)}
          </div>
        )}
      </section>
    </div>
  );
}

function LibraryBankCard({ item, fmt }) {
  return (
    <div className="card" style={{ padding: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
        <div className="placeholder-img" style={{ width: 48, height: 48, fontSize: 11 }}>{item.ticker}</div>
        <span className="chip">{item.variant.toUpperCase()}</span>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.15 }}>{item.company}</div>
      <div style={{ fontSize: 12.5, color: "var(--text-2)", marginTop: 4 }}>{item.role}</div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 22, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--text-3)", letterSpacing: "0.06em" }}>UPDATED 12D AGO</span>
        <button className="btn btn-primary btn-sm" style={{ padding: "6px 12px", fontSize: 11.5 }}>Download</button>
      </div>
    </div>
  );
}
function LibrarySessionCard({ item, fmt }) {
  return (
    <div className="card" style={{ padding: 28, display: "flex", gap: 24, alignItems: "center" }}>
      <div className="placeholder-img" style={{ width: 64, height: 64, fontSize: 11, background: "linear-gradient(135deg, rgba(212,160,74,0.15), transparent)", borderColor: "var(--accent-dim)", color: "var(--accent)" }}>{item.ticker}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.15 }}>{item.company}</div>
        <div style={{ fontSize: 12.5, color: "var(--text-2)", marginTop: 4 }}>{item.role}</div>
        <div style={{ display: "flex", gap: 14, marginTop: 12, fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--text-3)", letterSpacing: "0.06em" }}>
          <span>SLOT — TO BE SCHEDULED</span><span>·</span><span>COACH — TO BE MATCHED</span>
        </div>
      </div>
      <button className="btn btn-ghost btn-sm">Schedule</button>
    </div>
  );
}
function EmptyState({ title, sub, cta, onClick }) {
  return (
    <div style={{ border: "1px dashed var(--border-strong)", borderRadius: 12, padding: "60px 40px", textAlign: "center" }}>
      <div className="serif-italic" style={{ fontSize: 28 }}>{title}</div>
      <div style={{ color: "var(--text-2)", fontSize: 14, marginTop: 10 }}>{sub}</div>
      <button className="btn btn-primary" style={{ marginTop: 24 }} onClick={onClick}>{cta}</button>
    </div>
  );
}

Object.assign(window, { useAccount, useLibrary, AccountAuthPage, LibraryPage });