/* ============================================================
 * Tweaks panel, the Tweaks toolbar toggle reveals this.
 * ============================================================ */

const GMTweaks = ({ onChange }) => {
  const [tweaks, setTweak] = useTweaks(window.__GM_TWEAKS__);

  // Apply theme + accent live
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // Also derive glow & ink
    document.documentElement.style.setProperty(
      "--accent-glow",
      `color-mix(in srgb, ${tweaks.accent} 22%, transparent)`
    );
    onChange?.(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Look">
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          options={[
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[
            { value: "comfortable", label: "Editorial" },
            { value: "compact", label: "Compact" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakColor
          label="Accent color"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
        />
        <div className="tw-presets">
          {[
            { c: "#ED4D86", n: "Magenta" },
            { c: "#E8743D", n: "Ember" },
            { c: "#C8A14E", n: "Gold" },
            { c: "#2BB3A6", n: "Teal" },
            { c: "#D04545", n: "Crimson" },
          ].map((p) => (
            <button
              key={p.c}
              className={`tw-preset ${tweaks.accent.toLowerCase() === p.c.toLowerCase() ? "on" : ""}`}
              onClick={() => setTweak("accent", p.c)}
              title={p.n}
              style={{ background: p.c }}
            />
          ))}
        </div>
      </TweakSection>

      <TweakSection title="Content">
        <TweakSelect
          label="Hero headline"
          value={tweaks.h1Variant}
          options={[
            { value: "promise", label: "One AI system…" },
            { value: "category", label: "The Omnichannel AI CRM" },
            { value: "brain", label: "Train one Brain…" },
          ]}
          onChange={(v) => setTweak("h1Variant", v)}
        />
        <TweakSelect
          label="Brain visual"
          value={tweaks.brainStyle}
          options={[
            { value: "orb", label: "Soft orb" },
            { value: "geometric", label: "Geometric mark" },
            { value: "graph", label: "Knowledge graph" },
          ]}
          onChange={(v) => setTweak("brainStyle", v)}
        />
      </TweakSection>

      <style>{`
        .tw-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
        .tw-preset {
          width: 22px; height: 22px; border-radius: 50%;
          border: 2px solid transparent;
          cursor: pointer;
          transition: transform .15s ease;
        }
        .tw-preset:hover { transform: scale(1.1); }
        .tw-preset.on { border-color: white; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
      `}</style>
    </TweaksPanel>
  );
};

window.GMTweaks = GMTweaks;