// Healify V2 — Nutrition + Fitness + Voice

function NutritionScreen({ onNavigate }) {
  const macros = [
    { k: 'protein', label: 'Protein', val: 82, goal: 120, unit: 'g', color: 'var(--brand-orange-vibey)' },
    { k: 'carbs',   label: 'Carbs',   val: 142, goal: 200, unit: 'g', color: 'var(--focus-fitness)' },
    { k: 'fats',    label: 'Fats',    val: 48,  goal: 70,  unit: 'g', color: 'var(--focus-sleep)' },
  ];
  const meals = [
    { time: '7:20 am',  name: 'Greek yogurt + berries', kcal: 280, note: 'logged', icon: 'plate' },
    { time: '12:45 pm', name: 'Chicken bowl + greens',  kcal: 540, note: 'photo',  icon: 'plate' },
    { time: '4:00 pm',  name: 'Almonds (handful)',      kcal: 170, note: 'logged', icon: 'flame' },
    { time: '7:30 pm',  name: 'Dinner',                 kcal: null, note: 'pending', icon: 'plate' },
  ];
  return (
    <HScreen label="04 Nutrition">
      <div style={{ padding: '8px 4px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="h-label">Tuesday</div>
          <div className="h-display" style={{ fontSize: 28, marginTop: 2 }}>Fuel</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <HIconButton icon="scan" tone="orange" />
          <HIconButton icon="plus" tone="soft" />
        </div>
      </div>

      <HCard pad="20px" radius={24} style={{ marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle, rgba(107,209,138,0.18), transparent 70%)' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, position: 'relative' }}>
          <div style={{ position: 'relative', width: 120, height: 120, flexShrink: 0 }}>
            <svg width={120} height={120} viewBox="0 0 120 120">
              <defs>
                <linearGradient id="nut-grad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#FF6942" /><stop offset="100%" stopColor="#FDB36B" />
                </linearGradient>
              </defs>
              <circle cx={60} cy={60} r={50} fill="none" stroke="var(--t-ink-04)" strokeWidth={12} />
              <circle cx={60} cy={60} r={50} fill="none" stroke="url(#nut-grad)" strokeWidth={12} strokeLinecap="round"
                strokeDasharray={`${2 * Math.PI * 50 * 0.68} ${2 * Math.PI * 50}`} transform="rotate(-90 60 60)" />
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>1,360</div>
              <div style={{ fontSize: 10, color: 'var(--t-fg-3)', textTransform: 'uppercase', letterSpacing: 1.2, fontWeight: 500, marginTop: 2 }}>of 2,000</div>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="h-label">Today's intake</div>
            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {macros.map(m => (
                <div key={m.k}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                    <span style={{ color: 'var(--t-fg-2)' }}>{m.label}</span>
                    <span style={{ color: 'var(--t-fg-1)', fontWeight: 500 }}>{m.val}<span style={{ color: 'var(--t-fg-3)', fontWeight: 400 }}>/{m.goal}{m.unit}</span></span>
                  </div>
                  <div style={{ height: 5, borderRadius: 999, background: 'var(--t-ink-04)', overflow: 'hidden' }}>
                    <div style={{ width: `${(m.val / m.goal) * 100}%`, height: '100%', background: m.color, borderRadius: 999 }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </HCard>

      <HCard pad="14px" radius={18} tone="cream" style={{ marginBottom: 16, border: '1px solid rgba(255,105,66,0.16)' }} elevate={false}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
          <HAnnaAvatar size={32} />
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.5 }}>
            You're <strong style={{ fontWeight: 600 }}>38g protein</strong> short. Try the grilled-salmon dinner or add Greek yogurt to your snack window.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, marginLeft: 42 }}>
          <HChip icon="check" tone="ghost">Use this</HChip>
          <HChip tone="ghost">Other options</HChip>
        </div>
      </HCard>

      <HSectionLabel action={{ label: 'Meal plan', onClick: () => onNavigate('mealplan') }}>Today's meals</HSectionLabel>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
        {meals.map((m, i) => (
          <HCard key={i} pad="14px" radius={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'color-mix(in oklab, var(--brand-orange-vibey) 10%, transparent)', color: 'var(--brand-orange-vibey)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name={m.icon} size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)', fontWeight: 500 }}>{m.time}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 1, letterSpacing: '-0.2px' }}>{m.name}</div>
              </div>
              {m.kcal ? (
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500 }}>{m.kcal}</div>
                  <div style={{ fontSize: 10, color: 'var(--t-fg-3)' }}>kcal</div>
                </div>
              ) : <HChip tone="cream">Log</HChip>}
            </div>
          </HCard>
        ))}
      </div>

      <HSectionLabel>Hydration</HSectionLabel>
      <HCard pad="16px" radius={18}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600 }}>5 <span style={{ color: 'var(--t-fg-3)' }}>/ 8</span></div>
            <div style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>glasses</div>
          </div>
          <HPrimaryButton variant="soft" size="sm" icon="plus">Log</HPrimaryButton>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 36, borderRadius: 8,
              background: i < 5 ? 'linear-gradient(180deg, #B6DCFF, #66B7FF)' : 'transparent',
              border: i < 5 ? '1px solid rgba(102,183,255,0.3)' : '1px dashed var(--t-ink-12)',
            }} />
          ))}
        </div>
      </HCard>
    </HScreen>
  );
}

// ============================================================================
// FITNESS
// ============================================================================
function FitnessScreen({ onNavigate }) {
  const rings = [
    { label: 'Move',    val: 320, goal: 500, unit: 'kcal',  color: 'var(--brand-orange-vibey)' },
    { label: 'Exercise', val: 18, goal: 30,  unit: 'min',   color: 'var(--focus-fitness)' },
    { label: 'Stand',    val: 8,  goal: 12,  unit: 'hours', color: 'var(--focus-mental)' },
  ];
  const week = [
    { d: 'Mon', done: true,  intensity: 0.7 },
    { d: 'Tue', done: false, today: true, intensity: 0.3 },
    { d: 'Wed', done: false, intensity: 0.6 },
    { d: 'Thu', done: false, intensity: 0.5 },
    { d: 'Fri', done: false, intensity: 0.8 },
    { d: 'Sat', done: false, intensity: 0.4 },
    { d: 'Sun', done: false, intensity: 0.0 },
  ];

  return (
    <HScreen label="05 Fitness">
      <div style={{ padding: '8px 4px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="h-label">Tuesday</div>
          <div className="h-display" style={{ fontSize: 28, marginTop: 2 }}>Move</div>
        </div>
        <HIconButton icon="calendar" tone="soft" />
      </div>

      {/* Today's workout — dark hero */}
      <HCard pad="0" radius={24} style={{ marginBottom: 16, overflow: 'hidden', background: 'linear-gradient(135deg, #2A2126 0%, #3B2F2E 100%)' }}>
        <div style={{ padding: '20px 20px 18px', color: '#fff', position: 'relative' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,179,107,0.28), transparent 70%)' }} />
          <div style={{ display: 'inline-flex', padding: '4px 10px', background: 'rgba(255,255,255,0.12)', borderRadius: 999, fontSize: 11, fontWeight: 500, letterSpacing: 0.4 }}>TODAY · BUILT FOR YOU</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, marginTop: 12, letterSpacing: '-0.02em' }}>Recovery walk + mobility</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>20 min · low intensity · for your BP</div>
          <div style={{ display: 'flex', gap: 18, marginTop: 16 }}>
            <FitStat label="Duration" value="20" unit="min" />
            <FitStat label="Effort" value="Z2" unit="zone" />
            <FitStat label="Calories" value="~120" unit="kcal" />
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
            <button onClick={() => onNavigate('workout')} style={{
              flex: 1, height: 44, borderRadius: 999, background: '#fff', color: 'var(--brand-ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontWeight: 500, fontSize: 14,
            }}>
              <Glyph name="arrowR" size={16} /> Start workout
            </button>
            <button style={{ width: 44, height: 44, borderRadius: 999, background: 'rgba(255,255,255,0.12)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Glyph name="refresh" size={16} />
            </button>
          </div>
        </div>
      </HCard>

      {/* Rings */}
      <HCard pad="18px" radius={20} style={{ marginBottom: 16 }}>
        <div className="h-label">Activity rings</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12 }}>
          <FitnessRings rings={rings} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {rings.map(r => (
              <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: r.color }} />
                <span style={{ flex: 1, fontSize: 13, color: 'var(--t-fg-2)' }}>{r.label}</span>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{r.val}<span style={{ color: 'var(--t-fg-3)', fontWeight: 400 }}>/{r.goal} {r.unit}</span></span>
              </div>
            ))}
          </div>
        </div>
      </HCard>

      {/* Week strip */}
      <HCard pad="16px" radius={20} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <div className="h-label">This week</div>
          <div style={{ fontSize: 12, color: 'var(--t-fg-2)', fontWeight: 500 }}>4 of 5 days completed</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6 }}>
          {week.map((d, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: '100%', height: 56, borderRadius: 12,
                background: d.today ? 'var(--t-cream)' : d.done ? 'var(--brand-orange-vibey)' : 'var(--t-ink-04)',
                border: d.today ? '2px solid var(--brand-orange-vibey)' : 'none',
                color: d.done ? '#fff' : 'var(--t-fg-2)',
                display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
                padding: '6px 0', position: 'relative',
              }}>
                {d.done && <Glyph name="check" size={16} stroke={2.5} />}
                {d.today && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-orange-vibey)' }}/>}
              </div>
              <div style={{ fontSize: 10, color: 'var(--t-fg-3)', fontWeight: 500 }}>{d.d}</div>
            </div>
          ))}
        </div>
      </HCard>

      <HSectionLabel>Recovery</HSectionLabel>
      <HCard pad="16px" radius={20}>
        <div style={{ display: 'flex', gap: 14 }}>
          <RecoveryRing pct={0.72} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>You're 72% recovered</div>
            <div style={{ fontSize: 13, color: 'var(--t-fg-2)', marginTop: 4, lineHeight: 1.5 }}>HRV 48ms · resting HR 58 bpm. Good day for Zone 2 — skip max effort.</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              <HChip icon="check" tone="cream">Cardio OK</HChip>
              <HChip tone="ghost">Strength: light</HChip>
            </div>
          </div>
        </div>
      </HCard>
    </HScreen>
  );
}

function FitStat({ label, value, unit }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ marginTop: 4, display: 'flex', alignItems: 'baseline', gap: 3 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500 }}>{value}</span>
        <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{unit}</span>
      </div>
    </div>
  );
}

function FitnessRings({ rings }) {
  const size = 120;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {rings.map((r, i) => {
        const radius = 50 - i * 14;
        const stroke = 10;
        const c = 2 * Math.PI * radius;
        const pct = Math.min(1, r.val / r.goal);
        return (
          <React.Fragment key={r.label}>
            <circle cx={size/2} cy={size/2} r={radius} fill="none" stroke={r.color} strokeOpacity={0.15} strokeWidth={stroke} />
            <circle cx={size/2} cy={size/2} r={radius} fill="none" stroke={r.color} strokeWidth={stroke} strokeLinecap="round"
                    strokeDasharray={`${c * pct} ${c}`} transform={`rotate(-90 ${size/2} ${size/2})`} />
          </React.Fragment>
        );
      })}
    </svg>
  );
}

function RecoveryRing({ pct }) {
  const r = 36, c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: 84, height: 84, flexShrink: 0 }}>
      <svg width={84} height={84} viewBox="0 0 84 84">
        <defs>
          <linearGradient id="rec-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#6BD18A"/><stop offset="100%" stopColor="#FDB36B"/>
          </linearGradient>
        </defs>
        <circle cx={42} cy={42} r={r} fill="none" stroke="var(--t-ink-04)" strokeWidth={8}/>
        <circle cx={42} cy={42} r={r} fill="none" stroke="url(#rec-grad)" strokeWidth={8} strokeLinecap="round"
                strokeDasharray={`${c * pct} ${c}`} transform="rotate(-90 42 42)"/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600 }}>{Math.round(pct*100)}</div>
    </div>
  );
}

// ============================================================================
// VOICE
// ============================================================================
function VoiceCallScreen({ onBack }) {
  const [state, setState] = React.useState('listening'); // listening | speaking | idle
  const [seconds, setSeconds] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const mins = String(Math.floor(seconds/60)).padStart(2,'0');
  const secs = String(seconds % 60).padStart(2,'0');

  return (
    <div data-screen-label="06 Voice" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 30%, #2A1B14 0%, #07060B 100%)', color: '#fff', display: 'flex', flexDirection: 'column', paddingTop: 56 }}>
      <div style={{ padding: '20px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.08)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Glyph name="chevD" size={18}/>
        </button>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: 1.2 }}>Live with Anna</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, marginTop: 2 }}>{mins}:{secs}</div>
        </div>
        <div style={{ width: 36 }}/>
      </div>

      {/* Voice orb */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 32 }}>
        <VoiceOrb state={state} />
        <div style={{ textAlign: 'center', maxWidth: 280 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, color: '#fff' }}>
            {state === 'listening' ? "I'm listening…" : state === 'speaking' ? 'So based on your data,' : 'Tap to talk'}
          </div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 6, lineHeight: 1.5 }}>
            {state === 'speaking' ? 'sodium intake spiked yesterday — that may be why your blood pressure is up.' : 'Speak naturally. I can pull up data, set reminders, or just listen.'}
          </div>
        </div>
      </div>

      {/* Transcript */}
      <div style={{ padding: '0 16px', marginBottom: 16 }}>
        <button style={{ width: '100%', padding: '12px 14px', borderRadius: 16, background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.7)', textAlign: 'left', fontSize: 13, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>Show live transcript</span>
          <Glyph name="chevU" size={14}/>
        </button>
      </div>

      {/* Controls */}
      <div style={{ padding: '0 16px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
        <button style={{ width: 56, height: 56, borderRadius: 999, background: 'rgba(255,255,255,0.08)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Glyph name="mic" size={22}/>
        </button>
        <button onClick={() => setState(state === 'speaking' ? 'listening' : 'speaking')} style={{ width: 72, height: 72, borderRadius: 999, background: 'var(--grad-warm-orange)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-orange)' }}>
          {state === 'speaking' ? <Glyph name="minus" size={28} stroke={3}/> : <Glyph name="voice" size={28}/>}
        </button>
        <button onClick={onBack} style={{ width: 56, height: 56, borderRadius: 999, background: 'rgba(255,66,66,0.18)', color: '#FF7676', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Glyph name="close" size={22}/>
        </button>
      </div>
    </div>
  );
}

function VoiceOrb({ state }) {
  return (
    <div style={{ position: 'relative', width: 220, height: 220 }}>
      <div style={{ position: 'absolute', inset: -20, borderRadius: 999, background: 'radial-gradient(circle, rgba(255,179,107,0.25), transparent 70%)', animation: 'pulse-ring 2.6s ease-out infinite' }}/>
      <div style={{ position: 'absolute', inset: 0, borderRadius: 999, background: 'radial-gradient(circle, rgba(255,179,107,0.4), rgba(255,105,66,0.1) 60%, transparent 80%)', animation: 'pulse-soft 2.4s ease-in-out infinite' }}/>
      <div style={{ position: 'absolute', inset: 30, borderRadius: 999, background: 'radial-gradient(circle, rgba(255,105,66,0.6), rgba(255,179,107,0.2) 70%, transparent)', filter: 'blur(8px)', animation: 'pulse-soft 1.8s ease-in-out infinite reverse' }}/>
      <div style={{ position: 'absolute', inset: 60, borderRadius: 999, background: 'linear-gradient(135deg, #FF6942, #FDB36B)', boxShadow: '0 12px 64px rgba(255,105,66,0.6)', animation: 'breathe 2.6s ease-in-out infinite' }}/>
      <div style={{ position: 'absolute', inset: 78, borderRadius: 999, background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%)' }}/>
      {state === 'listening' && (
        <div style={{ position: 'absolute', inset: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
          {[0,1,2,3,4].map(i => (
            <span key={i} style={{ width: 4, borderRadius: 999, background: 'rgba(255,255,255,0.85)', height: 38, transformOrigin: 'center', animation: `voice-wave 1s ease-in-out ${i * 0.12}s infinite` }}/>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { NutritionScreen, FitnessScreen, VoiceCallScreen, FitStat, FitnessRings, RecoveryRing, VoiceOrb });