// Account settings + order history pages

function SettingsPage({ setPage, account }) {
  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 }}>Sign in to view settings.</div>
        <button className="btn btn-primary" style={{ marginTop: 24 }} onClick={() => setPage("login")}>Sign in</button>
      </div>
    );
  }
  const [section, setSection] = useState("profile");
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 30 }}>
        <div className="eyebrow-rule">ACCOUNT</div>
        <h1 className="h-section" style={{ margin: "20px 0 0" }}>Your settings.</h1>
      </section>

      <section className="container" style={{ paddingTop: 30, paddingBottom: 100 }}>
        <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 60 }} data-mobile="stack">
          <aside style={{ position: "sticky", top: 120, alignSelf: "start" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>SECTIONS</div>
            <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                ["profile",  "Profile"],
                ["security", "Sign-in & security"],
                ["billing",  "Billing & receipts"],
                ["notif",    "Notifications"],
                ["privacy",  "Privacy & data"],
                ["danger",   "Close account"],
              ].map(([id, label]) => (
                <button key={id} onClick={() => setSection(id)} style={{
                  textAlign: "left", padding: "10px 12px", borderRadius: 6, fontSize: 14,
                  color: section === id ? "var(--text)" : "var(--text-2)",
                  background: section === id ? "var(--surface)" : "transparent",
                  border: "1px solid", borderColor: section === id ? "var(--border)" : "transparent",
                }}>{label}</button>
              ))}
            </nav>
          </aside>

          <div style={{ maxWidth: 640 }}>
            {section === "profile" && <SettingsBlock title="Profile">
              <Row2 label="Name"        value={account.user.name || account.user.email.split("@")[0]} />
              <Row2 label="Email"       value={account.user.email} />
              <Row2 label="University"  value="Add one →" muted />
              <Row2 label="Country"     value="United Kingdom" />
              <ButtonRow>
                <button className="btn btn-primary btn-sm">Save changes</button>
              </ButtonRow>
            </SettingsBlock>}

            {section === "security" && <SettingsBlock title="Sign-in & security">
              <Row2 label="Password"        value="Last changed 14 days ago" />
              <Row2 label="Two-factor auth" value="Not enabled" muted />
              <Row2 label="Active sessions" value="2 devices" />
              <Row2 label="Sign-in alerts"  value="Email on new device" />
              <ButtonRow>
                <button className="btn btn-dark btn-sm">Change password</button>
                <button className="btn btn-primary btn-sm">Enable 2FA</button>
              </ButtonRow>
            </SettingsBlock>}

            {section === "billing" && <SettingsBlock title="Billing & receipts">
              <Row2 label="Payment method" value="•••• 4242 · Visa" />
              <Row2 label="Billing country" value="United Kingdom" />
              <Row2 label="VAT ID"          value="Not provided" muted />
              <ButtonRow>
                <button className="btn btn-dark btn-sm">Update card</button>
                <button className="btn btn-dark btn-sm">Download all receipts</button>
              </ButtonRow>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--border)", fontSize: 13, color: "var(--text-3)" }}>
                Full order history is on the <button onClick={() => setPage("orders")} style={{ color: "var(--accent)" }}>Orders page</button>.
              </div>
            </SettingsBlock>}

            {section === "notif" && <SettingsBlock title="Notifications">
              <Toggle label="Quarterly refresh notifications" def={true}  d="Email when a bank in your library refreshes." />
              <Toggle label="The Sunday Drop"                  def={true}  d="One weekly note. Patterns from the interview floor." />
              <Toggle label="Coach session reminders"          def={true}  d="24h, 1h and 10-min reminders before scheduled sessions." />
              <Toggle label="New firm added"                   def={false} d="Notify when a new firm enters the catalogue." />
              <Toggle label="Promotional emails"               def={false} d="We rarely send these. Off by default." />
              <ButtonRow>
                <button className="btn btn-primary btn-sm">Save preferences</button>
              </ButtonRow>
            </SettingsBlock>}

            {section === "privacy" && <SettingsBlock title="Privacy & data">
              <Row2 label="Account created"  value={new Date(account.user.joined).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })} />
              <Row2 label="Data stored"      value="Profile, library, order history, session recordings (90-day rotation)" />
              <ButtonRow>
                <button className="btn btn-dark btn-sm">Export all my data</button>
                <button className="btn btn-dark btn-sm" onClick={() => setPage("privacy")}>View Privacy Policy</button>
              </ButtonRow>
            </SettingsBlock>}

            {section === "danger" && <SettingsBlock title="Close account">
              <div style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.6 }}>
                Closing your account removes your access to every bank in your library and cancels any future refreshes. Order history is retained for seven years per UK tax law, but is no longer accessible from your account.
              </div>
              <ButtonRow>
                <button className="btn btn-dark btn-sm">Sign out everywhere</button>
                <button style={{ padding: "9px 14px", fontSize: 12.5, color: "var(--danger, #d97757)", borderRadius: 999, border: "1px solid var(--danger, #d97757)" }}>Close my account permanently</button>
              </ButtonRow>
            </SettingsBlock>}
          </div>
        </div>
      </section>
    </div>
  );
}

function SettingsBlock({ title, children }) {
  return (
    <section style={{ display: "flex", flexDirection: "column", gap: 0 }}>
      <h2 className="serif-italic" style={{ fontSize: 32, margin: "0 0 24px", letterSpacing: "-0.015em" }}>{title}</h2>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>{children}</div>
    </section>
  );
}
function Row2({ label, value, muted }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "16px 24px", borderTop: "1px solid var(--border)", alignItems: "center", gap: 16 }}>
      <span style={{ fontSize: 13.5, color: "var(--text-2)" }}>{label}</span>
      <span style={{ fontSize: 13.5, color: muted ? "var(--text-3)" : "var(--text)", textAlign: "right" }}>{value}</span>
    </div>
  );
}
function ButtonRow({ children }) {
  return <div style={{ padding: "18px 24px", display: "flex", gap: 10, borderTop: "1px solid var(--border)", background: "var(--bg-soft)" }}>{children}</div>;
}
function Toggle({ label, d, def }) {
  const [on, setOn] = useState(def);
  return (
    <div style={{ padding: "16px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: 24, alignItems: "center" }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14 }}>{label}</div>
        <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 4, lineHeight: 1.5 }}>{d}</div>
      </div>
      <button onClick={() => setOn(!on)} style={{
        width: 40, height: 22, borderRadius: 999, padding: 2,
        background: on ? "var(--accent)" : "var(--surface-2)",
        border: "1px solid var(--border-strong)",
        display: "flex", justifyContent: on ? "flex-end" : "flex-start",
        transition: "background 0.2s",
      }}>
        <span style={{ width: 16, height: 16, borderRadius: "50%", background: "var(--bg)", boxShadow: "0 1px 2px rgba(0,0,0,0.3)" }} />
      </button>
    </div>
  );
}

// ── Order History ──────────────────────────────────────────────────
function OrdersPage({ setPage, account, 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 }}>Sign in to view orders.</div>
        <button className="btn btn-primary" style={{ marginTop: 24 }} onClick={() => setPage("login")}>Sign in</button>
      </div>
    );
  }
  const orders = [
    { id: "FBO-4291-2026", date: "14 May 2026", items: ["Goldman Sachs · Full Pack"],                  total: 30,  status: "Delivered" },
    { id: "FBO-4202-2026", date: "27 Apr 2026", items: ["McKinsey · OT Module", "McKinsey · VI"],      total: 33,  status: "Delivered" },
    { id: "FBO-4147-2026", date: "03 Apr 2026", items: ["Bain · Full Pack", "Case Mock — MBB"],         total: 120, status: "Delivered" },
    { id: "FBO-4058-2026", date: "12 Mar 2026", items: ["Optiver · VI Module"],                         total: 18,  status: "Refunded" },
  ];
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 30 }}>
        <div className="eyebrow-rule">ORDER HISTORY</div>
        <h1 className="h-section" style={{ margin: "20px 0 0" }}>Receipts & references.</h1>
        <p style={{ color: "var(--text-2)", fontSize: 15.5, marginTop: 20, maxWidth: 540 }}>
          Every order on this account. Retained for seven years per UK tax law. Tap any order to view the full receipt.
        </p>
      </section>
      <section className="container" style={{ paddingTop: 30, paddingBottom: 100 }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 2fr 0.8fr 1fr", padding: "16px 24px", background: "var(--bg-soft)", borderBottom: "1px solid var(--border)" }} data-mobile="hide">
            {["REFERENCE", "DATE", "ITEMS", "TOTAL", "STATUS"].map(h => <span key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>)}
          </div>
          {orders.map((o, i) => (
            <div key={o.id} style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 2fr 0.8fr 1fr", padding: "18px 24px", borderTop: i > 0 ? "1px solid var(--border)" : "none", alignItems: "center", fontSize: 13.5 }} data-mobile="stack">
              <span className="mono" style={{ fontSize: 12, color: "var(--text-2)" }}>{o.id}</span>
              <span style={{ color: "var(--text-3)" }}>{o.date}</span>
              <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {o.items.map((it, j) => <span key={j} style={{ fontSize: 13 }}>{it}</span>)}
              </span>
              <span className="mono">{fmt(o.total)}</span>
              <span style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                <StatusPill status={o.status} />
                <button style={{ fontSize: 12, color: "var(--accent)" }}>View →</button>
              </span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
function StatusPill({ status }) {
  const colors = {
    "Delivered":      { fg: "var(--success, #7ea15a)", bg: "rgba(126,161,90,0.12)" },
    "Refunded":       { fg: "var(--text-3)",           bg: "var(--surface-2)" },
  };
  const c = colors[status] || colors.Delivered;
  return <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: c.bg, color: c.fg, letterSpacing: "0.08em", textTransform: "uppercase" }}>{status}</span>;
}

Object.assign(window, { SettingsPage, OrdersPage });