// screen-history.jsx — Weekly review + 7-day logs

function ScreenHistory({ user }) {
  const review = MOCK.WEEKLY[user];
  const logs = MOCK.LOGS[user];
  const profile = MOCK.PROFILES[user];

  // logs sorted newest first; we want oldest-first for trend
  const trend = [...logs].slice(0, 7).reverse();

  const fmtDelta = (n, unit) => {
    if (n == null) return '—';
    const sign = n > 0 ? '+' : '';
    return `${sign}${n.toFixed(1)}${unit}`;
  };
  const fmtRpe = (n) => n == null ? '—' : n.toFixed(1);

  return (
    <div className="scr">
      <div style={{ padding: '24px 22px 8px' }}>
        <Eyebrow>Week ending {new Date(review.week_ending).toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}</Eyebrow>
        <div className="h-display" style={{ marginTop: 4 }}>
          The <em>week</em> in review.
        </div>
      </div>

      {/* Top win / amplify / dial-back — editorial */}
      <div style={{ padding: '14px 16px 0' }}>
        <NarrativeCard tone="green" eyebrow="Top win" body={review.top_win} />
        <NarrativeCard tone="ink"   eyebrow="Amplify" body={review.amplify} />
        <NarrativeCard tone="amber" eyebrow="Dial back" body={review.dial_back} />
      </div>

      {/* Signals grid */}
      <div style={{ padding: '18px 16px 0' }}>
        <Eyebrow style={{ marginBottom: 8, paddingLeft: 4 }}>Signals</Eyebrow>
        <Card>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, rowGap: 18 }}>
            <Stat label="Adherence"
              value={<>{Math.round(review.adherence_pct * 100)}<span style={{ fontSize: 14, color: 'var(--ink-3)' }}>%</span></>}
              sub={`${review.signals.sessions_completed}/${review.signals.sessions_scheduled} sessions`} />
            <Stat label="Avg RPE"
              value={fmtRpe(review.avg_rpe)}
              sub={<RpeTrend trend={review.signals.rpe_trend} />} />
            <Stat label="Body weight"
              value={fmtDelta(review.weight_delta_kg, 'kg')}
              sub="vs. last week"
              accent={review.weight_delta_kg < 0 ? 'var(--green)' : review.weight_delta_kg > 0 && profile.goals.primary === 'fat_loss' ? 'var(--amber)' : 'var(--ink)'} />
            <Stat label="Waist"
              value={fmtDelta(review.waist_delta_cm, 'cm')}
              sub="vs. last week"
              accent={review.waist_delta_cm < 0 ? 'var(--green)' : 'var(--ink)'} />
          </div>
        </Card>
      </div>

      {/* 7-day recovery trend */}
      <div style={{ padding: '18px 16px 0' }}>
        <Card>
          <div className="row between" style={{ marginBottom: 12 }}>
            <Eyebrow>Recovery · 7 days</Eyebrow>
            <div className="t-small">
              <Band band={trend[trend.length - 1]?.computed?.recovery_band} label={trend[trend.length - 1]?.computed?.recovery_band || 'idle'} />
            </div>
          </div>
          <BandTrend logs={trend} />
          <div className="row between" style={{ marginTop: 8 }}>
            {trend.map((l, i) => (
              <div key={i} className="t-small" style={{
                flex: 1, textAlign: 'center', fontSize: 10.5,
                color: 'var(--ink-3)', letterSpacing: '0.04em', textTransform: 'uppercase',
              }}>
                {new Date(l.date).toLocaleDateString('en-US', { weekday: 'narrow' })}
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Daily logs */}
      <div style={{ padding: '20px 16px 120px' }}>
        <div className="row between baseline" style={{ marginBottom: 10 }}>
          <div className="h-section">Daily log</div>
          <div className="t-small">Last {logs.length} days</div>
        </div>
        <Card flush>
          {logs.map((l, i) => (
            <DailyLogRow key={i} log={l} last={i === logs.length - 1} hasCycle={!!profile.female_health} />
          ))}
        </Card>
      </div>
    </div>
  );
}

function NarrativeCard({ icon, eyebrow, body, tone }) {
  const accent = tone === 'green' ? 'var(--green)'
              : tone === 'amber' ? 'var(--amber)'
              : tone === 'red'   ? 'var(--red)'
              : 'var(--ink-2)';
  return (
    <Card>
      <div className="row gap-10 mb-12" style={{ alignItems: 'center' }}>
        <span style={{ width: 8, height: 8, background: accent, flexShrink: 0 }} />
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 10, color: accent,
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>{eyebrow}</span>
      </div>
      <div style={{
        fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.3,
        color: 'var(--ink)', textWrap: 'pretty',
        fontVariationSettings: "'opsz' 24",
        letterSpacing: '-0.015em',
      }}>
        {body}
      </div>
    </Card>
  );
}

function RpeTrend({ trend }) {
  const map = {
    rising: { c: 'var(--ink-2)', a: '↗', l: 'Rising' },
    falling:{ c: 'var(--ink-2)', a: '↘', l: 'Falling' },
    flat:   { c: 'var(--ink-3)', a: '→', l: 'Flat' },
  };
  const v = map[trend] || map.flat;
  return <span style={{ color: v.c }}>{v.a} {v.l}</span>;
}

function DailyLogRow({ log, last, hasCycle }) {
  const date = new Date(log.date);
  const dateStr = date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
  const sessLabel = SESSION_LABELS[log.today_session?.session_type] || log.today_session?.session_type;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '14px 18px',
      borderBottom: last ? '0' : '0.5px solid var(--line-2)',
    }}>
      <div className="grow col gap-4" style={{ minWidth: 0 }}>
        <div className="row gap-8" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{dateStr}</div>
          <Band band={log.computed?.recovery_band} label={log.computed?.recovery_band} />
          {log.computed?.session_override && (
            <span className="t-mono" style={{ fontSize: 10, color: 'var(--amber)' }}>{log.computed.session_override}</span>
          )}
        </div>
        <div className="t-small">
          {sessLabel} · {log.today_session?.estimated_minutes}min · sleep {log.checkin.sleep_hours}h
          {log.wearable?.hrv_ms && <> · HRV {log.wearable.hrv_ms}</>}
          {hasCycle && log.computed?.cycle_phase && <> · {log.computed.cycle_phase}</>}
        </div>
      </div>
      <div className="t-num" style={{
        fontSize: 22, lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.02em',
        minWidth: 38, textAlign: 'right',
      }}>
        {Math.round((log.computed?.recovery_score || 0) * 100)}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenHistory });