/* IDF Tweaks Panel — design controls exposed to the user */
const { useEffect } = React;

const HERO_IMAGES = {
  "Sala digital (clara)": "assets/operatorio-2.jpg",
  "Operatório (luz natural)": "assets/operatorio-1.jpg",
  "Sala de consulta (madeira)": "assets/consultorio.jpg",
  "Recepção (acolhimento)": "assets/recepcao.jpg",
  "Dra. Daysi em atendimento": "assets/dra-atendimento.jpg",
  "Dra. Daysi (retrato)": "assets/dra-daysi.jpg",
};

const ACCENT_PALETTES = {
  Sálvia: { sage1: "#b2b592", sage2: "#718175", stone: "#c1bfbd" },
  Pedra: { sage1: "#c1bfbd", sage2: "#8a8a85", stone: "#dad7d1" },
  Musgo: { sage1: "#9aa885", sage2: "#566a5b", stone: "#b8b6ad" },
  Areia: { sage1: "#c8b896", sage2: "#8a7a5c", stone: "#d6cdba" },
};

function IDFTweaks() {
  const defaults = (window.TWEAK_DEFAULTS) || {
    heroImage: "Sala digital (clara)",
    accent: "Sálvia",
    headlineStyle: "Editorial clássico",
    paperTone: "Cremoso",
    showMarquee: true,
    grayscaleImages: false,
  };
  const [t, setTweak] = useTweaks({
    heroImage: defaults.heroImage || "Sala digital (clara)",
    accent: defaults.accent || "Sálvia",
    headlineStyle: defaults.headlineStyle || "Editorial clássico",
    paperTone: defaults.paperTone || "Cremoso",
    showMarquee: defaults.showMarquee !== false,
    grayscaleImages: !!defaults.grayscaleImages,
  });

  // Apply tweaks live
  useEffect(() => {
    // Hero image
    const heroImg = document.querySelector(".hero-bg img");
    const src = HERO_IMAGES[t.heroImage];
    if (heroImg && src) heroImg.src = src;
  }, [t.heroImage]);

  useEffect(() => {
    const root = document.documentElement.style;
    const pal = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES["Sálvia"];
    root.setProperty("--sage-1", pal.sage1);
    root.setProperty("--sage-2", pal.sage2);
    root.setProperty("--stone", pal.stone);
  }, [t.accent]);

  useEffect(() => {
    const root = document.documentElement.style;
    if (t.paperTone === "Cremoso") {
      root.setProperty("--paper", "#f6f3ec");
      root.setProperty("--paper-2", "#ebe6da");
      root.setProperty("--bone", "#e3ddcd");
    } else if (t.paperTone === "Branco puro") {
      root.setProperty("--paper", "#fafaf7");
      root.setProperty("--paper-2", "#f0eee8");
      root.setProperty("--bone", "#e6e3d9");
    } else if (t.paperTone === "Carvão") {
      root.setProperty("--paper", "#0e0e0c");
      root.setProperty("--paper-2", "#16161300");
      root.setProperty("--bone", "#1a1a17");
    }
  }, [t.paperTone]);

  useEffect(() => {
    document.querySelectorAll(".display.hero-display, .h1, .h2, .display, .concept-quote, .spec-title, .diff-title, .quote-text, .lede").forEach((el) => {
      if (t.headlineStyle === "Editorial clássico") {
        el.style.fontFamily = '"Cormorant Garamond", serif';
        el.style.fontWeight = "300";
      } else if (t.headlineStyle === "Sans elegante") {
        el.style.fontFamily = '"Outfit", sans-serif';
        el.style.fontWeight = "300";
      } else if (t.headlineStyle === "Italiana alta") {
        el.style.fontFamily = '"Italiana", serif';
        el.style.fontWeight = "400";
      }
    });
  }, [t.headlineStyle]);

  useEffect(() => {
    const m = document.querySelector(".marquee");
    if (m) m.style.display = t.showMarquee ? "" : "none";
  }, [t.showMarquee]);

  useEffect(() => {
    document.body.style.filter = t.grayscaleImages ? "grayscale(0.6)" : "";
  }, [t.grayscaleImages]);

  return (
    <TweaksPanel title="Tweaks · IDF">
      <TweakSection label="Hero">
        <TweakSelect
          label="Imagem de fundo"
          value={t.heroImage}
          options={Object.keys(HERO_IMAGES)}
          onChange={(v) => setTweak("heroImage", v)}
        />
      </TweakSection>

      <TweakSection label="Paleta">
        <TweakRadio
          label="Tom de papel"
          value={t.paperTone}
          options={["Cremoso", "Branco puro", "Carvão"]}
          onChange={(v) => setTweak("paperTone", v)}
        />
        <TweakSelect
          label="Acento"
          value={t.accent}
          options={Object.keys(ACCENT_PALETTES)}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweakSection>

      <TweakSection label="Tipografia">
        <TweakSelect
          label="Estilo de headline"
          value={t.headlineStyle}
          options={["Editorial clássico", "Italiana alta", "Sans elegante"]}
          onChange={(v) => setTweak("headlineStyle", v)}
        />
      </TweakSection>

      <TweakSection label="Detalhes">
        <TweakToggle
          label="Marquee de palavras-chave"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakToggle
          label="Fotos em preto e branco"
          value={t.grayscaleImages}
          onChange={(v) => setTweak("grayscaleImages", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById("tweaks-root"));
root.render(<IDFTweaks />);