/* GAMEDB.WIKI — Tweaks panel (bridges to hub.js via 'hub-tweaks' events) */

const HUB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": 100,
  "motion": true,
  "grain": true,
  "titleStyle": "flavored",
  "heroMark": "ascii",
  "asciiColorful": false,
  "asciiRipple": 140
}/*EDITMODE-END*/;

function HubTweaks() {
  const [t, setTweak] = useTweaks(HUB_TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent("hub-tweaks", { detail: t }));
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Atmosphere" />
      <TweakSlider
        label="Particle density"
        value={t.density}
        min={0}
        max={250}
        step={10}
        unit="%"
        onChange={(v) => setTweak("density", v)}
      />
      <TweakToggle
        label="Motion"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
      <TweakToggle
        label="Film grain"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
      <TweakSection label="Type" />
      <TweakSelect
        label="Hero wordmark"
        value={t.heroMark}
        options={[
          { value: "ascii", label: "ASCII — interactive character field" },
          { value: "stamp", label: "Stamped tag (rotated .WIKI chip)" },
          { value: "inline", label: "Inline — GAMEDB.WIKI one line" },
          { value: "stacked", label: "Stacked — outlined .WIKI below" },
          { value: "vertical", label: "Vertical — .WIKI rotated sideways" },
          { value: "minimal", label: "Minimal — small mono .WIKI under" }
        ]}
        onChange={(v) => setTweak("heroMark", v)}
      />
      <TweakToggle
        label="Aurora palette (ASCII)"
        value={t.asciiColorful}
        onChange={(v) => setTweak("asciiColorful", v)}
      />
      <TweakSlider
        label="Cursor ripple"
        value={t.asciiRipple}
        min={0}
        max={300}
        step={10}
        unit="%"
        onChange={(v) => setTweak("asciiRipple", v)}
      />
      <TweakRadio
        label="Game titles"
        value={t.titleStyle}
        options={["flavored", "outline"]}
        onChange={(v) => setTweak("titleStyle", v)}
      />
    </TweaksPanel>
  );
}

const hubTweaksMount = document.createElement("div");
document.body.appendChild(hubTweaksMount);
ReactDOM.createRoot(hubTweaksMount).render(<HubTweaks />);