/* global React */
/* eslint-disable */
const { useState, useCallback } = React;

/* ============================================================
   useTweaks — persists tweaks in localStorage
   ============================================================ */
function useTweaks(defaults) {
  const key = "mariany_tweaks_v1";
  const [tweaks, setTweaks] = useState(() => {
    try {
      const stored = JSON.parse(localStorage.getItem(key) || "{}");
      return { ...defaults, ...stored };
    } catch {
      return { ...defaults };
    }
  });

  const setTweak = useCallback((k, v) => {
    setTweaks((prev) => {
      const next = { ...prev, [k]: v };
      try { localStorage.setItem(key, JSON.stringify(next)); } catch {}
      return next;
    });
  }, []);

  return [tweaks, setTweak];
}

/* ============================================================
   Panel primitives
   ============================================================ */
function TweaksPanel({ title, children }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="tweaks-panel">
      <button className="tweaks-toggle" onClick={() => setOpen((o) => !o)}
        title="Ajustes" aria-label="Abrir painel de ajustes">
        ✦
      </button>
      {open && (
        <div className="tweaks-body">
          <div className="tweaks-title">{title}</div>
          {children}
        </div>
      )}
    </div>
  );
}

function TweakSection({ label, children }) {
  return (
    <div className="tweak-section">
      <div className="tweak-section-label">{label}</div>
      {children}
    </div>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <div className="tweak-row">
      <label>{label}</label>
      <button
        className={`tweak-toggle ${value ? "on" : ""}`}
        onClick={() => onChange(!value)}
        aria-pressed={value}
      />
    </div>
  );
}

function TweakSlider({ label, value, min, max, step, onChange }) {
  return (
    <div className="tweak-row" style={{ flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
      <label>{label} <span style={{ opacity: 0.6 }}>({value})</span></label>
      <input
        className="tweak-slider"
        type="range"
        min={min} max={max} step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
      />
    </div>
  );
}

function TweakText({ label, value, onChange }) {
  return (
    <div className="tweak-row" style={{ flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
      <label>{label}</label>
      <input
        className="tweak-input"
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <div className="tweak-row" style={{ flexDirection: "column", alignItems: "flex-start", gap: 6 }}>
      <label>{label}</label>
      <div className="tweak-radio-group">
        {options.map((opt) => (
          <button
            key={opt.value}
            className={`tweak-radio-btn ${value === opt.value ? "on" : ""}`}
            onClick={() => onChange(opt.value)}
          >
            {opt.label}
          </button>
        ))}
      </div>
    </div>
  );
}