// shared/tweaks.jsx — wraps the starter <TweaksPanel> with WhitenApp-specific controls.
// Persists tweak state to localStorage so theming survives page navigation.

const TWEAK_STORAGE = 'whitenapp.tweaks';

function applyTweaks(t) {
  const html = document.documentElement;
  html.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  html.setAttribute('data-palette', t.palette || 'warm');
  html.setAttribute('data-density', t.density || 'regular');
  html.setAttribute('data-motion', String(t.motion ?? 1));
  html.setAttribute('data-type', t.typePair || 'geist-serif');
  try { localStorage.setItem(TWEAK_STORAGE, JSON.stringify(t)); } catch (e) {}
}

function useWhitenTweaks() {
  // start from defaults shipped with the page, then layer in localStorage so
  // tweaks persist across page nav
  const initial = React.useMemo(() => {
    let stored = {};
    try { stored = JSON.parse(localStorage.getItem(TWEAK_STORAGE) || '{}'); } catch (e) {}
    return { ...(window.TWEAK_DEFAULTS || {}), ...stored };
  }, []);
  const [t, setT] = useTweaks(initial);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return [t, setT];
}

function WhitenTweaks({ t, setTweak, showHeroPicker = true }) {
  const typeOptions = ["geist-serif", "geist-only", "mono-mix"];
  return (
    <TweaksPanel title="Tweaks">
      {showHeroPicker && (
        <>
          <TweakSection label="Hero layout" />
          <TweakRadio
            label="Variant"
            value={t.hero}
            options={["editorial", "mesh", "terminal"]}
            onChange={(v) => setTweak('hero', v)}
          />
        </>
      )}

      <TweakSection label="Palette" />
      <TweakColor
        label="Theme"
        value={t.palette}
        options={[
          ['#F4F1EA', '#FF4B12', '#2D5F5A'],   // warm (default)
          ['#EEF0F2', '#FF4B12', '#1F4F7A'],   // slate
          ['#F4F1EA', '#2D5F5A', '#FF4B12'],   // forest
          ['#F4F1EA', '#15130F', '#57534E']    // mono
        ]}
        onChange={(palette) => {
          const map = { 0: 'warm', 1: 'slate', 2: 'forest', 3: 'mono' };
          // TweakColor returns the array; find its index
          const opts = [
            ['#F4F1EA', '#FF4B12', '#2D5F5A'],
            ['#EEF0F2', '#FF4B12', '#1F4F7A'],
            ['#F4F1EA', '#2D5F5A', '#FF4B12'],
            ['#F4F1EA', '#15130F', '#57534E']
          ];
          const idx = opts.findIndex(p => p[0] === palette[0] && p[1] === palette[1] && p[2] === palette[2]);
          setTweak('palette', map[idx] || 'warm');
        }}
      />
      <TweakToggle label="Dark mode" value={!!t.dark} onChange={(v) => setTweak('dark', v)} />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Pairing"
        value={t.typePair}
        options={[
          { value: "geist-serif", label: "Geist + Instrument Serif" },
          { value: "geist-only",  label: "Geist (sans only)" },
          { value: "mono-mix",    label: "Geist + Mono accents" }
        ]}
        onChange={(v) => setTweak('typePair', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={["compact", "regular", "comfy"]}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={String(t.motion)}
        options={["0", "1", "2"]}
        onChange={(v) => setTweak('motion', Number(v))}
      />
    </TweaksPanel>
  );
}

// helper: read tweaks on non-home pages (no panel exposed everywhere, just home)
function readPersistedTweaks() {
  try { return JSON.parse(localStorage.getItem(TWEAK_STORAGE) || '{}'); } catch (e) { return {}; }
}

Object.assign(window, { useWhitenTweaks, WhitenTweaks, applyTweaks, readPersistedTweaks });