// Today screen — morning review. Consumes finished session from API or in-progress session from MQTT.
function TodayScreen({ lastNight, todayInProgress, apiReachable, broker }) {
  const night = lastNight.status === 'ready' ? lastNight.data : todayInProgress;
  const inProgress = night && night.inProgress;

  if (!night) {
    const reason = broker !== 'connected'
      ? `Waiting for MQTT broker (${broker}).`
      : apiReachable === false
        ? 'Backend API unreachable — no completed sessions available.'
        : lastNight.status === 'loading'
          ? 'Loading last session…'
          : 'No completed session yet. Once you get into bed and the classifier runs, live epochs will populate this view.';
    return (
      <>
        <div className="page-header">
          <div>
            <div className="page-eyebrow">Today</div>
            <h1 className="page-title">No session yet</h1>
            <div className="page-subtitle">{reason}</div>
          </div>
        </div>
        <div className="card" style={{ padding: 32 }}>
          <div className="text-sm text-ink-3" style={{ lineHeight: 1.6 }}>
            This screen shows last night&apos;s sleep summary once the backend classifier (Railway) produces one, or the current
            in-progress session while you&apos;re in bed. Live vitals are visible on the <strong>Live</strong> tab.
          </div>
        </div>
      </>
    );
  }

  const onset = night.onset;
  const wake = night.wake;
  const stageMin = night.stageMin;
  const asleep = night.asleepMin || (stageMin.light + stageMin.deep + stageMin.rem);
  const totalForPct = asleep || night.durationMin || 1;

  const stageBreakdown = [
    { key: 'deep', label: 'Deep', min: stageMin.deep, pct: Math.round(stageMin.deep / totalForPct * 100) },
    { key: 'rem', label: 'REM', min: stageMin.rem, pct: Math.round(stageMin.rem / totalForPct * 100) },
    { key: 'light', label: 'Light', min: stageMin.light, pct: Math.round(stageMin.light / totalForPct * 100) },
    { key: 'awake', label: 'Awake', min: stageMin.awake, pct: Math.round(stageMin.awake / (night.durationMin || 1) * 100) },
  ];

  const insight = (() => {
    if (inProgress) return 'Session in progress — numbers will sharpen as more epochs arrive.';
    if (!asleep) return 'Not enough classified sleep yet for an insight.';
    const deepPct = stageMin.deep / asleep;
    if (deepPct > 0.22) return 'Strong deep sleep tonight — your body did real recovery work.';
    if (night.efficiency > 90) return 'Very efficient night — almost no time awake once you were down.';
    if (night.awakenings > 4) return `You stirred ${night.awakenings} times. Consider room temp or light levels.`;
    return 'A solid, unremarkable night. Baseline recovery.';
  })();

  return (
    <>
      <div className="page-header">
        <div>
          <div className="page-eyebrow">{inProgress ? 'In progress' : `Morning of ${night.dateLabel}`}</div>
          <h1 className="page-title">{inProgress ? 'Session in progress' : 'How you slept last night'}</h1>
          <div className="page-subtitle">{onset} → {wake} · {fmtDur(night.durationMin)} {inProgress ? 'so far' : 'in bed'}</div>
        </div>
        <div className="row gap-8">
          {!inProgress && <button className="btn"><Icon name="download" size={14}/> Export</button>}
          <button className="btn btn-ghost" disabled={apiReachable === false}>
            <Icon name="calendar" size={14}/> {apiReachable === false ? 'History offline' : 'Change night'}
          </button>
        </div>
      </div>

      {/* Hero: score + headline metrics */}
      <div className="card" style={{ padding: 32, marginBottom: 16 }}>
        <div className="row gap-32 items-center" style={{ flexWrap: 'wrap' }}>
          {night.score != null
            ? <ScoreRing score={night.score} size={180} />
            : <div style={{ width: 180, height: 180 }} className="col items-center justify-center">
                <div className="text-xs text-ink-3">SCORE</div>
                <div className="num" style={{ fontSize: 44, color: 'var(--ink-3)' }}>—</div>
                <div className="text-xs text-ink-3">pending epochs</div>
              </div>
          }
          <div className="flex-1 col gap-24" style={{ minWidth: 280 }}>
            <div className="grid-2" style={{ gap: 24 }}>
              <Metric label="Time asleep" value={fmtDur(asleep || 0)} sub={`${night.efficiency || 0}% efficiency`} />
              <Metric label="Resting HR" value={night.lowHR != null ? night.lowHR : '—'} unit="bpm" sub={night.avgHR != null ? `avg ${night.avgHR}` : 'awaiting vitals'} />
              <Metric label="Breathing" value={night.avgBR != null ? night.avgBR : '—'} unit="rpm" sub={night.avgBR != null ? 'live' : 'awaiting vitals'} />
              <Metric label="HRV" value={night.hrv != null ? +night.hrv.toFixed(1) : '—'} unit="ms" sub={night.hrv != null ? 'from classifier' : 'awaiting epoch'} />
            </div>
            <div style={{
              padding: '14px 16px',
              background: 'var(--accent-soft)',
              borderRadius: 10,
              fontSize: 14,
              color: 'var(--accent-ink)',
              lineHeight: 1.5
            }}>
              {insight}
            </div>
          </div>
        </div>
      </div>

      {/* Hypnogram */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="row justify-between items-center" style={{ marginBottom: 20 }}>
          <div>
            <div className="card-title" style={{ margin: 0 }}>Sleep stages</div>
            <div className="text-xs text-ink-3" style={{ marginTop: 4 }}>
              {night.awakenings != null ? `${night.awakenings} awakenings` : 'awakenings tbd'}
            </div>
          </div>
          <div className="row gap-12 text-xs">
            {[{k:'awake',l:'Awake'},{k:'rem',l:'REM'},{k:'light',l:'Light'},{k:'deep',l:'Deep'}].map(s => (
              <span key={s.k} className={`stage-chip stage-${s.k}`}>
                <span className="stage-dot" />{s.l}
              </span>
            ))}
          </div>
        </div>
        <div style={{ paddingLeft: 44 }}>
          <Hypnogram data={night.hypnogram} durationMin={night.durationMin}
            onsetLabel={onset} wakeLabel={wake} height={160} />
        </div>
        <div className="row" style={{ marginTop: 24, height: 8, borderRadius: 100, overflow: 'hidden', background: 'var(--bg-sunken)' }}>
          {stageBreakdown.map(s => (
            <div key={s.key} style={{ width: `${s.pct || 0}%`, background: `var(--stage-${s.key})` }} title={`${s.label} ${s.pct}%`} />
          ))}
        </div>
        <div className="grid-4" style={{ marginTop: 20 }}>
          {stageBreakdown.map(s => (
            <div key={s.key} className="col gap-4">
              <div className="row items-center gap-8">
                <span className={`stage-dot dot-${s.key}`} style={{ width: 8, height: 8, borderRadius: 50 }} />
                <span className="text-xs text-ink-3" style={{ textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{s.label}</span>
              </div>
              <div className="row items-baseline gap-4">
                <span className="num" style={{ fontSize: 22, fontWeight: 600 }}>{fmtDur(s.min || 0)}</span>
                <span className="text-xs text-ink-3">{s.pct || 0}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Vitals detail */}
      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card-title">Heart rate {inProgress ? 'this session' : 'through the night'}</div>
          <div className="row items-baseline gap-8" style={{ marginBottom: 12 }}>
            <span className="num" style={{ fontSize: 26, fontWeight: 600 }}>{night.avgHR != null ? night.avgHR : '—'}</span>
            <span className="text-sm text-ink-3">avg bpm</span>
            {night.vitals.hr.length > 0 && (
              <span className="text-xs text-ink-3" style={{ marginLeft: 'auto' }}>
                low {night.lowHR} · high {Math.round(Math.max(...night.vitals.hr))}
              </span>
            )}
          </div>
          <div style={{ color: 'var(--hr-color)', minHeight: 80 }}>
            {night.vitals.hr.length
              ? <Sparkline data={night.vitals.hr} height={80} color="currentColor" fill />
              : <div className="text-xs text-ink-3" style={{ padding: '28px 0', textAlign: 'center' }}>No vitals trace available</div>}
          </div>
        </div>
        <div className="card">
          <div className="card-title">Breathing rate</div>
          <div className="row items-baseline gap-8" style={{ marginBottom: 12 }}>
            <span className="num" style={{ fontSize: 26, fontWeight: 600 }}>{night.avgBR != null ? night.avgBR : '—'}</span>
            <span className="text-sm text-ink-3">avg rpm</span>
          </div>
          <div style={{ color: 'var(--br-color)', minHeight: 80 }}>
            {night.vitals.br.length
              ? <Sparkline data={night.vitals.br} height={80} color="currentColor" fill />
              : <div className="text-xs text-ink-3" style={{ padding: '28px 0', textAlign: 'center' }}>No vitals trace available</div>}
          </div>
        </div>
      </div>

      {/* Environment + restlessness */}
      <div className="grid-3">
        <div className="card-flat">
          <div className="card-title" style={{ marginBottom: 8 }}>Room</div>
          <div className="row gap-16">
            <Metric label="Lux" value={night.roomLux != null ? night.roomLux : '—'} sub={night.roomLux != null && night.roomLux < 10 ? 'dim' : '—'} />
            <Metric label="Temp" value={night.roomTemp != null ? night.roomTemp : '—'} unit="°C" sub={night.roomTemp != null ? '' : 'not reported'} />
          </div>
        </div>
        <div className="card-flat">
          <div className="card-title" style={{ marginBottom: 8 }}>Movement</div>
          <Metric label="Restlessness" value={night.restlessness != null ? night.restlessness : '—'} unit="idx" sub={night.restlessness != null ? '' : 'awaiting epochs'} />
        </div>
        <div className="card-flat">
          <div className="card-title" style={{ marginBottom: 8 }}>Consistency</div>
          <Metric label="Bedtime vs. avg" value="—" unit="min" sub="needs 7+ nights of history" />
        </div>
      </div>
    </>
  );
}

window.TodayScreen = TodayScreen;