/* Shared Tweaks: defaults, apply-to-DOM, and panel UI */

window.SK_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D8232A",
  "headerStyle": "dark",
  "fontPair": "grotesk",
  "density": "regular",
  "cardShape": "soft",
  "transcriptMode": "karaoke"
}/*EDITMODE-END*/;

const SK_ACCENTS = {
  "#D8232A": { ink: "#A8161D", wash: "#FCEAEA", name: "Kızıl" },
  "#B11116": { ink: "#7E0C10", wash: "#F8E7E7", name: "Bordo" },
  "#E8612C": { ink: "#B8431A", wash: "#FCEDE4", name: "Kiremit" },
  "#1E5BB8": { ink: "#16448C", wash: "#E7EEF9", name: "Lacivert" },
  "#0F6E54": { ink: "#0A4D3A", wash: "#E8F1EC", name: "Zümrüt" },
};

const SK_FONTS = {
  grotesk: { display: "'Schibsted Grotesk', system-ui, sans-serif", body: "'Hanken Grotesk', system-ui, sans-serif", label: "Grotesk" },
  humanist: { display: "'Hanken Grotesk', system-ui, sans-serif", body: "'Hanken Grotesk', system-ui, sans-serif", label: "Yalın Sans" },
  editorial: { display: "'Newsreader', Georgia, serif", body: "'Hanken Grotesk', system-ui, sans-serif", label: "Serif Başlık" },
};

const SK_DENSITY = { compact: { base: 16, gut: 0.85 }, regular: { base: 17, gut: 1 }, comfy: { base: 18, gut: 1.18 } };
const SK_SHAPE = { sharp: 4, soft: 12, round: 22 };

window.applyTweaks = function (t) {
  const r = document.documentElement.style;
  const a = SK_ACCENTS[t.accent] || SK_ACCENTS["#0F6E54"];
  r.setProperty('--accent', t.accent);
  r.setProperty('--accent-ink', a.ink);
  r.setProperty('--accent-wash', a.wash);
  const f = SK_FONTS[t.fontPair] || SK_FONTS.grotesk;
  r.setProperty('--font-display', f.display);
  r.setProperty('--font-body', f.body);
  const d = SK_DENSITY[t.density] || SK_DENSITY.regular;
  document.body && (document.body.style.fontSize = d.base + 'px');
  r.setProperty('--r-md', (SK_SHAPE[t.cardShape] ?? 12) + 'px');
  r.setProperty('--r-lg', ((SK_SHAPE[t.cardShape] ?? 12) + 4) + 'px');
  document.documentElement.dataset.transcript = t.transcriptMode;
  document.documentElement.dataset.header = t.headerStyle || 'dark';
};

function SKTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marka & Renk" />
      <TweakColor label="Vurgu / buton rengi" value={t.accent}
        options={Object.keys(SK_ACCENTS)}
        onChange={v => setTweak('accent', v)} />
      <TweakRadio label="Menü zemini" value={t.headerStyle}
        options={[{value:'dark',label:'Siyah'},{value:'light',label:'Açık'}]}
        onChange={v => setTweak('headerStyle', v)} />

      <TweakSection label="Görsel Stil" />
      <TweakSelect label="Tipografi" value={t.fontPair}
        options={[{value:'grotesk',label:'Grotesk (modern)'},{value:'humanist',label:'Yalın Sans (ferah)'},{value:'editorial',label:'Serif Başlık (kitabî)'}]}
        onChange={v => setTweak('fontPair', v)} />
      <TweakRadio label="Köşe yumuşaklığı" value={t.cardShape}
        options={[{value:'sharp',label:'Keskin'},{value:'soft',label:'Yumuşak'},{value:'round',label:'Yuvarlak'}]}
        onChange={v => setTweak('cardShape', v)} />

      <TweakSection label="Yerleşim" />
      <TweakRadio label="Yoğunluk" value={t.density}
        options={[{value:'compact',label:'Sık'},{value:'regular',label:'Normal'},{value:'comfy',label:'Ferah'}]}
        onChange={v => setTweak('density', v)} />

      <TweakSection label="Transkript Etkileşimi" />
      <TweakRadio label="Vurgulama" value={t.transcriptMode}
        options={[{value:'karaoke',label:'Karaoke'},{value:'line',label:'Satır'},{value:'off',label:'Kapalı'}]}
        onChange={v => setTweak('transcriptMode', v)} />
    </TweaksPanel>
  );
}
window.SKTweaks = SKTweaks;