// tweaks-app.jsx — wires the Tweaks panel into the gaming tracker
// Three expressive controls: Vibe (palette), Density (rhythm), Surface (texture).

const VIBES = {
  cyber: {
    label: 'Cyber',
    swatch: ['#00ffaa', '#0d0d10', '#00aaff'],
    vars: {
      '--bg': '#0d0d10',
      '--bg-2': '#161620',
      '--bg-3': '#1f1f2c',
      '--bg-4': '#2a2a35',
      '--border': '#2a2a35',
      '--border-2': '#3a3a48',
      '--text': '#e8e8ec',
      '--text-dim': '#aaaaaa',
      '--text-faint': '#666666',
      '--accent': '#00ffaa',
      '--accent-2': '#00aaff',
    },
  },
  vapor: {
    label: 'Vapor',
    swatch: ['#ff5ec4', '#110a26', '#5dd6ff'],
    vars: {
      '--bg': '#110a26',
      '--bg-2': '#1c1138',
      '--bg-3': '#281a4b',
      '--bg-4': '#352465',
      '--border': '#352465',
      '--border-2': '#4a3585',
      '--text': '#f3eaff',
      '--text-dim': '#b5a4d6',
      '--text-faint': '#7a6b9c',
      '--accent': '#ff5ec4',
      '--accent-2': '#5dd6ff',
    },
  },
  forge: {
    label: 'Forge',
    swatch: ['#ff8b3d', '#14100a', '#ffd54a'],
    vars: {
      '--bg': '#14100a',
      '--bg-2': '#1f1812',
      '--bg-3': '#2a201a',
      '--bg-4': '#3a2c20',
      '--border': '#3a2c20',
      '--border-2': '#503a26',
      '--text': '#f5ebdf',
      '--text-dim': '#c2a98c',
      '--text-faint': '#7c6a4f',
      '--accent': '#ff8b3d',
      '--accent-2': '#ffd54a',
    },
  },
  mono: {
    label: 'Mono',
    swatch: ['#f0f0f0', '#0a0a0a', '#888888'],
    vars: {
      '--bg': '#0a0a0a',
      '--bg-2': '#141414',
      '--bg-3': '#1c1c1c',
      '--bg-4': '#2a2a2a',
      '--border': '#2a2a2a',
      '--border-2': '#3a3a3a',
      '--text': '#f0f0f0',
      '--text-dim': '#9a9a9a',
      '--text-faint': '#5a5a5a',
      '--accent': '#f0f0f0',
      '--accent-2': '#888888',
    },
  },
};

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tweaks to the live DOM
  React.useEffect(() => {
    const v = VIBES[t.vibe] || VIBES.cyber;
    const r = document.documentElement;
    Object.entries(v.vars).forEach(([k, val]) => r.style.setProperty(k, val));
  }, [t.vibe]);

  React.useEffect(() => {
    document.body.dataset.density = t.density || 'regular';
  }, [t.density]);

  React.useEffect(() => {
    document.body.dataset.bg = t.bgPattern || 'grid';
  }, [t.bgPattern]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Vibe" />
      <TweakColor
        label="Palette"
        value={(VIBES[t.vibe] || VIBES.cyber).swatch}
        options={Object.values(VIBES).map(v => v.swatch)}
        onChange={(arr) => {
          // map swatch back to vibe key
          const key = Object.entries(VIBES).find(([, v]) => v.swatch.join() === arr.join())?.[0] || 'cyber';
          setTweak('vibe', key);
        }}
      />
      <TweakSection label="Rhythm" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'spacious']}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakSection label="Surface" />
      <TweakSelect
        label="Background"
        value={t.bgPattern}
        options={['grid', 'dots', 'scanlines', 'none']}
        onChange={(v) => setTweak('bgPattern', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-mount')).render(<App />);