// Avakata — Tweaks panel
// Kitchen-sink design controls: typography, accent, grain, density, hero style, shade.

const AVAKATA_TWEAK_BASE = /*EDITMODE-BEGIN*/{
  "accent": "lime",
  "fontset": "default",
  "density": "regular",
  "bg": "ink",
  "motion": "lively",
  "grain": "on",
  "hero": "mesh"
}/*EDITMODE-END*/;

// Merge in any locally-persisted values so a refresh preserves choices
let AVAKATA_TWEAK_DEFAULTS = AVAKATA_TWEAK_BASE;
try {
  const stored = JSON.parse(localStorage.getItem('avakata:tweaks') || 'null');
  if (stored && typeof stored === 'object') {
    AVAKATA_TWEAK_DEFAULTS = { ...AVAKATA_TWEAK_BASE, ...stored };
  }
} catch (e) { /* ignore */ }

function applyTweaks(t) {
  const html = document.documentElement;
  html.setAttribute('data-accent', t.accent);
  html.setAttribute('data-fontset', t.fontset);
  html.setAttribute('data-density', t.density);
  html.setAttribute('data-bg', t.bg);
  html.setAttribute('data-motion', t.motion);
  html.setAttribute('data-grain', t.grain);
  html.setAttribute('data-hero', t.hero);

  // Hero mode swap
  const hero = document.querySelector('.hero');
  if (hero) hero.setAttribute('data-hero-mode', t.hero);
}

function AvakataTweaks() {
  const [t, setTweak] = useTweaks(AVAKATA_TWEAK_DEFAULTS);
  // Non-colour tweaks (font, density, motion…) no longer stop the colour rotation.
  const pin = (k, v) => { setTweak(k, v); };
  // A manual colour pick stamps a timestamp; live.js pauses rotation ~90s, then resumes.
  const pinColor = (k, v) => { try { localStorage.setItem('avakata:colortouch', String(Date.now())); } catch (e) {} setTweak(k, v); };

  React.useEffect(() => {
    applyTweaks(t);
    try { localStorage.setItem('avakata:tweaks', JSON.stringify(t)); } catch (e) {}
  }, [t.accent, t.fontset, t.density, t.bg, t.motion, t.grain, t.hero]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          { value: 'lime',   swatch: '#c4ff3d' },
          { value: 'cyan',   swatch: '#3dd9ff' },
          { value: 'orange', swatch: '#ff6b3d' },
          { value: 'amber',  swatch: '#ffd23d' },
        ].map(o => o.swatch)}
        onChange={(v) => {
          const map = { '#c4ff3d': 'lime', '#3dd9ff': 'cyan', '#ff6b3d': 'orange', '#ffd23d': 'amber' };
          pinColor('accent', map[v] || 'lime');
        }}
      />
      <TweakSection label="Background" />
      <TweakSelect
        label="Palette"
        value={t.bg}
        options={[
          { value: 'ink',      label: 'Ink · near-black' },
          { value: 'darker',   label: 'Void · darker' },
          { value: 'slate',    label: 'Slate · cool gray' },
          { value: 'midnight', label: 'Midnight · deep blue' },
          { value: 'indigo',   label: 'Indigo · violet-blue' },
          { value: 'ocean',    label: 'Ocean · deep teal' },
          { value: 'forest',   label: 'Forest · deep green' },
          { value: 'moss',     label: 'Moss · warm green' },
          { value: 'plum',     label: 'Plum · deep purple' },
          { value: 'wine',     label: 'Wine · deep red' },
          { value: 'ember',    label: 'Ember · warm brown' },
          { value: 'aurora',   label: 'Aurora · lime/cyan glow ◆' },
          { value: 'nebula',   label: 'Nebula · violet glow ◆' },
          { value: 'dusk',     label: 'Dusk · orange/plum glow ◆' },
          { value: 'abyss',    label: 'Abyss · blue depth ◆' },
        ]}
        onChange={(v) => pinColor('bg', v)}
      />
      <TweakRadio
        label="Grain"
        value={t.grain}
        options={['on', 'off']}
        onChange={(v) => pin('grain', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={t.motion}
        options={['calm', 'lively', 'max']}
        onChange={(v) => pin('motion', v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Type set"
        value={t.fontset}
        options={[
          { value: 'default',  label: 'Instrument Serif + Space Grotesk' },
          { value: 'fraunces', label: 'Fraunces + Space Grotesk' },
          { value: 'geist',    label: 'Fraunces + Geist' },
        ]}
        onChange={(v) => pin('fontset', v)}
      />

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

      <TweakSection label="Hero" />
      <TweakRadio
        label="Style"
        value={t.hero}
        options={['mesh', 'orb', 'chroma', 'sonar', 'ripple']}
        onChange={(v) => pin('hero', v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const mountEl = document.getElementById('tweaks-root');
  if (!mountEl) return;
  // Apply persisted state immediately so first paint matches
  applyTweaks(AVAKATA_TWEAK_DEFAULTS);
  const root = ReactDOM.createRoot(mountEl);
  root.render(<AvakataTweaks />);
})();