/* ============================================================
   BEYOND GRAVEL — Tweaks app
   Drives the page via window.applyGravelTweaks (in gravel.js).
   ============================================================ */
const { useEffect } = React;

const GRAVEL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "map",
  "head": "poster",
  "accent": "standard",
  "topo": "subtle",
  "heroCopy": "Ne luxus, ne závod"
}/*EDITMODE-END*/;

// hero-copy label -> key used by HERO_COPY in gravel.js
const HERO_MAP = {
  "Jedeš několik dní": "dni",
  "Co se stane mezi nimi": "mezi",
  "Ne luxus, ne závod": "cesta",
  "Kolo. Cesta. Ticho. Parta.": "parta",
  "Za hranicí pohodlí": "pohodli"
};

// keyword <-> czech label maps for segmented controls
const MOOD_LABELS   = { "Lesní": "forest", "Mapová": "map", "Mlhavá": "mist" };
const HEAD_LABELS   = { "Plakát": "poster", "Přírodní": "natural" };
const ACCENT_LABELS = { "Jemný": "soft", "Standard": "standard", "Výrazný": "vivid" };
const TOPO_LABELS   = { "Vyp": "off", "Jemně": "subtle", "Výrazně": "rich" };

function labelFor(map, val) {
  return Object.keys(map).find(function (k) { return map[k] === val; });
}

function GravelTweaks() {
  const [t, setTweak] = useTweaks(GRAVEL_TWEAK_DEFAULTS);

  // apply on mount + whenever a tweak changes
  useEffect(function () {
    if (window.applyGravelTweaks) {
      window.applyGravelTweaks({
        mood: t.mood,
        head: t.head,
        accent: t.accent,
        topo: t.topo,
        heroCopy: HERO_MAP[t.heroCopy] || "dni"
      });
    }
  }, [t.mood, t.head, t.accent, t.topo, t.heroCopy]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosféra" />
      <TweakRadio
        label="Barevné ladění"
        value={labelFor(MOOD_LABELS, t.mood)}
        options={["Lesní", "Mapová", "Mlhavá"]}
        onChange={(v) => setTweak("mood", MOOD_LABELS[v])}
      />
      <TweakRadio
        label="Mapové prvky"
        value={labelFor(TOPO_LABELS, t.topo)}
        options={["Vyp", "Jemně", "Výrazně"]}
        onChange={(v) => setTweak("topo", TOPO_LABELS[v])}
      />

      <TweakSection label="Typografie" />
      <TweakRadio
        label="Nadpisy"
        value={labelFor(HEAD_LABELS, t.head)}
        options={["Plakát", "Přírodní"]}
        onChange={(v) => setTweak("head", HEAD_LABELS[v])}
      />

      <TweakSection label="Akcent" />
      <TweakRadio
        label="Rezavý akcent"
        value={labelFor(ACCENT_LABELS, t.accent)}
        options={["Jemný", "Standard", "Výrazný"]}
        onChange={(v) => setTweak("accent", ACCENT_LABELS[v])}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Hlavní slogan"
        value={t.heroCopy}
        options={Object.keys(HERO_MAP)}
        onChange={(v) => setTweak("heroCopy", v)}
      />
    </TweaksPanel>
  );
}

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