// Tweaks panel for The Cookie Jar
// Persisted to localStorage so all pages can read it.

const { useEffect } = React;

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Sync to localStorage so other pages can read it
  useEffect(() => {
    localStorage.setItem('cookiejar-tweaks', JSON.stringify(t));
    document.body.dataset.palette = t.palette;
    document.body.dataset.density = t.density;
    document.body.dataset.font = t.font;
    if (!t.showCursor) {
      document.querySelectorAll('.cursor-dot, .cursor-ring').forEach(el => el.style.display = 'none');
    } else {
      document.querySelectorAll('.cursor-dot, .cursor-ring').forEach(el => el.style.display = '');
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          label="Color way"
          value={(() => {
            const map = { default: 0, ink: 1, sage: 2 };
            const palettes = [
              ['#F1E7D3', '#1A140E', '#B7472A'],
              ['#14110D', '#F0E6D2', '#E07A5F'],
              ['#E9E5D6', '#1A140E', '#5C7A4A'],
            ];
            return palettes[map[t.palette] ?? 0];
          })()}
          onChange={(arr) => {
            const key = arr[0] === '#14110D' ? 'ink' : arr[0] === '#E9E5D6' ? 'sage' : 'default';
            setTweak('palette', key);
          }}
          options={[
            ['#F1E7D3', '#1A140E', '#B7472A'],
            ['#14110D', '#F0E6D2', '#E07A5F'],
            ['#E9E5D6', '#1A140E', '#5C7A4A'],
          ]}
        />
      </TweakSection>

      <TweakSection title="Type">
        <TweakRadio
          label="Display font"
          value={t.font}
          onChange={(v) => setTweak('font', v)}
          options={[
            { value: 'instrument', label: 'Instrument' },
            { value: 'serif', label: 'DM Serif' },
            { value: 'garamond', label: 'Garamond' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Density">
        <TweakRadio
          label="Spacing"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'cozy', label: 'Cozy' },
            { value: 'normal', label: 'Normal' },
            { value: 'dense', label: 'Dense' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Effects">
        <TweakToggle
          label="Custom cursor"
          value={t.showCursor}
          onChange={(v) => setTweak('showCursor', v)}
        />
        <TweakToggle
          label="Paper texture"
          value={t.showTexture}
          onChange={(v) => setTweak('showTexture', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.body.appendChild(document.createElement('div')))
  .render(<TweaksApp />);

// listen for showTexture toggle
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
function syncTexture() {
  try {
    const t = JSON.parse(localStorage.getItem('cookiejar-tweaks') || '{}');
    styleEl.textContent = (t.showTexture === false)
      ? 'body::before { display: none !important; }'
      : '';
  } catch(e) {}
}
syncTexture();
setInterval(syncTexture, 500);