// AXIS-2 — Profile graph. Parameter list with a source filter; taps open the
// kit's ParameterDetail.
function ProfileGraphScreen({ onOpenParameter }) {
  const [filter, setFilter] = React.useState('all');
  const params = MData.parameters;
  const FILTERS = [['all', 'All'], ['manual', 'Manual'], ['synced', 'Synced'], ['journal', 'Journal']];
  const shown = filter === 'all' ? params : params.filter((p) => p.source === filter);

  return (
    <div style={{ background: M.canvas, minHeight: '100%', padding: '4px 16px 24px' }}>
      <div style={{ padding: '8px 0 14px' }}>
        <MEyebrow style={{ letterSpacing: '0.1em' }}>Profile graph</MEyebrow>
        <div style={{ font: `500 28px/1.05 ${M.sans}`, letterSpacing: '-0.015em', color: M.ink, marginTop: 8 }}>Your parameters</div>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
        {FILTERS.map(([id, label]) => (
          <button key={id} onClick={() => setFilter(id)} style={{
            border: 'none', cursor: 'pointer', borderRadius: 999, padding: '7px 12px',
            font: `500 12px/1 ${M.sans}`,
            background: filter === id ? M.ink : M.surface,
            color: filter === id ? '#fff' : M.inkSoft,
            boxShadow: filter === id ? 'none' : `inset 0 0 0 1px ${M.rule}`,
          }}>{label}</button>
        ))}
      </div>

      <DSCard padding={0} style={{ overflow: 'hidden' }}>
        {shown.map((p, i) => (
          <div key={p.id} onClick={() => onOpenParameter(p)} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', cursor: 'pointer',
            borderBottom: i === shown.length - 1 ? 'none' : `1px solid ${M.ruleSoft}`,
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: `500 14px/1.2 ${M.sans}`, color: M.ink }}>{p.label}</div>
              <div style={{ font: `400 12px/1 ${M.sans}`, color: M.inkMuted, marginTop: 4 }}>
                last {p.value} · <span style={{ textTransform: 'capitalize' }}>{p.source}</span>
              </div>
            </div>
            <DSSparklineThumb points={p.spark} color={p.bad ? M.crisis : M.axis} width={70} height={26} />
            <div style={{ font: `500 12px/1 ${M.sans}`, color: p.neutral ? M.inkMuted : (p.bad ? M.crisis : M.success), minWidth: 34, textAlign: 'right' }}>{p.delta}</div>
            <window.MIcons.ChevronR size={16} />
          </div>
        ))}
        {!shown.length && <div style={{ padding: '18px 16px', textAlign: 'center', font: `400 13px/1 ${M.sans}`, color: M.inkMuted }}>No {filter} parameters yet.</div>}
      </DSCard>

      <div style={{ marginTop: 16 }}>
        <MSectionTitle>Add parameter</MSectionTitle>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['+ Cycle phase', '+ Caffeine', '+ Steps', '+ Weight'].map((c) => (
            <DSChip key={c}>{c}</DSChip>
          ))}
        </div>
      </div>

      <div style={{ height: 16 }} />
      <DSMedicalDisclaimer />
    </div>
  );
}
window.ProfileGraphScreen = ProfileGraphScreen;