/* global React, ReactDOM, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect, TweakToggle, useTweaks */

const PALETTES = {
  berry:    { name:"Berry",    bg:"#fdf6f1", ink:"#1a0f1f", muted:"#6b5566", accent:"#d6336c", a2:"#f59f00", a3:"#2f9e44", a4:"#4263eb" },
  citrus:   { name:"Citrus",   bg:"#fffaf0", ink:"#1f1a0c", muted:"#6b5e3c", accent:"#f08c00", a2:"#d6336c", a3:"#2f9e44", a4:"#4263eb" },
  forest:   { name:"Forest",   bg:"#f4f8f1", ink:"#0c1f12", muted:"#4f6650", accent:"#2f9e44", a2:"#f08c00", a3:"#d6336c", a4:"#4263eb" },
  ocean:    { name:"Ocean",    bg:"#f1f5fd", ink:"#0c1530", muted:"#4d5b80", accent:"#4263eb", a2:"#d6336c", a3:"#f08c00", a4:"#2f9e44" },
  midnight: { name:"Midnight", bg:"#0f0a1a", ink:"#f5e8ff", muted:"#a594b8", accent:"#ff5fa2", a2:"#ffd166", a3:"#7be8a4", a4:"#7aa2ff" },
  cream:    { name:"Cream",    bg:"#f7f3ec", ink:"#221a14", muted:"#6b5e4f", accent:"#c2410c", a2:"#a16207", a3:"#3f6212", a4:"#1d4ed8" },
};

const FONT_PAIRS = {
  "bricolage-dm": {
    name: "Bricolage × DM Sans",
    display: '"Bricolage Grotesque", Georgia, serif',
    body:    '"DM Sans", system-ui, sans-serif',
    mono:    '"JetBrains Mono", ui-monospace, monospace',
  },
  "fraunces-dm": {
    name: "Fraunces × DM Sans",
    display: '"Fraunces", Georgia, serif',
    body:    '"DM Sans", system-ui, sans-serif',
    mono:    '"JetBrains Mono", ui-monospace, monospace',
  },
  "space-dm": {
    name: "Space Grotesk × DM Sans",
    display: '"Space Grotesk", system-ui, sans-serif',
    body:    '"DM Sans", system-ui, sans-serif',
    mono:    '"JetBrains Mono", ui-monospace, monospace',
  },
  "serif-display": {
    name: "DM Serif × DM Sans",
    display: '"DM Serif Display", Georgia, serif',
    body:    '"DM Sans", system-ui, sans-serif',
    mono:    '"JetBrains Mono", ui-monospace, monospace',
  },
};

function applyTweaks(t){
  const root = document.documentElement;
  const pal = PALETTES[t.palette] || PALETTES.berry;
  root.style.setProperty('--bg',       pal.bg);
  root.style.setProperty('--ink',      pal.ink);
  root.style.setProperty('--muted',    pal.muted);
  root.style.setProperty('--accent',   pal.accent);
  root.style.setProperty('--accent-2', pal.a2);
  root.style.setProperty('--accent-3', pal.a3);
  root.style.setProperty('--accent-4', pal.a4);
  // also update the per-accent palette tokens used by cards
  root.style.setProperty('--c-pink',  pal.accent);
  root.style.setProperty('--c-amber', pal.a2);
  root.style.setProperty('--c-green', pal.a3);
  root.style.setProperty('--c-blue',  pal.a4);

  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["bricolage-dm"];
  root.style.setProperty('--font-display', fp.display);
  root.style.setProperty('--font-body',    fp.body);
  root.style.setProperty('--font-mono',    fp.mono);

  document.body.setAttribute('data-card-style', t.cardStyle || 'sticker');

  document.querySelectorAll('.blob').forEach(b => b.style.display = t.showBlobs ? '' : 'none');
  const grid = document.querySelector('.bg-grid');
  if (grid) grid.style.display = t.showGrid ? '' : 'none';
}

function TweaksApp(){
  const defaults = window.__TWEAK_DEFAULTS || {
    palette: 'berry', fontPair: 'bricolage-dm', cardStyle: 'sticker',
    showBlobs: true, showGrid: true, showLoader: true, showAbout: true,
  };
  const [t, setTweak] = useTweaks(defaults);

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

  const paletteOptions = Object.entries(PALETTES).map(([k, v]) => ({
    value: k,
    label: v.name,
    swatch: [v.bg, v.accent, v.a2, v.a4],
  }));

  const fontOptions = Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.name }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8}}>
          {paletteOptions.map(opt => (
            <button
              key={opt.value}
              onClick={() => setTweak('palette', opt.value)}
              style={{
                cursor:'pointer',
                padding:8, borderRadius:10,
                border: t.palette === opt.value ? '2px solid #111' : '1px solid rgba(0,0,0,0.12)',
                background: opt.swatch[0],
                color: '#111',
                textAlign:'left',
                fontFamily:'inherit', fontSize:12, fontWeight:600,
                display:'flex', flexDirection:'column', gap:6,
              }}>
              <div style={{display:'flex', gap:4}}>
                {opt.swatch.slice(1).map((c,i) => (
                  <span key={i} style={{width:14, height:14, borderRadius:4, background:c, border:'1px solid rgba(0,0,0,0.08)'}} />
                ))}
              </div>
              {opt.label}
            </button>
          ))}
        </div>
      </TweakSection>

      <TweakSection title="Typography">
        <TweakSelect label="Font pairing" value={t.fontPair} options={fontOptions} onChange={v => setTweak('fontPair', v)} />
      </TweakSection>

      <TweakSection title="Card style">
        <TweakRadio
          label=""
          value={t.cardStyle}
          options={[
            { value:'sticker', label:'Sticker' },
            { value:'clean',   label:'Clean' },
            { value:'list',    label:'List' },
          ]}
          onChange={v => setTweak('cardStyle', v)}
        />
      </TweakSection>

      <TweakSection title="Background">
        <TweakToggle label="Floating shapes" value={t.showBlobs} onChange={v => setTweak('showBlobs', v)} />
        <TweakToggle label="Dot grid" value={t.showGrid} onChange={v => setTweak('showGrid', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Apply defaults immediately on script load (before user toggles tweaks)
applyTweaks(window.__TWEAK_DEFAULTS || {});

const tweaksMount = document.createElement('div');
tweaksMount.id = '__tweaks_root';
document.body.appendChild(tweaksMount);
ReactDOM.createRoot(tweaksMount).render(<TweaksApp />);