/* Gate — home screen, three directions. Tokens only; theme set by data-theme on .scr wrapper. */
const DS$ = () => window.GateDesignSystem_b7b609 || {};
const ProgressRing = props => React.createElement(DS$().ProgressRing, props);
const Logo = props => React.createElement(DS$().Logo, props);
const Icon = props => React.createElement(DS$().Icon, props);

const S = 58; // status-bar clearance inside the device frame
const pageStyle = { height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column",
  background: "var(--surface-page)", color: "var(--text-primary)", fontFamily: "var(--font-system)" };
const num = { fontVariantNumeric: "tabular-nums" };
const eyebrow = { font: "600 12px/1 var(--font-system)", letterSpacing: ".12em", textTransform: "uppercase",
  color: "var(--text-tertiary)" };

function Wordmark({ size = 30, dark }) {
  return <Logo variant="wordmark" tone={dark ? "dark" : "light"} size={size} />;
}

/* plain (non-glass) icon buttons — used by B and C */
function IconRow({ items = ["calendar-days", "settings-2"] }) {
  return (
    <div style={{ display: "flex", gap: 18 }}>
      {items.map(n => <Icon key={n} name={n} size={22} color="var(--text-tertiary)" />)}
    </div>
  );
}

/* glass pill, as shipped today — used by A */
function GlassPill() {
  return (
    <div style={{ display: "flex", gap: 4, alignItems: "center", padding: "0 6px", height: 40,
      borderRadius: 999, background: "var(--surface-raised)", border: "1px solid var(--border-hairline)",
      boxShadow: "var(--shadow-card, 0 2px 10px rgba(31,33,26,.06))" }}>
      <div style={{ width: 38, height: 38, display: "grid", placeItems: "center" }}>
        <Icon name="calendar-days" size={21} color="var(--text-secondary)" />
      </div>
      <div style={{ width: 38, height: 38, display: "grid", placeItems: "center" }}>
        <Icon name="settings-2" size={21} color="var(--text-secondary)" />
      </div>
    </div>
  );
}

function Footer({ label = "Next gate", value = "Tomorrow, 7:00 AM" }) {
  return (
    <div style={{ padding: "0 24px 44px", flex: "none" }}>
      <div style={{ height: 1, background: "var(--border-hairline)", marginBottom: 14 }} />
      <div style={{ display: "flex", justifyContent: "space-between", font: "400 13px/1 var(--font-system)",
        color: "var(--text-tertiary)", ...num }}>
        <span>{label}</span><span>{value}</span>
      </div>
    </div>
  );
}

/* ── A · RING ─────────────────────────────────────────────────────────────── */
const ringCopy = {
  open:   { ring: { progress: 1, state: "complete" }, big: "2,340", unit: "steps today",
            line: "Open. Go on.", tone: "var(--accent)", sub: "Second early open this month." },
  done:   { ring: { progress: 1, state: "complete" }, big: "4,102", unit: "steps today",
            line: "Done for today.", tone: "var(--text-primary)", sub: "You were out the door at 6:52." },
  walking:{ ring: { progress: 0.62, state: "active" }, big: "1,240", unit: "steps today",
            line: "760 steps to go.", tone: "var(--text-primary)", sub: "Instagram and TikTok open when you get there." },
  before: { ring: { progress: 0, state: "active" }, big: "7:00", unit: "gate opens",
            line: "The day starts outside.", tone: "var(--text-primary)", sub: "Alarm at 6:40. Shoes by the door." },
};

function ScreenRing({ state = "open", dark, override }) {
  const c = Object.assign({}, ringCopy[state] || ringCopy.open, override || {});
  return (
    <div style={pageStyle}>
      <div style={{ padding: `${S + 8}px 24px 0`, display: "flex", justifyContent: "flex-end", flex: "none" }}>
        <GlassPill />
      </div>
      <div style={{ padding: "10px 24px 0", flex: "none" }}><Wordmark dark={dark} /></div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center",
        justifyContent: "center", gap: 34, paddingBottom: 30 }}>
        <ProgressRing size={214} strokeWidth={6} {...c.ring}>
          <div style={{ font: "200 46px/1 var(--font-system)", letterSpacing: "-.02em", ...num }}>{c.big}</div>
          <div style={{ ...eyebrow, marginTop: 12 }}>{c.unit}</div>
        </ProgressRing>
        <div style={{ textAlign: "center", padding: "0 32px" }}>
          <div style={{ font: "600 28px/1.15 var(--font-system)", letterSpacing: "-.03em", color: c.tone }}>{c.line}</div>
          <div style={{ font: "400 15px/1.45 var(--font-system)", color: "var(--text-secondary)", marginTop: 10,
            textWrap: "pretty" }}>{c.sub}</div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

/* ── B · HORIZON ──────────────────────────────────────────────────────────── */
/* NOT the logo. A state graphic that reuses the mark's exact proportions from
   Logo.jsx (arch 52.2% wide, 65.6% tall, 3.33% stroke, sun a true semicircle on
   the arch's baseline) so the screen and the mark are the same drawing. The sun's
   height inside the arch is the day's progress; the mark itself never animates. */
function Horizon({ risen = 1, sun = "var(--brand-green-bright)", dark, size = 296 }) {
  const stroke = dark ? "var(--brand-green-pale)" : "var(--brand-green-dark)";
  const rise = Math.max(0, Math.min(1, risen));
  return (
    <div style={{ position: "relative", width: size, height: size, containerType: "size", flex: "none" }}>
      <div style={{ position: "absolute", left: "18.9cqw", right: "18.9cqw", bottom: "18.9cqh", height: 1,
        background: "var(--border-hairline)" }} />
      <div style={{ position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: "18.9cqh",
        width: "52.2cqw", height: "65.6cqh", overflow: "hidden",
        border: `3.33cqw solid ${stroke}`, borderBottom: "none", borderRadius: "26.1cqw 26.1cqw 0 0" }}>
        <div style={{ position: "absolute", left: "50%", bottom: 0, width: "68.3%", height: "25.03%",
          transform: "translateX(-50%)", overflow: "hidden" }}>
          <div style={{ position: "absolute", left: 0, bottom: `${(rise - 1) * 100}%`, width: "100%", height: "200%",
            borderRadius: "50%", background: sun }} />
        </div>
      </div>
    </div>
  );
}

const horizonCopy = {
  open:   { risen: 1, sun: "var(--brand-green-bright)", line: "Open. Go on.", tone2: "var(--accent)",
            data: "2,340 steps · out at 6:52", label: "Thursday" },
  done:   { risen: 1, sun: "var(--rest)", line: "Done for today.", tone2: "var(--text-primary)",
            data: "4,102 steps · out at 6:52", label: "Thursday, closed" },
  before: { risen: 0.16, sun: "var(--accent-dim)", line: "The day starts outside.", tone2: "var(--text-primary)",
            data: "Alarm 6:40 · gate 7:00", label: "Tonight" },
};

/* opens this month — filled marks are mornings she went out */
const monthMarks = [1,1,0,1,1,1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1];

function ScreenHorizon({ state = "open", dark }) {
  const c = horizonCopy[state];
  return (
    <div style={pageStyle}>
      <div style={{ padding: `${S + 10}px 24px 0`, display: "flex", alignItems: "center",
        justifyContent: "space-between", flex: "none" }}>
        <Wordmark size={26} dark={dark} /><IconRow />
      </div>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Horizon risen={c.risen} sun={c.sun} dark={dark} />
      </div>
      <div style={{ padding: "0 24px 40px", flex: "none" }}>
        <div style={{ ...eyebrow, marginBottom: 14 }}>{c.label}</div>
        <div style={{ font: "600 34px/1.1 var(--font-system)", letterSpacing: "-.035em", color: c.tone2 }}>{c.line}</div>
        <div style={{ font: "400 15px/1 var(--font-system)", color: "var(--text-secondary)", marginTop: 14, ...num }}>{c.data}</div>
        <div style={{ display: "flex", gap: 4, marginTop: 28 }}>
          {monthMarks.map((m, i) => (
            <div key={i} style={{ flex: 1, height: 22, borderRadius: 2,
              background: m ? "var(--accent-wash)" : "transparent",
              borderBottom: `2px solid ${m ? "var(--accent)" : "var(--border-hairline)"}` }} />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10,
          font: "400 12px/1 var(--font-system)", color: "var(--text-tertiary)", ...num }}>
          <span>18 of 22 mornings</span><span>Next gate 7:00 AM</span>
        </div>
      </div>
    </div>
  );
}

/* ── C · LOG ──────────────────────────────────────────────────────────────── */
const logDays = [
  { d: "Wed 5", out: "6:58", steps: "2,140", p: 1 },
  { d: "Tue 4", out: "—", steps: "Rest day", p: 0, rest: true },
  { d: "Mon 3", out: "7:12", steps: "2,060", p: 1 },
  { d: "Sun 2", out: "6:47", steps: "3,380", p: 1 },
  { d: "Sat 1", out: "7:04", steps: "2,010", p: 1 },
  { d: "Fri 31", out: "6:51", steps: "2,480", p: 1 },
  { d: "Thu 30", out: "7:20", steps: "2,020", p: 1 },
  { d: "Wed 29", out: "—", steps: "Rest day", p: 0, rest: true },
  { d: "Tue 28", out: "6:44", steps: "2,910", p: 1 },
  { d: "Mon 27", out: "7:02", steps: "2,150", p: 1 },
  { d: "Sun 26", out: "6:39", steps: "3,640", p: 1 },
];

const logCopy = {
  open:   { line: "Open. Go on.", tone: "var(--accent)", big: "2,340", unit: "steps", ring: { progress: 1, state: "complete" },
            note: "Second early open this month." },
  done:   { line: "Done for today.", tone: "var(--text-primary)", big: "4,102", unit: "steps", ring: { progress: 1, state: "complete" },
            note: "Out at 6:52. Apps open the rest of the day." },
  before: { line: "The day starts outside.", tone: "var(--text-primary)", big: "7:00", unit: "gate", ring: { progress: 0, state: "active" },
            note: "Alarm at 6:40. Shoes by the door." },
};

function ScreenLog({ state = "open", dark }) {
  const c = logCopy[state];
  return (
    <div style={pageStyle}>
      <div style={{ padding: `${S + 10}px 24px 16px`, display: "flex", alignItems: "center",
        justifyContent: "space-between", flex: "none" }}>
        <Wordmark size={24} dark={dark} /><IconRow />
      </div>
      <div style={{ padding: "0 24px", flex: "none" }}>
        <div style={{ height: 1, background: "var(--border-hairline)" }} />
        <div style={{ display: "flex", alignItems: "center", gap: 20, padding: "30px 0 34px" }}>
          <ProgressRing size={92} strokeWidth={5} {...c.ring}>
            <div style={{ font: "200 22px/1 var(--font-system)", ...num }}>{c.big}</div>
            <div style={{ ...eyebrow, fontSize: 10, marginTop: 6 }}>{c.unit}</div>
          </ProgressRing>
          <div style={{ flex: 1 }}>
            <div style={{ ...eyebrow, marginBottom: 10 }}>Thursday 6 August</div>
            <div style={{ font: "600 26px/1.12 var(--font-system)", letterSpacing: "-.03em", color: c.tone,
              textWrap: "balance" }}>{c.line}</div>
          </div>
        </div>
        <div style={{ font: "400 15px/1.45 var(--font-system)", color: "var(--text-secondary)",
          paddingBottom: 30, textWrap: "pretty" }}>{c.note}</div>
      </div>
      <div style={{ flex: 1, padding: "0 24px", overflow: "hidden" }}>
        <div style={{ ...eyebrow, padding: "0 0 6px" }}>This month</div>
        {logDays.map(r => (
          <div key={r.d} style={{ display: "flex", alignItems: "center", gap: 14, padding: "15px 0",
            borderTop: "1px solid var(--border-hairline)", font: "400 15px/1 var(--font-system)", ...num }}>
            <span style={{ width: 64, flex: "none", whiteSpace: "nowrap", color: "var(--text-secondary)" }}>{r.d}</span>
            <span style={{ width: 46, color: r.rest ? "var(--rest)" : "var(--text-tertiary)" }}>{r.out}</span>
            <span style={{ flex: 1, color: r.rest ? "var(--rest)" : "var(--text-primary)" }}>{r.steps}</span>
            <span style={{ width: 44, height: 3, borderRadius: 2, flex: "none",
              background: r.rest ? "var(--rest-wash)" : "var(--accent-wash)", position: "relative" }}>
              <span style={{ position: "absolute", inset: 0, width: `${r.p * 100}%`, borderRadius: 2,
                background: r.rest ? "var(--rest)" : "var(--accent)", opacity: r.rest ? 0.5 : 1 }} />
            </span>
          </div>
        ))}
      </div>
      <Footer label="Next gate" value="Tomorrow, 7:00 AM" />
    </div>
  );
}

Object.assign(window, { GateScreenRing: ScreenRing });