// Screen 1 — AI Scan
// State A: scanning (rotating progress + pulsing dot + privacy assurance)
// State B: complete (stagger-in result cards + CTA)
// Tap anywhere on the screen surface to advance from A → B.

const T = window.TOKEN;
const { useState: useS1 } = React;

// Animated circular progress: amber arc rotating around dim ring
const ScanProgressRing = ({ size = 180 }) => {
  const r = 78;
  const cx = 100, cy = 100;
  const c = 2 * Math.PI * r;
  const dash = c * 0.28;
  return (
    <div style={{ width: size, height: size, position: 'relative' }}>
      <style>{`
        @keyframes panSpin { to { transform: rotate(360deg); } }
        @keyframes panPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.85);} }
        @keyframes panRipple { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }
      `}</style>
      <svg viewBox="0 0 200 200" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
        {/* dim base ring */}
        <circle cx={cx} cy={cy} r={r} fill="none" stroke={T.border} strokeWidth="2" />
        {/* faint inner ring */}
        <circle cx={cx} cy={cy} r={r - 14} fill="none" stroke={T.border} strokeWidth="1" strokeDasharray="2 4" />
        {/* rotating progress arc */}
        <g style={{ transformOrigin: '100px 100px', animation: 'panSpin 1.6s linear infinite' }}>
          <circle cx={cx} cy={cy} r={r} fill="none" stroke={T.signal}
            strokeWidth="3" strokeLinecap="round"
            strokeDasharray={`${dash} ${c - dash}`} transform="rotate(-90 100 100)" />
        </g>
      </svg>
      {/* center pulsing dot */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ position: 'relative', width: 32, height: 32 }}>
          <div style={{
            position: 'absolute', inset: 0,
            border: `1px solid ${T.success}`, borderRadius: '50%',
            animation: 'panRipple 1.8s ease-out infinite',
          }} />
          <div style={{
            position: 'absolute', inset: 10,
            background: T.success, borderRadius: '50%',
            boxShadow: `0 0 16px ${T.success}`,
            animation: 'panPulse 1.4s ease-in-out infinite',
          }} />
        </div>
      </div>
    </div>
  );
};

// Pill chip for "scanning" + "complete" mode
const StatusPill = ({ status }) => {
  const isDone = status === 'done';
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px',
      background: isDone ? 'rgba(110,231,135,0.08)' : 'rgba(245,166,35,0.10)',
      boxShadow: `0 0 0 1px ${isDone ? 'rgba(110,231,135,0.25)' : 'rgba(245,166,35,0.25)'} inset`,
      borderRadius: 999,
      fontFamily: T.fontMono, fontSize: 10, fontWeight: 500,
      letterSpacing: '0.1em', textTransform: 'uppercase',
      color: isDone ? T.success : T.signal,
    }}>
      <span style={{
        width: 5, height: 5, borderRadius: '50%',
        background: isDone ? T.success : T.signal,
        boxShadow: isDone ? 'none' : `0 0 8px ${T.signalSoft}`,
      }} />
      {isDone ? 'Scan complete' : 'Scanning'}
    </div>
  );
};

// Metric card that appears in stagger (or static when noAnim is true)
const MetricCard = ({ delay, label, value, unit, sub, accent, noAnim }) => (
  <div style={{
    background: T.bgRaised,
    borderRadius: 10,
    padding: '16px 18px',
    boxShadow: `0 0 0 1px ${T.border} inset`,
    display: 'flex',
    flexDirection: 'column',
    gap: 6,
    opacity: noAnim ? 1 : 0,
    transform: noAnim ? 'none' : 'translateY(10px)',
    animation: noAnim ? 'none' : `panCardIn 420ms cubic-bezier(0.22,1,0.36,1) ${delay}ms forwards`,
  }}>
    <div style={{
      fontFamily: T.fontMono, fontSize: 10, color: T.fg4,
      textTransform: 'uppercase', letterSpacing: '0.12em',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    }}>
      <span>{label}</span>
      <span style={{
        width: 5, height: 5, borderRadius: '50%',
        background: accent || T.success,
      }} />
    </div>
    <div style={{
      fontFamily: T.fontSans,
      fontWeight: 500, fontSize: 28, letterSpacing: '-0.02em',
      color: T.fg1, fontVariantNumeric: 'tabular-nums',
      lineHeight: 1,
    }}>
      {value}
      <span style={{
        marginLeft: 6, fontFamily: T.fontMono, fontSize: 13,
        color: T.fg3, fontWeight: 400, letterSpacing: '0.01em',
      }}>{unit}</span>
    </div>
    {sub && (
      <div style={{ fontFamily: T.fontSans, fontSize: 12, color: T.fg3, marginTop: 2 }}>
        {sub}
      </div>
    )}
  </div>
);

// Lock icon (inline SVG, brand-stroke)
const LockIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="11" width="16" height="10" rx="2" />
    <path d="M8 11V8a4 4 0 0 1 8 0v3" />
  </svg>
);

const AIScanScreen = ({ forceStage }) => {
  const [stage, setStage] = useS1(forceStage || 'scanning'); // 'scanning' | 'done'
  const advance = () => { if (stage === 'scanning') setStage('done'); };

  return (
    <div
      onClick={advance}
      style={{
        width: '100%', height: '100%',
        background: T.bgCanvas, color: T.fg1,
        fontFamily: T.fontSans,
        display: 'flex', flexDirection: 'column',
        cursor: 'pointer',
        position: 'relative',
        overflow: 'hidden',
      }}>
      <style>{`
        @keyframes panCardIn { to { opacity: 1; transform: translateY(0); } }
        @keyframes panFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>

      {/* Header */}
      <div style={{
        padding: '18px 24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: T.bgRaised, boxShadow: `0 0 0 1px ${T.border} inset`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.fg3, fontSize: 18, fontFamily: T.fontSans, fontWeight: 400,
        }}>×</div>
        <StatusPill status={stage === 'done' ? 'done' : 'scan'} />
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.fg3, fontSize: 14, fontFamily: T.fontMono,
        }}>?</div>
      </div>

      {/* ───────── SCANNING STATE ───────── */}
      {stage === 'scanning' && (
        <div style={{
          flex: 1, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          gap: 28, padding: '0 32px',
        }}>
          <ScanProgressRing size={200} />
          <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{
              fontFamily: T.fontMono, fontSize: 11,
              color: T.fg4, textTransform: 'uppercase', letterSpacing: '0.16em',
            }}>AI ANALYSIS</div>
            <div style={{
              fontFamily: T.fontSans, fontWeight: 500, fontSize: 28,
              letterSpacing: '-0.025em', color: T.fg1, lineHeight: 1.1,
            }}>Scanning locally…</div>
            <div style={{ fontFamily: T.fontSans, fontSize: 13, color: T.fg3, marginTop: 4 }}>
              Parsing 6 signals from your wearables
            </div>
          </div>

          {/* Privacy assurance */}
          <div style={{
            marginTop: 24,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 14px',
            background: T.bgRaised,
            borderRadius: 999,
            boxShadow: `0 0 0 1px ${T.border} inset`,
            color: T.fg2, fontFamily: T.fontSans, fontSize: 12, letterSpacing: '-0.005em',
          }}>
            <LockIcon size={14} />
            Data never leaves your device
          </div>

          {/* Tap-anywhere hint */}
          <div style={{
            position: 'absolute', bottom: 36, left: 0, right: 0,
            textAlign: 'center',
            fontFamily: T.fontMono, fontSize: 10, color: T.fg5,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            animation: 'panFadeIn 600ms ease-out 800ms backwards',
          }}>Tap anywhere to continue ↑</div>
        </div>
      )}

      {/* ───────── DONE STATE ───────── */}
      {stage === 'done' && (
        <div style={{
          flex: 1, display: 'flex', flexDirection: 'column',
          padding: '24px 24px 32px',
          gap: 16,
          opacity: forceStage ? 1 : 0,
          animation: forceStage ? 'none' : 'panFadeIn 360ms ease-out 0ms forwards',
        }}>
          <div style={{ marginTop: 8 }}>
            <div style={{
              fontFamily: T.fontMono, fontSize: 11,
              color: T.fg4, textTransform: 'uppercase', letterSpacing: '0.16em',
              marginBottom: 6,
            }}>RESULTS · 6 SIGNALS</div>
            <div style={{
              fontFamily: T.fontSans, fontWeight: 500, fontSize: 26,
              letterSpacing: '-0.025em', color: T.fg1, lineHeight: 1.15,
            }}>Your scan is ready.</div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <MetricCard
              delay={80}
              noAnim={!!forceStage}
              label="BLOOD GLUCOSE"
              value="5.2"
              unit="mmol/L"
              sub="Within fasting range"
              accent={T.success}
            />
            <MetricCard
              delay={180}
              noAnim={!!forceStage}
              label="HRV"
              value="42"
              unit="ms"
              sub="Moderate · 7-day avg 48"
              accent={T.warn}
            />
            <MetricCard
              delay={280}
              noAnim={!!forceStage}
              label="SLEEP"
              value="6.3"
              unit="h"
              sub="Below your 7-day avg"
              accent={T.warn}
            />
          </div>

          <div style={{ flex: 1 }} />

          {/* CTA */}
          <button
            style={{
              height: 52, width: '100%',
              background: T.signal, color: '#000',
              border: 'none', borderRadius: 12,
              fontFamily: T.fontSans, fontWeight: 600, fontSize: 15, letterSpacing: '-0.005em',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: 8, cursor: 'pointer',
              opacity: forceStage ? 1 : 0,
              animation: forceStage ? 'none' : 'panFadeIn 360ms ease-out 480ms forwards',
            }}>
            View Full Analysis
            <span style={{ transform: 'translateY(-1px)' }}>→</span>
          </button>
        </div>
      )}
    </div>
  );
};

window.AIScanScreen = AIScanScreen;