// You → Systems. Manage active systems + their settings, see capacity, build a
// new one. (Distinct from the tab slots, which open each system's own screen.)
function SystemsManageScreen({ onBack, personal, prebuilts, onBuild, onReset }) {
  const [settings, setSettings] = React.useState(null);
  const active = [
    ...(personal ? [{ ...personal, kind: 'personal', slot: 'Slot 1 · Personal' }] : []),
    ...prebuilts.map((p, i) => ({ ...p, kind: 'prebuilt', slot: `Slot ${[2, 4, 5][i] || '–'} · Prebuilt` })),
  ];
  const CAP = 4;
  const pct = Math.round((active.length / CAP) * 100);

  return (
    <div style={{ background: M.canvas, minHeight: '100%' }}>
      <window.DSAreaHeader title="Systems" onBack={onBack} />
      <div style={{ padding: '8px 16px 24px' }}>
        <DSCard padding={16} style={{ marginBottom: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div style={{ font: `500 14px/1 ${M.sans}`, color: M.ink }}>Tab slots in use</div>
            <div style={{ font: `500 13px/1 ${M.mono}`, color: M.inkMuted }}>{active.length} / {CAP}</div>
          </div>
          <div style={{ height: 8, background: M.surfaceAlt, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: pct + '%', background: M.axis, borderRadius: 999 }} />
          </div>
          <div style={{ font: `400 12.5px/1.5 ${M.sans}`, color: M.inkMuted, marginTop: 8 }}>
            One personal system plus up to three prebuilt systems live in your tab bar. Axis gifts prebuilts weekly through your Today recap.
          </div>
        </DSCard>

        <window.DSHubGroup title="Active systems">
          {active.length ? active.map((s, i) => (
            <window.DSHubRow key={s.id || i} icon={s.face === 'journal' ? 'recap' : s.face === 'routine' ? 'recap' : s.face === 'goal' ? 'activity' : 'sparkle'}
              label={s.name} sublabel={s.slot} value="Settings" onClick={() => setSettings(s)} isLast={i === active.length - 1} />
          )) : (
            <div style={{ padding: '16px', font: `400 13px/1.5 ${M.sans}`, color: M.inkMuted }}>No systems yet. Build your personal system to fill the first slot.</div>
          )}
        </window.DSHubGroup>

        <DSButton full onClick={onBuild}>+ Build a new system with Axis</DSButton>
        <div style={{ height: 10 }} />
        <DSButton full variant="ghost" onClick={onReset}>Reset demo progress</DSButton>
      </div>

      <window.DSBottomSheet isOpen={!!settings} onClose={() => setSettings(null)} title={settings ? settings.name : ''}>
        {settings && (
          <div style={{ padding: '4px 0 8px' }}>
            <window.DSHubToggleRow icon="bell" label="Notifications" sublabel="Reminders for this system" defaultOn />
            <window.DSHubToggleRow icon="today" label="Show widget on Today" defaultOn />
            <window.DSHubRow icon="settings" label="Tab slot" value={settings.slot} />
            <window.DSHubRow icon="trash" label="Remove system" danger action isLast onClick={() => setSettings(null)} />
          </div>
        )}
      </window.DSBottomSheet>
    </div>
  );
}
window.SystemsManageScreen = SystemsManageScreen;