/* Visimed — Tweaks panel */

const VisimedTweaks = () => {
  const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__ || {
    primary: "#0E3A6B",
    accent: "#E8743C",
    density: "default",
    theme: "light",
    reveal: "on",
  });

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--primary", tweaks.primary);
    r.style.setProperty("--primary-deep", shade(tweaks.primary, -22));
    r.style.setProperty("--primary-soft", tint(tweaks.primary, 0.92));
    r.style.setProperty("--accent", tweaks.accent);
    r.dataset.density = tweaks.density;
    r.dataset.theme = tweaks.theme;
    r.dataset.reveal = tweaks.reveal;
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Primary" value={tweaks.primary} onChange={(v) => setTweak("primary", v)} />
      <TweakColor label="Accent (logo)" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={tweaks.density}
        options={[{value:"compact",label:"Compact"},{value:"default",label:"Default"},{value:"spacious",label:"Spacious"}]}
        onChange={(v) => setTweak("density", v)} />
      <TweakRadio label="Theme" value={tweaks.theme}
        options={[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakToggle label="Scroll reveal"
        value={tweaks.reveal === "on"}
        onChange={(v) => setTweak("reveal", v ? "on" : "off")} />
    </TweaksPanel>
  );
};

function hexToRgb(h) {
  const m = h.replace("#", "");
  const v = m.length === 3 ? m.split("").map(c => c + c).join("") : m;
  const i = parseInt(v, 16);
  return [(i >> 16) & 255, (i >> 8) & 255, i & 255];
}
function rgbToHex([r, g, b]) {
  return "#" + [r, g, b].map(x => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, "0")).join("");
}
function shade(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  const f = pct / 100;
  return rgbToHex([r + (f < 0 ? r : 255 - r) * f, g + (f < 0 ? g : 255 - g) * f, b + (f < 0 ? b : 255 - b) * f]);
}
function tint(hex, t) {
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex([r + (255 - r) * t, g + (255 - g) * t, b + (255 - b) * t]);
}

window.VisimedTweaks = VisimedTweaks;