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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "red",
  "showProgressBar": true,
  "showKbdHint": true,
  "headerStyle": "full"
}/*EDITMODE-END*/;

function AITSTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectT(() => {
    const root = document.documentElement;
    // Theme
    if (tweaks.theme === "dark") {
      root.style.setProperty("--di-paper", "#13110E");
      root.style.setProperty("--di-paper-2", "#1C1A16");
      root.style.setProperty("--di-ink", "#F5F2EA");
      root.style.setProperty("--di-ink-2", "#D4CFC1");
      root.style.setProperty("--di-line", "#2E2A23");
      root.style.setProperty("--di-mute", "#8B8676");
      root.style.setProperty("--di-mute-2", "#5C5849");
    } else if (tweaks.theme === "warm") {
      root.style.setProperty("--di-paper", "#F4ECDD");
      root.style.setProperty("--di-paper-2", "#E9DEC4");
      root.style.setProperty("--di-ink", "#1A1612");
      root.style.setProperty("--di-ink-2", "#2A241D");
      root.style.setProperty("--di-line", "#D4C7A8");
      root.style.setProperty("--di-mute", "#7A6E54");
      root.style.setProperty("--di-mute-2", "#A89B7E");
    } else {
      root.style.setProperty("--di-paper", "#FAFAF7");
      root.style.setProperty("--di-paper-2", "#F1EFE9");
      root.style.setProperty("--di-ink", "#141414");
      root.style.setProperty("--di-ink-2", "#2B2B2B");
      root.style.setProperty("--di-line", "#DCD8CE");
      root.style.setProperty("--di-mute", "#6E6A60");
      root.style.setProperty("--di-mute-2", "#9B9689");
    }

    // Accent — what color "current" / brand emphasis uses
    if (tweaks.accent === "yellow") {
      root.style.setProperty("--di-red", "#C99A0A");
      root.style.setProperty("--di-red-deep", "#8E6D03");
    } else if (tweaks.accent === "green") {
      root.style.setProperty("--di-red", "#1F8A3C");
      root.style.setProperty("--di-red-deep", "#126628");
    } else {
      root.style.setProperty("--di-red", "#D7261E");
      root.style.setProperty("--di-red-deep", "#A81913");
    }

    // Progress bar
    const rail = document.querySelector(".progress-rail");
    if (rail) rail.style.display = tweaks.showProgressBar ? "" : "none";

    // Kbd hint
    const kbd = document.querySelector(".kbd-hint");
    if (kbd) kbd.style.display = tweaks.showKbdHint ? "" : "none";

    // Header style — full vs minimal (hide center crumbs)
    const crumbs = document.querySelector(".app-header .crumbs");
    if (crumbs) crumbs.style.display = tweaks.headerStyle === "minimal" ? "none" : "";

  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          label="Background"
          value={tweaks.theme}
          onChange={v => setTweak("theme", v)}
          options={[
            { value: "light", label: "Light" },
            { value: "warm",  label: "Warm" },
            { value: "dark",  label: "Dark" },
          ]}
        />
        <TweakRadio
          label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            { value: "red",    label: "Red" },
            { value: "yellow", label: "Yellow" },
            { value: "green",  label: "Green" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Chrome">
        <TweakToggle
          label="Top progress bar"
          value={tweaks.showProgressBar}
          onChange={v => setTweak("showProgressBar", v)}
        />
        <TweakToggle
          label="Keyboard hint"
          value={tweaks.showKbdHint}
          onChange={v => setTweak("showKbdHint", v)}
        />
        <TweakRadio
          label="Header"
          value={tweaks.headerStyle}
          onChange={v => setTweak("headerStyle", v)}
          options={[
            { value: "full",    label: "Full" },
            { value: "minimal", label: "Minimal" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.AITSTweaks = AITSTweaks;