/* site-tweaks.jsx — Tweaks panel for the personal site */

const { useState: useStateT, useEffect: useEffectT } = React;

function SiteTweaks() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accentMode": "mono",
    "fontDisplay": "Instrument Serif",
    "density": "comfortable",
    "motion": "full",
    "grain": true,
    "cursor": true,
    "previewLabel": "v0.1 prototype"
  }/*EDITMODE-END*/);

  // Apply tweaks live to the document
  useEffectT(() => {
    const root = document.documentElement;
    const apply = () => {
      // Accent
      if (tweaks.accentMode === "ink") {
        root.style.setProperty("--fg", "#0a1d33");
        root.style.setProperty("--line", "#0a1d33");
      } else if (tweaks.accentMode === "warm") {
        root.style.setProperty("--fg", "#1a0e08");
        root.style.setProperty("--bg", "#fbf8f3");
        root.style.setProperty("--line", "#1a0e08");
      } else {
        root.style.setProperty("--fg", "#0a0a0a");
        root.style.setProperty("--bg", "#ffffff");
        root.style.setProperty("--line", "#1a1a1a");
      }

      // Display font — Korean must use Pretendard (no serif fallback)
      const fontMap = {
        "Instrument Serif": '"Instrument Serif", serif',
        "Times": "Times, serif",
        "Geometric": '"Inter", sans-serif',
      };
      if (window.__lang === "kr") {
        root.style.removeProperty("--font-display");
      } else {
        root.style.setProperty("--font-display", fontMap[tweaks.fontDisplay] || fontMap["Instrument Serif"]);
      }

      // Density
      root.style.setProperty("--side-pad", tweaks.density === "tight" ? "3vw" : tweaks.density === "loose" ? "8vw" : "5vw");

      // Grain
      const grain = document.querySelector(".grain");
      if (grain) grain.style.display = tweaks.grain ? "block" : "none";

      // Cursor
      document.body.style.cursor = tweaks.cursor ? "none" : "auto";
    };
    apply();
    window.addEventListener("lang:change", apply);
    return () => window.removeEventListener("lang:change", apply);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Tone">
        <TweakRadio
          label="Accent"
          value={tweaks.accentMode}
          options={[
            { value: "mono", label: "Mono" },
            { value: "ink",  label: "Ink"  },
            { value: "warm", label: "Warm" },
          ]}
          onChange={v => setTweak("accentMode", v)}
        />
        <TweakSelect
          label="Display font"
          value={tweaks.fontDisplay}
          options={["Instrument Serif", "Times", "Geometric"]}
          onChange={v => setTweak("fontDisplay", v)}
        />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[
            { value: "tight", label: "Tight" },
            { value: "comfortable", label: "Comf." },
            { value: "loose", label: "Loose" },
          ]}
          onChange={v => setTweak("density", v)}
        />
      </TweakSection>

      <TweakSection title="Motion & Chrome">
        <TweakToggle
          label="Film grain"
          value={tweaks.grain}
          onChange={v => setTweak("grain", v)}
        />
        <TweakToggle
          label="Custom cursor"
          value={tweaks.cursor}
          onChange={v => setTweak("cursor", v)}
        />
        <TweakRadio
          label="Motion"
          value={tweaks.motion}
          options={[
            { value: "full",   label: "Full"  },
            { value: "subtle", label: "Subtle"},
            { value: "off",    label: "Off"   },
          ]}
          onChange={v => setTweak("motion", v)}
        />
      </TweakSection>

      <TweakSection title="Meta">
        <TweakText
          label="Footer label"
          value={tweaks.previewLabel}
          onChange={v => setTweak("previewLabel", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { SiteTweaks });