// Tweaks panel for NR-INTERACTIONS

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

const ACCENTS = [
  { key: "lime", label: "Lime", val: "#b6ff3c", glow: "rgba(182,255,60,0.45)", soft: "rgba(182,255,60,0.14)", fg: "#07080b" },
  { key: "cyan", label: "Cyan", val: "#5cf7ff", glow: "rgba(92,247,255,0.45)", soft: "rgba(92,247,255,0.14)", fg: "#07080b" },
  { key: "magenta", label: "Magenta", val: "#ff4ddb", glow: "rgba(255,77,219,0.45)", soft: "rgba(255,77,219,0.14)", fg: "#ffffff" },
  { key: "amber", label: "Amber", val: "#ffb547", glow: "rgba(255,181,71,0.45)", soft: "rgba(255,181,71,0.14)", fg: "#1a0d00" },
];

function NRTweaks({ tweaks, setTweak }) {
  // Apply CSS vars on tweak change
  useEffectT(() => {
    const a = ACCENTS.find(x => x.key === tweaks.accent) || ACCENTS[0];
    document.documentElement.style.setProperty("--accent", a.val);
    document.documentElement.style.setProperty("--accent-glow", a.glow);
    document.documentElement.style.setProperty("--accent-soft", a.soft);
    document.documentElement.style.setProperty("--accent-fg", a.fg);
  }, [tweaks.accent]);

  useEffectT(() => {
    document.documentElement.style.setProperty("--ff-display", tweaks.displayFont);
  }, [tweaks.displayFont]);

  useEffectT(() => {
    document.documentElement.style.setProperty("--terminal-display", tweaks.showTerminal ? "block" : "none");
  }, [tweaks.showTerminal]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color de acento">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, padding: "4px 0" }}>
          {ACCENTS.map(a => (
            <button
              key={a.key}
              onClick={() => setTweak("accent", a.key)}
              title={a.label}
              style={{
                height: 36,
                borderRadius: 8,
                border: tweaks.accent === a.key ? `2px solid ${a.val}` : "1px solid rgba(255,255,255,0.15)",
                background: a.val,
                cursor: "pointer",
                boxShadow: tweaks.accent === a.key ? `0 0 16px ${a.glow}` : "none",
                transition: "all 0.2s ease",
              }}
            />
          ))}
        </div>
      </TweakSection>

      <TweakRadio
        label="Tipografía display"
        value={tweaks.displayFont}
        onChange={(v) => setTweak("displayFont", v)}
        options={[
          { value: '"Space Grotesk", sans-serif', label: "Grotesk" },
          { value: '"Instrument Serif", serif', label: "Serif" },
          { value: '"JetBrains Mono", monospace', label: "Mono" },
        ]}
      />

      <TweakToggle
        label="Mostrar terminal en hero"
        value={tweaks.showTerminal}
        onChange={(v) => setTweak("showTerminal", v)}
      />

      <TweakRadio
        label="Idioma por defecto"
        value={tweaks.lang}
        onChange={(v) => setTweak("lang", v)}
        options={[
          { value: "es", label: "ES" },
          { value: "en", label: "EN" },
        ]}
      />
    </TweaksPanel>
  );
}

window.NRTweaks = NRTweaks;