// Trends screen — 7/30 day history from API
function TrendsScreen({ sessions, apiReachable, onRefresh, onOpenSession }) {
  const [range, setRange] = React.useState(7);
  const nights = sessions.items || [];
  const data = nights.slice(0, range);

  if (sessions.status !== 'ready' || data.length === 0) {
    const reason = sessions.status === 'loading'
      ? 'Loading sessions…'
      : apiReachable === false
        ? 'Backend API unreachable. Session history is stored on Railway — when the backend comes back up, trends will populate automatically.'
        : sessions.status === 'error'
          ? `Could not load sessions: ${sessions.error || 'unknown error'}.`
          : 'No sessions recorded yet. Once the backend classifier finishes a night, it will show up here.';
    return (
      <>
        <div className="page-header">
          <div>
            <div className="page-eyebrow">Trends</div>
            <h1 className="page-title">No history yet</h1>
            <div className="page-subtitle">{reason}</div>
          </div>
          <div className="row gap-8">
            <button className="btn" onClick={onRefresh}>Retry</button>
          </div>
        </div>
        <div className="card" style={{ padding: 32 }}>
          <div className="text-sm text-ink-3" style={{ lineHeight: 1.6 }}>
            Trends need at least one completed session from the backend. The current session (if any) is visible on the <strong>Today</strong> tab.
          </div>
        </div>
      </>
    );
  }

  const avgScore = Math.round(data.reduce((a, b) => a + (b.score || 0), 0) / data.length);
  const avgDur = Math.round(data.reduce((a, b) => a + b.durationMin, 0) / data.length);
  const avgDeep = Math.round(data.reduce((a, b) => a + b.stageMin.deep, 0) / data.length);
  const avgREM = Math.round(data.reduce((a, b) => a + b.stageMin.rem, 0) / data.length);

  const maxScore = 100;

  return (
    <>
      <div className="page-header">
        <div>
          <div className="page-eyebrow">Trends</div>
          <h1 className="page-title">Last {Math.min(range, data.length)} nights</h1>
          <div className="page-subtitle">Averages, patterns, and night-by-night breakdown</div>
        </div>
        <div className="segment">
          <button className={range === 7 ? 'active' : ''} onClick={() => setRange(7)}>7 days</button>
          <button className={range === 30 ? 'active' : ''} onClick={() => setRange(30)}>30 days</button>
        </div>
      </div>

      {/* KPI row */}
      <div className="grid-4" style={{ marginBottom: 16 }}>
        <div className="card"><Metric label="Avg score" value={avgScore} sub={`${data.length} nights`} /></div>
        <div className="card"><Metric label="Avg duration" value={fmtDur(avgDur)} sub="in bed" /></div>
        <div className="card"><Metric label="Avg deep" value={fmtDur(avgDeep)} sub={`${avgDur ? Math.round(avgDeep/avgDur*100) : 0}% of sleep`} /></div>
        <div className="card"><Metric label="Avg REM" value={fmtDur(avgREM)} sub={`${avgDur ? Math.round(avgREM/avgDur*100) : 0}% of sleep`} /></div>
      </div>

      {/* Score bars */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-title">Nightly score</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 180, paddingTop: 20 }}>
          {data.slice().reverse().map((d, i) => {
            const h = ((d.score || 0) / maxScore) * 100;
            const color = (d.score || 0) >= 85 ? 'oklch(0.55 0.15 145)' : (d.score || 0) >= 70 ? 'var(--accent)' : 'oklch(0.65 0.14 50)';
            return (
              <div key={d.id || i} className="col items-center" style={{ flex: 1, gap: 6 }}>
                <span className="text-xs text-ink-3 num">{d.score ?? '—'}</span>
                <div style={{
                  width: '100%', maxWidth: 36,
                  height: `${h}%`,
                  background: color,
                  borderRadius: 6,
                  opacity: 0.9,
                }}/>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
          {data.slice().reverse().map((d, i) => (
            <div key={d.id || i} className="text-xs text-ink-3" style={{ flex: 1, textAlign: 'center' }}>
              {d.dateLabel ? d.dateLabel.split(' ')[0] : ''}
            </div>
          ))}
        </div>
      </div>

      {/* Night list */}
      <div className="card">
        <div className="row justify-between items-center" style={{ marginBottom: 16 }}>
          <div className="card-title" style={{ margin: 0 }}>Night by night</div>
          <button className="btn btn-sm btn-ghost" onClick={onRefresh}><Icon name="download" size={12}/> Refresh</button>
        </div>
        <div className="col gap-8">
          {data.map((n, i) => (
            <div key={n.id || i} className="row items-center gap-16"
              onClick={() => onOpenSession && onOpenSession(n)}
              role="button" tabIndex={0}
              onKeyDown={e => { if ((e.key === 'Enter' || e.key === ' ') && onOpenSession) onOpenSession(n); }}
              style={{
                padding: '12px 16px',
                background: i === 0 ? 'var(--bg-sunken)' : 'transparent',
                borderRadius: 10,
                cursor: onOpenSession ? 'pointer' : 'default',
                transition: 'background 0.12s',
              }}>
              <div style={{ width: 80 }}>
                <div className="text-sm" style={{ fontWeight: 500 }}>{i === 0 ? 'Last night' : n.dateLabel}</div>
                <div className="text-xs text-ink-3">{n.onset} → {n.wake}</div>
              </div>
              <div className="num" style={{ fontSize: 22, fontWeight: 600, width: 50 }}>{n.score ?? '—'}</div>
              <div className="text-sm text-ink-2" style={{ width: 70 }}>{fmtDur(n.asleepMin || 0)}</div>
              <div style={{ flex: 1, display: 'flex', height: 8, borderRadius: 100, overflow: 'hidden', background: 'var(--bg-sunken)' }}>
                {['deep','rem','light','awake'].map(s => {
                  const pct = (n.stageMin[s] / (n.durationMin || 1)) * 100;
                  return <div key={s} style={{ width: `${pct}%`, background: `var(--stage-${s})` }} />;
                })}
              </div>
              <div className="text-xs text-ink-3 num" style={{ width: 70, textAlign: 'right' }}>{n.efficiency || 0}% eff</div>
              <Icon name="chevron-right" size={14} />
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

window.TrendsScreen = TrendsScreen;