// Handoff screen — the hero flow. Pull down on phone to beam session to desktop.

function HandoffScreen({ theme }) {
  const t = theme;
  const [pull, setPull] = React.useState(0);
  const [state, setState] = React.useState('idle'); // idle | pulling | sending | done
  const startY = React.useRef(null);

  const onDown = (e) => { if (state !== 'idle') return; startY.current = (e.touches?.[0]?.clientY ?? e.clientY); setState('pulling'); };
  const onMove = (e) => {
    if (startY.current == null) return;
    const y = (e.touches?.[0]?.clientY ?? e.clientY);
    const dy = Math.max(0, Math.min(200, y - startY.current));
    setPull(dy);
  };
  const onUp = () => {
    if (pull > 130) {
      setState('sending');
      setTimeout(() => setState('done'), 1400);
    } else {
      setPull(0);
      setState('idle');
    }
    startY.current = null;
  };

  const reset = () => { setPull(0); setState('idle'); };

  const progress = Math.min(1, pull / 130);

  return (
    <div
      onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
      onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
      style={{ height: '100%', background: t.bg, color: t.ink, fontFamily: SEEDEX_FONTS.sans, padding: '62px 0 0', overflow: 'hidden', position: 'relative', userSelect: 'none', cursor: state === 'idle' ? 'grab' : 'default' }}>

      {/* Pull indicator — sits at top, grows with pull */}
      {(state === 'pulling' || state === 'sending') && (
        <div style={{
          position: 'absolute', top: 44, left: 0, right: 0,
          height: pull, display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: state === 'sending' ? 'height .4s ease' : 'none',
          pointerEvents: 'none',
        }}>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: progress >= 1 ? t.accent : t.inkFaint }}>
            {progress >= 1 ? '↑  release to hand off  ↑' : `pull down to hand off  ·  ${Math.round(progress*100)}%`}
          </div>
        </div>
      )}

      {/* main content — slides down with pull */}
      <div style={{ transform: `translateY(${state === 'sending' ? 600 : pull}px)`, transition: state === 'sending' ? 'transform 1.2s cubic-bezier(.7,0,.3,1)' : startY.current ? 'none' : 'transform .3s ease', opacity: state === 'done' ? 0.3 : 1 }}>
        <div style={{ padding: '8px 24px 24px' }}>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Handoff</div>
          <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 34, lineHeight: 1.15, letterSpacing: -0.3, marginTop: 10, paddingBottom: 4 }}>
            Pull down to <span style={{ fontStyle: 'italic', color: t.accent }}>replant</span> this session on your Mac.
          </div>
          <div style={{ marginTop: 18, fontSize: 13, color: t.inkSoft, lineHeight: 1.5 }}>
            Your twin keeps the context, the file tree scroll, and the current tool queue. Pick up right where you left off.
          </div>
        </div>

        {/* Session card with Handoff target */}
        <div style={{ margin: '12px 16px', padding: 18, borderRadius: 22, background: t.surface, border: `1px solid ${t.line}` }}>
          <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Current session</div>
          <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 22, marginTop: 4, letterSpacing: -0.2 }}>auth-refactor</div>
          <div style={{ marginTop: 16, display: 'flex', gap: 6, alignItems: 'center', fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkSoft }}>
            <span>42 msgs</span><span>·</span><span>7 files touched</span><span>·</span><span>18m</span>
          </div>
        </div>

        {/* Target device */}
        <div style={{ margin: '16px 16px 8px', padding: 20, borderRadius: 22, background: t.surfaceRaised, border: `1.5px dashed ${t.accent}66` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {SeedexIcons.desktop(t.accent)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>Mac Studio</div>
              <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 11, color: t.inkSoft, marginTop: 2 }}>studio.local · online · same wifi</div>
            </div>
            <div style={{ width: 28, height: 28, borderRadius: '50%', border: `1.5px solid ${t.accent}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {SeedexIcons.check(t.accent)}
            </div>
          </div>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${t.line}`, display: 'flex', justifyContent: 'space-between', fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1, color: t.inkFaint, textTransform: 'uppercase' }}>
            <span>Latency · 4ms</span><span>Warp tunnel · on</span>
          </div>
        </div>

        {/* Other devices */}
        <div style={{ margin: '8px 16px', padding: '14px 18px', borderRadius: 18, background: t.surface, border: `1px solid ${t.line}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {SeedexIcons.desktop(t.inkFaint)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>MacBook Pro</div>
              <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint, marginTop: 2 }}>sleeping · last seen 3h</div>
            </div>
            <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, color: t.inkFaint, textTransform: 'uppercase', letterSpacing: 1 }}>wake</div>
          </div>
        </div>

        {/* Gesture hint */}
        <div style={{ padding: 24, textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <div style={{ fontSize: 20, color: t.inkFaint }}>↓</div>
            <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.4, color: t.inkFaint, textTransform: 'uppercase' }}>Pull anywhere to hand off</div>
          </div>
        </div>
      </div>

      {/* Sending overlay */}
      {state === 'sending' && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <SendingAnimation t={t} />
        </div>
      )}

      {/* Done overlay */}
      {state === 'done' && (
        <div style={{ position: 'absolute', inset: 0, background: t.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
          <div style={{ width: 80, height: 80, borderRadius: '50%', background: t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <Sprout stage={3} size={56} color={t.accent} soft={t.isDark ? t.accent + '44' : '#FFFFFF'} />
          </div>
          <div style={{ fontFamily: SEEDEX_FONTS.display, fontSize: 34, letterSpacing: -0.4, lineHeight: 1.1, maxWidth: 280 }}>
            <span style={{ fontStyle: 'italic', color: t.accent }}>Replanted.</span><br/>
            Your Mac has the session.
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: t.inkSoft, maxWidth: 280, lineHeight: 1.5 }}>
            Claude Code is open in iTerm on studio.local. Picked up mid-thought. You can close this app.
          </div>
          <button onClick={reset} style={{ marginTop: 28, padding: '12px 22px', background: t.ink, color: t.bg, border: 'none', borderRadius: 99, fontFamily: SEEDEX_FONTS.mono, fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', cursor: 'pointer' }}>
            ↺  try again
          </button>
        </div>
      )}
    </div>
  );
}

function SendingAnimation({ t }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
      <div style={{ position: 'relative', width: 100, height: 100 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            position: 'absolute', inset: 0,
            border: `1.5px solid ${t.accent}`, borderRadius: '50%',
            animation: `seedex-ring 1.6s ${i * 0.3}s ease-out infinite`,
          }} />
        ))}
        <div style={{ position: 'absolute', inset: 30, background: t.accentSoft, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Sprout stage={2} size={28} color={t.accent} soft={t.isDark ? t.accent + '44' : '#FFFFFF'} />
        </div>
      </div>
      <div style={{ fontFamily: SEEDEX_FONTS.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase', color: t.inkSoft }}>
        replanting · studio.local
      </div>
    </div>
  );
}

Object.assign(window, { HandoffScreen });