// Tweaks panel for JSR site

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "charcoal",
  "darkMode": false,
  "fontPair": "sans-modern",
  "heroLayout": "split-left",
  "servicesLayout": "cards",
  "ctaStyle": "default",
  "density": 1,
  "showStats": true,
  "showProcess": true,
  "showLanguages": true,
  "showAbout": true,
  "showTestimonial": true,
  "showResources": true
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "sans-modern": { display: '"Inter", system-ui, sans-serif', body: '"Inter", system-ui, sans-serif', name: "Inter / Inter" },
  "serif-display": { display: '"Source Serif 4", Georgia, serif', body: '"Inter", system-ui, sans-serif', name: "Source Serif / Inter" },
  "editorial": { display: '"Fraunces", Georgia, serif', body: '"Inter", system-ui, sans-serif', name: "Fraunces / Inter" },
  "geometric": { display: '"Space Grotesk", system-ui, sans-serif', body: '"Space Grotesk", system-ui, sans-serif', name: "Space Grotesk" },
  "humanist": { display: '"DM Serif Display", Georgia, serif', body: '"DM Sans", system-ui, sans-serif', name: "DM Serif / DM Sans" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute("data-palette", t.palette);
  root.setAttribute("data-theme", t.darkMode ? "dark" : "light");
  root.setAttribute("data-cta", t.ctaStyle);
  root.style.setProperty("--density", t.density);
  const f = FONT_PAIRS[t.fontPair] || FONT_PAIRS["sans-modern"];
  root.style.setProperty("--font-display", f.display);
  root.style.setProperty("--font-body", f.body);
  // Section visibility
  document.querySelectorAll('[data-section="stats"]').forEach(el => el.style.display = t.showStats ? "" : "none");
  document.querySelectorAll('[data-section="process"]').forEach(el => el.style.display = t.showProcess ? "" : "none");
  document.querySelectorAll('[data-section="languages"]').forEach(el => el.style.display = t.showLanguages ? "" : "none");
  document.querySelectorAll('[data-section="about"]').forEach(el => el.style.display = t.showAbout ? "" : "none");
  document.querySelectorAll('[data-section="testimonial"]').forEach(el => el.style.display = t.showTestimonial ? "" : "none");
  document.querySelectorAll('[data-section="resources"]').forEach(el => el.style.display = t.showResources ? "" : "none");
}

function JSRTweaks({ onTweaksChange }) {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyTweaks(tweaks);
    onTweaksChange && onTweaksChange(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakSelect label="Color palette" value={tweaks.palette} onChange={v => setTweak("palette", v)}
          options={[
            { value: "charcoal", label: "Charcoal (default)" },
            { value: "navy", label: "Navy" },
            { value: "forest", label: "Forest Green" },
            { value: "maple", label: "Maple Red" },
            { value: "teal", label: "Teal" },
          ]} />
        <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={v => setTweak("darkMode", v)} />
      </TweakSection>

      <TweakSection title="Typography">
        <TweakSelect label="Font pairing" value={tweaks.fontPair} onChange={v => setTweak("fontPair", v)}
          options={Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.name }))} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio label="Hero" value={tweaks.heroLayout} onChange={v => setTweak("heroLayout", v)}
          options={[
            { value: "split-left", label: "Split (image right)" },
            { value: "split-right", label: "Split (image left)" },
            { value: "centered", label: "Centered" },
            { value: "full-bleed", label: "Full-bleed" },
          ]} />
        <TweakRadio label="Services" value={tweaks.servicesLayout} onChange={v => setTweak("servicesLayout", v)}
          options={[
            { value: "cards", label: "Cards" },
            { value: "list", label: "List" },
            { value: "accordion", label: "Accordion" },
          ]} />
        <TweakRadio label="CTA buttons" value={tweaks.ctaStyle} onChange={v => setTweak("ctaStyle", v)}
          options={[
            { value: "default", label: "Default" },
            { value: "pill", label: "Pill" },
            { value: "sharp", label: "Sharp" },
            { value: "bold", label: "Bold (accent)" },
            { value: "outline", label: "Outline" },
          ]} />
        <TweakSlider label="Density" min={0.85} max={1.2} step={0.05} value={tweaks.density} onChange={v => setTweak("density", v)} />
      </TweakSection>

      <TweakSection title="Sections">
        <TweakToggle label="Stats bar" value={tweaks.showStats} onChange={v => setTweak("showStats", v)} />
        <TweakToggle label="Process" value={tweaks.showProcess} onChange={v => setTweak("showProcess", v)} />
        <TweakToggle label="Languages" value={tweaks.showLanguages} onChange={v => setTweak("showLanguages", v)} />
        <TweakToggle label="About" value={tweaks.showAbout} onChange={v => setTweak("showAbout", v)} />
        <TweakToggle label="Testimonial" value={tweaks.showTestimonial} onChange={v => setTweak("showTestimonial", v)} />
        <TweakToggle label="Resources" value={tweaks.showResources} onChange={v => setTweak("showResources", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { JSRTweaks, applyTweaks, TWEAK_DEFAULTS, FONT_PAIRS });