// Home / Twin status screen
function HomeScreen({ theme, density }) {
  const t = theme;
  const [pulse, setPulse] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setPulse(p => p + 1), 1600);
    return () => clearInterval(i);
  }, []);

  return (
    <div style={{ padding: '72px 0 0', height: '100%', overflow: 'auto', background: t.bg, color: t.ink, fontFamily: SEEDEX_FONTS.sans }}>
      {/* Header row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px 12px' }}>
        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: t.inkFaint }}>
          SEEDEX · 0.4.1
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.accent }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.accent, boxShadow: `0 0 0 ${4 + (pulse % 2) * 2}px ${t.accent}22`, transition: 'box-shadow .8s' }} />
          LINKED
        </div>
      </div>

      {/* Hero — the twin */}
      <div style={{ padding: '8px 24px 28px' }}>
        <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 46, lineHeight: 1.02, letterSpacing: -0.8, fontWeight: 400 }}>
          Your twin is<br/>
          <span style={{ fontStyle: 'italic', color: t.accent }}>tending</span> a task.
        </div>
        <div style={{ marginTop: 14, fontSize: 14, color: t.inkSoft, lineHeight: 1.5, maxWidth: 320 }}>
          Claude Code is running on <span style={{ color: t.ink, fontWeight: 500 }}>Mac Studio · studio.local</span>. Last heartbeat 2 seconds ago.
        </div>
      </div>

      {/* Living twin card */}
      <div style={{ margin: '0 16px 16px', padding: 20, borderRadius: 24, background: t.surface, border: `1px solid ${t.line}`, position: 'relative', overflow: 'hidden' }}>
        {/* ambient growth rings */}
        <div style={{ position: 'absolute', right: -40, top: -40, width: 180, height: 180, borderRadius: '50%', border: `1px solid ${t.accent}22` }} />
        <div style={{ position: 'absolute', right: -20, top: -20, width: 140, height: 140, borderRadius: '50%', border: `1px solid ${t.accent}33` }} />
        <div style={{ position: 'absolute', right: 6, top: 6, width: 88, height: 88, borderRadius: '50%', background: t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Sprout stage={2} size={56} color={t.accent} soft={t.isDark ? t.accent + '66' : '#FFFFFF88'} />
        </div>

        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>ACTIVE SESSION</div>
        <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 26, lineHeight: 1.15, marginTop: 6, maxWidth: 220, letterSpacing: -0.3 }}>
          Refactor the auth middleware
        </div>
        <div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
          <Stat label="edits" value="14" t={t} />
          <Stat label="files" value="7" t={t} />
          <Stat label="waiting" value="1" t={t} highlight />
        </div>

        {/* Progress seedline */}
        <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ flex: 1, height: 2, background: t.line, borderRadius: 2, overflow: 'hidden', position: 'relative' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '62%', background: t.accent }} />
          </div>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkSoft }}>62%</div>
        </div>
      </div>

      {/* Pending approval — the novel interaction */}
      <div style={{ padding: '0 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 8px 10px' }}>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Awaiting you</div>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint }}>1 request</div>
        </div>
        <ApprovalCard t={t} />
      </div>

      {/* Live feed */}
      <div style={{ padding: '22px 16px 12px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 8px 14px' }}>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Live feed</div>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.accent }}>streaming ·</div>
        </div>
        <FeedItem t={t} time="0:04" type="edit" text="Wrote middleware/withAuth.ts" detail="+48 / −12" />
        <FeedItem t={t} time="0:12" type="thought" text="Verifying token refresh edge case…" />
        <FeedItem t={t} time="0:21" type="edit" text="Wrote lib/session.ts" detail="+22 / −6" />
        <FeedItem t={t} time="0:33" type="run" text="pnpm test auth" detail="14 passed" />
        <FeedItem t={t} time="0:41" type="thought" text="Needs to read .env.local — asking you." last />
      </div>

      <div style={{ height: 120 }} />
    </div>
  );
}

function Stat({ label, value, t, highlight }) {
  return (
    <div>
      <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 28, letterSpacing: -0.5, color: highlight ? t.accent : t.ink, lineHeight: 1 }}>{value}</div>
      <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.2, color: t.inkFaint, textTransform: 'uppercase', marginTop: 4 }}>{label}</div>
    </div>
  );
}

function ApprovalCard({ t }) {
  const [swipe, setSwipe] = React.useState(0); // -1..1
  const [resolved, setResolved] = React.useState(null);
  const startX = React.useRef(null);

  const onDown = (e) => { startX.current = (e.touches?.[0]?.clientX ?? e.clientX); };
  const onMove = (e) => {
    if (startX.current == null) return;
    const x = (e.touches?.[0]?.clientX ?? e.clientX);
    const dx = x - startX.current;
    setSwipe(Math.max(-1, Math.min(1, dx / 120)));
  };
  const onUp = () => {
    if (swipe > 0.7) setResolved('approved');
    else if (swipe < -0.7) setResolved('denied');
    setSwipe(0);
    startX.current = null;
  };

  if (resolved) {
    return (
      <div style={{ padding: 20, borderRadius: 22, background: resolved === 'approved' ? t.accentSoft : t.surface, border: `1px solid ${t.line}`, textAlign: 'center', fontFamily: SEEDEX_FONTS.mono, fontSize: 12, color: resolved === 'approved' ? t.accentInk : t.inkSoft, letterSpacing: 0.6, textTransform: 'uppercase' }}>
        {resolved === 'approved' ? '✓ approved · resumed' : '✕ denied · noted'}
        <button onClick={() => setResolved(null)} style={{ display: 'block', margin: '8px auto 0', background: 'none', border: 'none', color: t.inkFaint, fontFamily: SEEDEX_FONTS.mono, fontSize: 10, textDecoration: 'underline', cursor: 'pointer' }}>reset</button>
      </div>
    );
  }

  const bg = swipe > 0 ? `linear-gradient(90deg, ${t.surface} ${50 - swipe*40}%, ${t.accentSoft})` : swipe < 0 ? `linear-gradient(270deg, ${t.surface} ${50 + swipe*40}%, ${t.isDark ? '#3a1f12' : '#F2DDD0'})` : t.surface;

  return (
    <div
      onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
      onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
      style={{
        padding: 20, borderRadius: 22, background: bg, border: `1px solid ${t.lineStrong}`,
        userSelect: 'none', cursor: 'grab', transform: `translateX(${swipe * 20}px)`,
        transition: startX.current ? 'none' : 'transform .3s ease, background .2s',
        position: 'relative', overflow: 'hidden',
      }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.warn, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: t.warn }} />
          Tool call · Read
        </div>
        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint }}>just now</div>
      </div>
      <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 22, marginTop: 10, lineHeight: 1.2, letterSpacing: -0.2 }}>
        Read <span style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 15, background: t.isDark ? '#00000044' : '#00000008', padding: '1px 6px', borderRadius: 6 }}>.env.local</span>?
      </div>
      <div style={{ fontSize: 13, color: t.inkSoft, marginTop: 8, lineHeight: 1.45 }}>
        To verify which auth provider is live before rewriting the session handler.
      </div>

      <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderRadius: 99, background: t.isDark ? '#00000033' : '#00000006', fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkFaint }}>
          <span>←</span><span style={{ flex: 1, textAlign: 'center' }}>swipe to decide</span><span>→</span>
        </div>
      </div>

      {/* swipe ghosts */}
      <div style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.warn, opacity: Math.max(0, -swipe), letterSpacing: 1 }}>DENY</div>
      <div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.accent, opacity: Math.max(0, swipe), letterSpacing: 1 }}>ALLOW</div>
    </div>
  );
}

function FeedItem({ t, time, type, text, detail, last }) {
  const typeColor = type === 'edit' ? t.accent : type === 'run' ? t.warn : t.inkSoft;
  const typeLabel = { edit: 'edit', thought: 'think', run: 'run' }[type];
  return (
    <div style={{ display: 'flex', gap: 14, padding: '10px 8px', position: 'relative' }}>
      <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint, width: 32, paddingTop: 2, flexShrink: 0 }}>{time}</div>
      <div style={{ width: 1, background: t.line, position: 'relative', flexShrink: 0 }}>
        <div style={{ position: 'absolute', left: -3, top: 5, width: 7, height: 7, borderRadius: '50%', background: typeColor }} />
        {last && <div style={{ position: 'absolute', left: 0, top: 12, bottom: -10, width: 1, background: 'transparent' }} />}
      </div>
      <div style={{ flex: 1, paddingTop: 0 }}>
        <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 9, letterSpacing: 1.4, color: typeColor, textTransform: 'uppercase' }}>{typeLabel}</div>
        <div style={{ fontSize: 14, color: t.ink, marginTop: 2, lineHeight: 1.4 }}>{text}</div>
        {detail && <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkFaint, marginTop: 2 }}>{detail}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen });