// ParameterDetail.jsx — opens when you tap a tile on Today
function ParameterDetail({ param, onBack }) {
  if (!param) return null;
  const series = [[0,.5],[.14,.35],[.28,.55],[.42,.45],[.57,.75],[.71,.7],[.86,.95],[1,.85]];

  return (
    <div style={{ background: M.canvas, minHeight: '100%' }}>
      <div style={{ padding: '4px 16px 12px', borderBottom: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: M.ink, marginLeft: -4, display: 'flex' }}>
          <window.MIcons.ArrowLeft size={22} />
        </button>
        <div style={{ font: `500 16px/1.2 ${M.sans}`, color: M.ink }}>{param.label}</div>
      </div>

      <div style={{ padding: '20px 16px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <DSCard padding={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <MEyebrow>{param.label} · last 7 days</MEyebrow>
            <div style={{ font: `400 11px/1 ${M.mono}`, color: M.inkFaint, fontVariantNumeric: 'tabular-nums' }}>7d</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
            <div style={{ font: `500 36px/1 ${M.sans}`, color: M.ink, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{param.value}</div>
            <div style={{ font: `500 13px/1 ${M.sans}`, color: param.neutral ? M.inkMuted : (param.bad ? M.crisis : M.success) }}>{param.delta}</div>
          </div>
          <div style={{ marginTop: 14 }}>
            <MSparkline points={series} />
          </div>
        </DSCard>

        <DSCard padding={16}>
          <MEyebrow>What's correlated</MEyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 12 }}>
            {[
              { label: 'Late dinner (after 21:00)', strength: 'Strong · 4 of 7 nights' },
              { label: 'Mood the next day',         strength: 'Moderate · −0.6 avg' },
              { label: 'Caffeine after 14:00',      strength: 'Weak · 2 of 7 days' },
            ].map((c, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: i ? 10 : 0, borderTop: i ? `1px solid ${M.ruleSoft}` : 'none' }}>
                <div style={{ font: `400 14px/1.3 ${M.sans}`, color: M.ink }}>{c.label}</div>
                <div style={{ font: `400 11px/1 ${M.mono}`, color: M.inkMuted }}>{c.strength}</div>
              </div>
            ))}
          </div>
        </DSCard>

        <DSCard padding={16}>
          <MEyebrow>Recent entries</MEyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
            {[
              { d: 'Wed 22 Apr', v: '6h 18m' },
              { d: 'Tue 21 Apr', v: '6h 02m' },
              { d: 'Mon 20 Apr', v: '7h 14m' },
              { d: 'Sun 19 Apr', v: '7h 30m' },
            ].map((r, i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '12px 0',
                borderTop: i ? `1px solid ${M.ruleSoft}` : 'none',
              }}>
                <div style={{ font: `400 14px/1 ${M.sans}`, color: M.inkSoft }}>{r.d}</div>
                <div style={{ font: `400 14px/1 ${M.mono}`, color: M.ink, fontVariantNumeric: 'tabular-nums' }}>{r.v}</div>
              </div>
            ))}
          </div>
        </DSCard>

        <DSMedicalDisclaimer />
      </div>
    </div>
  );
}

window.ParameterDetail = ParameterDetail;