/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor, useTweaks */
const { useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    theme: "light",
    fontPair: "sora-manrope",
    density: "default",
    showStrip: true,
    primaryAccent: "#FCBC28",
  });

  useEffect(() => {
    const root = document.documentElement;
    if (t.theme === "light") root.removeAttribute("data-theme");
    else root.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  useEffect(() => {
    const root = document.documentElement;
    if (t.density === "default") root.removeAttribute("data-density");
    else root.setAttribute("data-density", t.density);
  }, [t.density]);

  useEffect(() => {
    const map = {
      "sora-manrope":         { display: "Sora",           body: "Manrope" },
      "spacegrotesk-manrope": { display: "Space Grotesk",  body: "Manrope" },
      "dmsans-dmsans":        { display: "DM Sans",        body: "DM Sans" },
    };
    const f = map[t.fontPair] || map["sora-manrope"];
    document.documentElement.style.setProperty("--ff-display", `"${f.display}", system-ui, sans-serif`);
    document.documentElement.style.setProperty("--ff-body",    `"${f.body}", system-ui, sans-serif`);
  }, [t.fontPair]);

  useEffect(() => {
    document.documentElement.style.setProperty("--amber", t.primaryAccent);
  }, [t.primaryAccent]);

  useEffect(() => {
    document.querySelectorAll(".hero-side-strip").forEach(el => {
      el.style.display = t.showStrip ? "" : "none";
    });
  }, [t.showStrip]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema">
        <TweakRadio
          label="Modo"
          value={t.theme}
          onChange={v => setTweak("theme", v)}
          options={[
            { value: "light", label: "Claro" },
            { value: "mono",  label: "Mono" },
            { value: "dark",  label: "Dark" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Tipografia">
        <TweakSelect
          label="Par tipográfico"
          value={t.fontPair}
          onChange={v => setTweak("fontPair", v)}
          options={[
            { value: "sora-manrope",         label: "Sora + Manrope" },
            { value: "spacegrotesk-manrope", label: "Space Grotesk + Manrope" },
            { value: "dmsans-dmsans",        label: "DM Sans" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Cor de acento">
        <TweakColor
          label="Âmbar"
          value={t.primaryAccent}
          onChange={v => setTweak("primaryAccent", v)}
          options={["#FCBC28", "#E25822", "#1F8A5B", "#2A6FDB", "#0F1620"]}
        />
      </TweakSection>

      <TweakSection label="Densidade">
        <TweakRadio
          label="Espaçamento"
          value={t.density}
          onChange={v => setTweak("density", v)}
          options={[
            { value: "compact", label: "Compacto" },
            { value: "default", label: "Padrão" },
            { value: "airy",    label: "Aéreo" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Detalhes">
        <TweakToggle
          label="Barra âmbar lateral"
          value={t.showStrip}
          onChange={v => setTweak("showStrip", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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