/* TAKEBOX — Tweaks panel. Applies to the static page via root attrs / CSS vars. */
const { useEffect } = React;

const TB_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#1f6b54",
  "hero": "split"
}/*EDITMODE-END*/;

// accents paired with a readable foreground (28 options)
const ACCENTS = {
  "#1f6b54": "#ffffff", // pine green (brand)
  "#2e8b6f": "#ffffff", // emerald
  "#3aa06b": "#ffffff", // green
  "#5a8f3c": "#ffffff", // olive green
  "#7a9a2e": "#17150f", // lime moss
  "#caa53d": "#17150f", // industrial ochre
  "#d9a441": "#17150f", // amber
  "#e08a2e": "#17150f", // marigold
  "#d2742b": "#ffffff", // pumpkin
  "#b1442e": "#ffffff", // rust red
  "#c5392f": "#ffffff", // signal red
  "#a32c3a": "#ffffff", // crimson
  "#8e2c4d": "#ffffff", // wine
  "#a13b76": "#ffffff", // magenta
  "#7d3b9e": "#ffffff", // purple
  "#5a45b0": "#ffffff", // indigo
  "#3f4fae": "#ffffff", // royal blue
  "#2f6fb0": "#ffffff", // cobalt
  "#1f7fa8": "#ffffff", // teal blue
  "#16877f": "#ffffff", // teal
  "#0f8a8a": "#ffffff", // cyan deep
  "#4a7a8c": "#ffffff", // steel blue
  "#6b7280": "#ffffff", // slate
  "#8a6d3b": "#ffffff", // bronze
  "#7a5c45": "#ffffff", // walnut
  "#9a5b3f": "#ffffff", // terracotta
  "#2b2b28": "#ffffff", // graphite
  "#0e0e10": "#ffffff"  // ink black
};

// If the CMS has a saved accent, make it the Tweaks default so Tweaks never
// clobbers a CMS-published accent on init (cms-store.js loads before this).
(function () {
  try {
    var b = window.TBStore && window.TBStore.published && window.TBStore.published().branding;
    if (b && b.accent) {
      TB_DEFAULTS.accent = b.accent;
      ACCENTS[b.accent] = b.accentFg || ACCENTS[b.accent] || "#ffffff";
    }
  } catch (e) {}
})();

function App() {
  const [t, setTweak] = useTweaks(TB_DEFAULTS);
  const root = document.documentElement;

  useEffect(() => {
    root.dataset.theme = t.theme;
  }, [t.theme]);

  useEffect(() => {
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-fg", ACCENTS[t.accent] || "#ffffff");
  }, [t.accent]);

  useEffect(() => {
    root.dataset.hero = t.hero;
  }, [t.hero]);

  return (
    <TweaksPanel>
      <style>{`
        .twk-panel .twk-chips{display:grid !important;grid-template-columns:repeat(6,1fr);gap:6px}
        .twk-panel .twk-chip{flex:none;height:30px}
      `}</style>
      <TweakSection label="Vzhled" />
      <TweakRadio
        label="Motiv"
        value={t.theme}
        options={["dark", "light"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakColor
        label="Akcent"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Hero" />
      <TweakSelect
        label="Rozložení"
        value={t.hero}
        options={[
          { value: "split", label: "Split — text + rám" },
          { value: "centered", label: "Centrovaný" },
          { value: "bleed", label: "Fotka na celou" }
        ]}
        onChange={(v) => setTweak("hero", v)}
      />
    </TweaksPanel>
  );
}

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