/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — Account: Settings, the lapsed Renew wall, and the dev-only
   Prototype-states switcher (mounted only when the app is in ?dev mode). */

const { Icons, SectionLabel, ScoreNumber, Card, PrimaryButton, GhostButton, LinkButton, ListRow, Toggle, DIMENSIONS } = window;

function SettingsScreen({ sub, email, renewDate, onSignOut, onManageSub, onRestore, onExport }) {
  const [health, setHealth] = React.useState(false);
  const initial = (email || "M").trim().charAt(0).toUpperCase();
  return (
    <div className="screen">
      <SectionLabel style={{ marginBottom: 6 }}>Settings</SectionLabel>
      <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 22px", color: "var(--color-text)" }}>Account</h1>

      <Card glass style={{ borderRadius: 20, padding: 18, marginBottom: 18, display: "flex", alignItems: "center", gap: 14 }}>
        <span style={{ width: 48, height: 48, borderRadius: 9999, background: "var(--grad-amber)", color: "#1a1206", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 18, flex: "none" }}>{initial}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: "var(--color-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{email || "marcus@stoic.app"}</div>
          <div style={{ fontSize: 13, color: "var(--color-amber)", fontWeight: 600 }}>{sub === "lapsed" ? "Lapsed" : "Stoic+ · Active"}</div>
        </div>
      </Card>

      <SectionLabel style={{ marginBottom: 11, display: "block" }}>Subscription</SectionLabel>
      <Card glass style={{ borderRadius: 18, padding: "0 16px", marginBottom: 18 }}>
        <ListRow icon="Card" label="Manage subscription" value={sub === "lapsed" ? "Renew" : (renewDate || "Apr 12")} onClick={onManageSub} />
        <ListRow icon="Refresh" label="Restore purchases" onClick={onRestore} last />
      </Card>

      <SectionLabel style={{ marginBottom: 11, display: "block" }}>Tracking</SectionLabel>
      <Card glass style={{ borderRadius: 18, padding: "0 16px", marginBottom: 18 }}>
        <ListRow icon="Sliders" label="Tracked dimensions" value={`${DIMENSIONS.length} active`} />
        <div style={{ display: "flex", alignItems: "center", gap: 13, padding: "15px 4px", borderTop: "1px solid var(--color-border)" }}>
          <span style={{ color: "var(--color-text-muted)", display: "flex", flex: "none" }}><Icons.Heart size={19} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 500, color: "var(--color-text)" }}>Apple Health</div>
            <div style={{ fontSize: 13, color: "var(--color-text-faint)" }}>{health ? "Sleep syncing" : "Objective sleep input"}</div>
          </div>
          <Toggle on={health} onChange={setHealth} />
        </div>
      </Card>

      <SectionLabel style={{ marginBottom: 11, display: "block" }}>Data &amp; privacy</SectionLabel>
      <Card glass style={{ borderRadius: 18, padding: "0 16px", marginBottom: 18 }}>
        <ListRow icon="Download" label="Export my data" onClick={onExport} />
        <ListRow icon="ShieldCheck" label="Privacy" last />
      </Card>

      <Card glass style={{ borderRadius: 18, padding: "0 16px", marginBottom: 8 }}>
        <ListRow icon="LogOut" label="Sign out" danger last onClick={onSignOut} />
      </Card>
      <p style={{ fontSize: 12, color: "var(--color-text-faint)", textAlign: "center", margin: "16px 0 0" }}>Stoic+ v1.0 · subscriber-only</p>
    </div>
  );
}

/* ---------- Lapsed / Renew wall (replaces the whole app) ---------- */
function RenewWall({ onRenew, onRestore }) {
  return (
    <div className="renew-wall" style={{ position: "absolute", inset: 0, zIndex: 50, display: "flex", flexDirection: "column", padding: "0 26px", overflow: "hidden" }}>
      <div className="ambient"></div>
      <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 2, marginBottom: 32 }}>
          <img src="assets/stoic-wordmark-white.png" alt="STOIC" style={{ height: 22 }} />
          <span style={{ fontSize: 22, fontWeight: 800, color: "var(--color-amber)", lineHeight: 1 }}>+</span>
        </div>
        <div style={{ width: 56, height: 56, borderRadius: 9999, background: "var(--color-surface-3)", color: "var(--color-amber)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22 }}><Icons.Lock size={26} /></div>
        <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 12px", color: "var(--color-text)", lineHeight: 1.1 }}>Renew to continue.</h1>
        <p style={{ fontSize: 16, fontWeight: 500, color: "var(--color-text-muted)", margin: "0 0 8px", lineHeight: 1.5 }}>Your subscription lapsed — but nothing is lost.</p>
        <div className="glass glass-lit" style={{ borderRadius: 16, padding: "14px 16px", display: "flex", alignItems: "center", gap: 12, marginBottom: 30 }}>
          <span style={{ color: "var(--color-amber)", display: "flex", flex: "none" }}><Icons.ShieldCheck size={20} /></span>
          <span style={{ fontSize: 14, color: "var(--color-text)", fontWeight: 500, lineHeight: 1.4 }}>Your full history &amp; streak are saved and read-locked until you renew.</span>
        </div>
        <PrimaryButton icon={false} onClick={onRenew}>Renew · $8.99 / mo</PrimaryButton>
        <div style={{ textAlign: "center", marginTop: 14 }}><LinkButton onClick={onRestore}>Restore Purchases</LinkButton></div>
      </div>
    </div>
  );
}

/* ---------- Prototype state switcher (DEV ONLY) ----------
   Reached only when the app runs with ?dev (App gates the trigger).
   Strip from the public hosted build — not a user-facing feature. */
function DemoMenu({ scenario, setScenario, sub, setSub, logged, setLogged, welcome, setWelcome, authed, setAuthed, onClose }) {
  const Seg = ({ label, options, value, onChange }) => (
    <div style={{ marginBottom: 16 }}>
      <SectionLabel style={{ marginBottom: 8 }}>{label}</SectionLabel>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {options.map((o) => {
          const on = value === o.v;
          return <button key={o.v} onClick={() => onChange(o.v)} className="press" style={{ flex: "1 1 auto", padding: "9px 12px", borderRadius: 10, border: "1px solid " + (on ? "transparent" : "var(--color-border)"), background: on ? "var(--grad-amber)" : "var(--color-surface-2)", color: on ? "#1a1206" : "var(--color-text)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap" }}>{o.l}</button>;
        })}
      </div>
    </div>
  );
  return (
    <div>
      <Seg label="Scenario" value={scenario} onChange={setScenario} options={[{ v: "normal", l: "Normal" }, { v: "day1", l: "Day 1" }, { v: "sparse", l: "Sparse" }, { v: "streakbreak", l: "Streak break" }]} />
      <Seg label="Subscription" value={sub} onChange={setSub} options={[{ v: "active", l: "Active" }, { v: "offline", l: "Offline" }, { v: "lapsed", l: "Lapsed" }]} />
      <Seg label="Today" value={logged ? "y" : "n"} onChange={(v) => setLogged(v === "y")} options={[{ v: "n", l: "Not logged" }, { v: "y", l: "Logged" }]} />
      {setAuthed && <Seg label="Session" value={authed ? "y" : "n"} onChange={(v) => { if (v === "n") { setAuthed(false); if (setWelcome) setWelcome(true); } else { setAuthed(true); } onClose(); }} options={[{ v: "y", l: "Signed in" }, { v: "n", l: "Sign out / replay" }]} />}
      {setWelcome && <Seg label="First-launch welcome" value={welcome ? "y" : "n"} onChange={(v) => { setWelcome(v === "y"); onClose(); }} options={[{ v: "n", l: "Seen" }, { v: "y", l: "Replay intro" }]} />}
      <GhostButton onClick={onClose}>Close</GhostButton>
    </div>
  );
}

Object.assign(window, { SettingsScreen, RenewWall, DemoMenu });
})();