// A single system's screen — opened from its tab slot. Hero widget + recent
// activity + an insight. Works for the personal system and prebuilt systems.
function SystemView({ system, onOpenChat }) {
  if (!system) return null;
  const recent = {
    journal:    [['Yesterday 22:10', '280 words'], ['Tue 21:40', '120 words'], ['Mon 08:05', '60 words']],
    routine:    [['Today 08:05', '5 / 5 steps'], ['Yesterday', '4 / 5 steps'], ['Tue', '5 / 5 steps']],
    goal:       [['Today', '6,800 steps'], ['Yesterday', '9,240 steps'], ['Tue', '7,510 steps']],
    cycle:      [['Today', 'Ovulatory · day 14'], ['Yesterday', 'Day 13'], ['Mon', 'Day 11']],
    experiment: [['Today', 'Magnesium · sleep 7h20m'], ['Yesterday', 'None · sleep 6h40m'], ['Tue', 'Magnesium · 7h05m']],
  }[system.face] || [['Today', 'Logged'], ['Yesterday', 'Logged']];

  return (
    <div style={{ background: M.canvas, minHeight: '100%', padding: '4px 16px 24px' }}>
      <div style={{ padding: '8px 0 14px' }}>
        <window.MEyebrow style={{ letterSpacing: '0.1em' }}>{system.kind === 'personal' ? 'Personal system' : 'Prebuilt system'}</window.MEyebrow>
        <div style={{ font: `500 28px/1.05 ${M.sans}`, letterSpacing: '-0.015em', color: M.ink, marginTop: 8 }}>{system.name}</div>
      </div>

      <div style={{ marginBottom: 16 }}>
        <window.DSSystemWidget face={system.face || 'experiment'} state="default" onTap={onOpenChat} onOpen={onOpenChat} onCta={onOpenChat} />
      </div>

      <window.MSectionTitle>Recent activity</window.MSectionTitle>
      <DSCard padding={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {recent.map((r, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '13px 16px', borderBottom: i === recent.length - 1 ? 'none' : `1px solid ${M.ruleSoft}` }}>
            <div style={{ font: `400 13px/1 ${M.sans}`, color: M.inkSoft }}>{r[0]}</div>
            <div style={{ font: `500 13px/1 ${M.sans}`, color: M.ink }}>{r[1]}</div>
          </div>
        ))}
      </DSCard>

      <DSCard padding={16}>
        <window.MEyebrow>Axis insight</window.MEyebrow>
        <div style={{ font: `400 14px/1.5 ${M.sans}`, color: M.ink, marginTop: 8 }}>
          This system is settling into your routine. Keep logging for a few more days and I'll surface what moves with it.
        </div>
        <div style={{ marginTop: 12 }}><DSButton size="sm" variant="secondary" onClick={onOpenChat}>Ask Axis about this</DSButton></div>
      </DSCard>
    </div>
  );
}
window.SystemView = SystemView;