// watch-screens.jsx — Keel: continuous biofeedback mirror (v02)
// Replaces alert-style watch with mirror model. Younger tier (ages 6-9).

const KEEL_GREEN = '#7FA98F';
const KEEL_AMBER = '#F4B860';
const KEEL_RED   = '#E08A7B';
const KEEL_INK   = '#FFF4E6';

// Concentric arc — the always-on biofeedback mirror.
function ZoneArc({ zone = 'green', size = 168 }) {
  const c = zone === 'green' ? KEEL_GREEN : zone === 'yellow' ? KEEL_AMBER : KEEL_RED;
  const r = size / 2 - 6;
  const cx = size / 2;
  const circ = 2 * Math.PI * r;
  const filled = zone === 'green' ? 0.18 : zone === 'yellow' ? 0.55 : 0.92;
  return (
    <svg width={size} height={size} style={{ position: 'absolute', top: '50%', left: '50%',
      transform: 'translate(-50%, -50%)' }}>
      {/* track */}
      <circle cx={cx} cy={cx} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="3"/>
      {/* arc */}
      <circle cx={cx} cy={cx} r={r} fill="none" stroke={c} strokeWidth="3"
        strokeLinecap="round"
        strokeDasharray={`${circ * filled} ${circ}`}
        transform={`rotate(-90 ${cx} ${cx})`}
        style={{ filter: `drop-shadow(0 0 6px ${c})` }}/>
      {zone !== 'green' && (
        <circle cx={cx} cy={cx} r={r - 14} fill="none"
          stroke={c} strokeWidth="1" opacity="0.25"
          style={{ animation: zone === 'red' ? 'kw-pulse 1.2s ease-in-out infinite' : 'kw-pulse 3s ease-in-out infinite' }}/>
      )}
    </svg>
  );
}

// Watch face — Green / Yellow / Red biofeedback mirror.
// Default = quiet mirror (just the wave + a one-word label).
// `data` prop reveals the time + HR/HRV chips for parents who want the readout.
function WatchMirror({ zone = 'green', data = false }) {
  const label = zone === 'green' ? 'Even keel' : zone === 'yellow' ? 'Building' : 'Heavy';
  const labelC = zone === 'green' ? KEEL_GREEN : zone === 'yellow' ? KEEL_AMBER : KEEL_RED;
  const animDur = zone === 'red' ? '1.4s' : zone === 'yellow' ? '3s' : '0s';
  const ringSize = data ? 96 : 130;
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#000', color: '#fff',
      fontFamily: FONT_BODY, padding: '12px 14px',
      display: 'flex', flexDirection: 'column',
      justifyContent: data ? 'space-between' : 'center', alignItems: 'center' }}>
      {data && (
        <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between',
          fontSize: 12, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
          <span style={{ color: labelC }}>9:41</span>
          <span style={{ color: 'rgba(255,255,255,0.45)', fontSize: 10 }}>THU 8</span>
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
        flex: data ? 0 : 1, justifyContent: 'center' }}>
        <div style={{
          width: ringSize, height: ringSize, borderRadius: '50%',
          background: zone === 'green' ? 'transparent' : `radial-gradient(circle, ${labelC}cc, ${labelC}22)`,
          border: zone === 'green' ? `1.5px dashed ${labelC}77` : 'none',
          boxShadow: zone === 'green' ? 'none' : `0 0 28px ${labelC}88`,
          animation: zone === 'green' ? 'none' : `kw-mirror ${animDur} ease-in-out infinite`,
        }}/>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 18, fontWeight: 500,
          letterSpacing: -0.3, color: labelC, lineHeight: 1 }}>{label}</div>
      </div>
      {data && (
        <div style={{ width: '100%', display: 'flex', gap: 6 }}>
          <WMComp label="HR" value={zone === 'red' ? '128' : zone === 'yellow' ? '102' : '84'} c={KEEL_RED}/>
          <WMComp label="HRV" value={zone === 'red' ? '41' : zone === 'yellow' ? '54' : '68'} c={KEEL_GREEN}/>
        </div>
      )}
      <style>{`@keyframes kw-mirror {
        0%,100% { transform: scale(0.85); opacity: 0.65; }
        50% { transform: scale(1.05); opacity: 1; }
      }`}</style>
    </div>
  );
}

function WMComp({ label, value, c }) {
  return (
    <div style={{ flex: 1, padding: '5px 8px', borderRadius: 10,
      background: 'rgba(255,255,255,0.06)' }}>
      <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: 0.6,
        textTransform: 'uppercase', color: c }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}

// Breathing tool — haptic overlay; eyes-closed mode is just a calm fill.
function WatchBreathe({ eyesClosed = false }) {
  if (eyesClosed) {
    return (
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 45%, #2C3E2D, #0E1810)',
        animation: 'kw-fill 7s ease-in-out infinite' }}>
        <style>{`@keyframes kw-fill { 0%,100% { filter: brightness(0.7); } 50% { filter: brightness(1.15); } }`}</style>
      </div>
    );
  }
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#000',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', color: '#fff', fontFamily: FONT_BODY }}>
      <div style={{ position: 'absolute', top: 12, fontSize: 10, fontWeight: 700,
        letterSpacing: 0.6, textTransform: 'uppercase', color: KEEL_GREEN }}>Breathing</div>
      <div style={{ position: 'relative', width: 140, height: 140 }}>
        <div style={{ position: 'absolute', inset: 0, borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 30%, #C9DDC4, #7FA98F)',
          boxShadow: `0 0 30px ${KEEL_GREEN}99`,
          animation: 'kw-breathe 7s ease-in-out infinite',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#1A2E1F',
            letterSpacing: 0.4 }}>in</div>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 14, fontSize: 10,
        color: 'rgba(255,255,255,0.5)' }}>3.5 in · 3.5 out</div>
      <style>{`@keyframes kw-breathe {
        0%,100% { transform: scale(0.72); }
        50% { transform: scale(1.05); }
      }`}</style>
    </div>
  );
}

// Parent presence pulse arriving on child's wrist — "I'm with you"
function WatchPresence() {
  return (
    <div style={{ position: 'absolute', inset: 0,
      background: 'radial-gradient(circle at 50% 50%, #2C3E2D 0%, #000 80%)',
      color: '#fff', fontFamily: FONT_BODY,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', padding: '16px 14px', textAlign: 'center' }}>
      <div style={{ width: 80, height: 80, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(201,221,196,0.95), rgba(127,169,143,0.4))',
        boxShadow: '0 0 36px rgba(201,221,196,0.55)',
        animation: 'kw-presence 3s ease-in-out infinite',
        marginBottom: 14 }}/>
      <div style={{ fontFamily: FONT_DISPLAY, fontSize: 18, fontWeight: 500,
        letterSpacing: -0.3, lineHeight: 1.1 }}>Mom is here.</div>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', marginTop: 6,
        lineHeight: 1.3, maxWidth: 160 }}>
        She's breathing with you.
      </div>
      <style>{`@keyframes kw-presence {
        0%,100% { transform: scale(0.85); opacity: 0.7; }
        50% { transform: scale(1.05); opacity: 1; }
      }`}</style>
    </div>
  );
}

// Meet Your Watch — onboarding card teaching a haptic state
function WatchOnboardCard({ step = 'green' }) {
  const m = {
    green:   { c: KEEL_GREEN, t: 'Quiet means calm', s: 'When your watch is still, your body is steady.' },
    yellow:  { c: KEEL_AMBER, t: 'A little wave',    s: 'A soft wave means your body is starting to feel a lot.' },
    red:     { c: KEEL_RED,   t: 'A bigger wave',    s: 'Bigger wave = bigger feelings. Breathe with it.' },
    presence:{ c: '#C9DDC4',  t: 'Someone with you', s: 'A slow warm pulse means a grown-up is right here.' },
  }[step];
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#000', color: '#fff',
      fontFamily: FONT_BODY, padding: '12px 14px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 0.7,
        textTransform: 'uppercase', color: m.c }}>Meet your watch</div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 70, height: 70, borderRadius: '50%',
          background: step === 'green' ? 'transparent' : `radial-gradient(circle, ${m.c}cc, ${m.c}33)`,
          border: step === 'green' ? `1.5px dashed ${m.c}66` : 'none',
          animation: step === 'red' ? 'kw-onb 1.4s ease-in-out infinite'
                   : step === 'yellow' ? 'kw-onb 3s ease-in-out infinite'
                   : step === 'presence' ? 'kw-onb 3.5s ease-in-out infinite' : 'none' }}/>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 17, fontWeight: 500,
          color: m.c, letterSpacing: -0.3, textAlign: 'center', lineHeight: 1.1 }}>{m.t}</div>
        <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.65)',
          textAlign: 'center', lineHeight: 1.3, maxWidth: 170 }}>{m.s}</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
        {['green','yellow','red','presence'].map(k => (
          <span key={k} style={{ width: 5, height: 5, borderRadius: 3,
            background: k === step ? m.c : 'rgba(255,255,255,0.2)' }}/>
        ))}
      </div>
      <style>{`@keyframes kw-onb { 0%,100% { transform: scale(0.85); opacity: 0.65; } 50% { transform: scale(1.05); opacity: 1; } }`}</style>
    </div>
  );
}

// Recovery celebration — fires when biometrics close back to baseline.
// Sunburst + radiating sparkles + warm pulse. The "you did that" moment.
function WatchRecovery() {
  return (
    <div style={{ position: 'absolute', inset: 0,
      background: 'radial-gradient(circle at 50% 55%, #FFD66E 0%, #FFB37A 45%, #2C3E2D 100%)',
      color: '#FFF4E6', fontFamily: FONT_BODY, overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', padding: '12px 14px' }}>

      {/* radiating rays */}
      <svg viewBox="-100 -100 200 200" style={{ position: 'absolute', inset: 0,
        width: '100%', height: '100%' }}>
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2;
          const x1 = Math.cos(a) * 38, y1 = Math.sin(a) * 38;
          const x2 = Math.cos(a) * 100, y2 = Math.sin(a) * 100;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
            stroke="#FFE89B" strokeWidth="3" strokeLinecap="round"
            style={{ animation: `kw-ray 1.6s ease-out infinite ${i * 0.05}s`,
              transformOrigin: '0 0' }}/>;
        })}
      </svg>

      {/* confetti dots */}
      <svg viewBox="-100 -100 200 200" style={{ position: 'absolute', inset: 0,
        width: '100%', height: '100%' }}>
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i / 16) * Math.PI * 2 + 0.3;
          const r = 50 + (i % 3) * 12;
          const colors = ['#FFE89B', '#C9DDC4', '#FFB37A', '#FF8FA3'];
          return <circle key={i} cx={Math.cos(a) * r} cy={Math.sin(a) * r}
            r={2 + (i % 2)} fill={colors[i % 4]}
            style={{ animation: `kw-confetti 2s ease-out infinite ${i * 0.08}s` }}/>;
        })}
      </svg>

      {/* central sun */}
      <div style={{ position: 'relative', zIndex: 2, marginBottom: 10 }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 35%, #FFE89B, #FFD66E 60%, #FFB37A)',
          boxShadow: '0 0 32px rgba(255,232,155,0.85)',
          animation: 'kw-sun 1.6s ease-in-out infinite',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="22" height="22" viewBox="0 0 22 22">
            <path d="M5 12 L9.5 16 L17 7" stroke="#3D2914" strokeWidth="2.2"
              strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
        </div>
      </div>

      {/* copy */}
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 18, fontWeight: 500,
          letterSpacing: -0.3, lineHeight: 1.05 }}>
          You came back.
        </div>
        <div style={{ fontSize: 9, color: 'rgba(255,244,230,0.7)', marginTop: 4,
          letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 700 }}>
          Even keel · 2:14
        </div>
      </div>

      <style>{`
        @keyframes kw-ray {
          0% { opacity: 0; stroke-width: 1; }
          30% { opacity: 1; stroke-width: 4; }
          100% { opacity: 0; stroke-width: 2; }
        }
        @keyframes kw-confetti {
          0% { opacity: 0; transform: scale(0.4); }
          40% { opacity: 1; transform: scale(1.2); }
          100% { opacity: 0; transform: scale(0.6) translate(0, 4px); }
        }
        @keyframes kw-sun {
          0%, 100% { transform: scale(0.95); }
          50% { transform: scale(1.08); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { WatchMirror, WatchBreathe, WatchPresence, WatchOnboardCard, WatchRecovery });