// health/Tweaks.jsx
// In-design Tweaks panel for the iOS Health tab.
// Toggles: tab bar style (5 vs 4), light/dark global theme override,
// Day vs Week calendar default, bedtime treatment (inset vs full-bleed
// on root). The panel rewrites the EDITMODE-BEGIN block in index.html
// so changes survive reload.

const TWEAK_DEFAULTS_REF = /*EDITMODE-BEGIN*/{
  "tabBarStyle": "5 tabs",
  "themeOverride": "Per artboard",
  "calendarDefault": "Day",
  "bedtimeRoot": "Inset on root, full-bleed on detail"
}/*EDITMODE-END*/;

function OrdentusTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS_REF);
  return (
    <window.TweaksPanel title="Tweaks · iOS Health">
      <window.TweakSection label="Navigation">
        <window.TweakRadio
          label="Tab bar"
          value={t.tabBarStyle}
          options={['5 tabs', '4 tabs (Share in Settings)']}
          onChange={v => setTweak('tabBarStyle', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Theme">
        <window.TweakRadio
          label="Override"
          value={t.themeOverride}
          options={['Per artboard', 'Light', 'Dark']}
          onChange={v => setTweak('themeOverride', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Calendar">
        <window.TweakRadio
          label="Default view"
          value={t.calendarDefault}
          options={['Day', 'Week', 'Month']}
          onChange={v => setTweak('calendarDefault', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Bedtime hero">
        <window.TweakSelect
          label="Treatment"
          value={t.bedtimeRoot}
          options={[
            'Inset on root, full-bleed on detail',
            'Full-bleed on root and detail',
            'Inset on both',
          ]}
          onChange={v => setTweak('bedtimeRoot', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}
window.OrdentusTweaks = OrdentusTweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS_REF;