// Tweaks panel
const TweaksPanel = () => {
  const [open, setOpen] = React.useState(false);
  const [color, setColor] = React.useState("#F37021");
  const [glow, setGlow] = React.useState(false);
  const [focus, setFocus] = React.useState("all");

  const swatches = [
    { c: "#F37021", name: "Laranja" },
    { c: "#003366", name: "Navy" },
    { c: "#1a7a4a", name: "Verde" },
    { c: "#c0392b", name: "Vermelho" },
    { c: "#8e44ad", name: "Roxo" },
  ];

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", color);
  }, [color]);

  React.useEffect(() => {
    document.body.classList.toggle("glow", glow);
  }, [glow]);

  React.useEffect(() => {
    const b = document.body;
    b.classList.remove("focus-tea", "focus-pcd", "focus-taxi");
    if (focus !== "all") b.classList.add(`focus-${focus}`);
  }, [focus]);

  return (
    <>
      <button className="tweaks-fab" aria-label="Abrir ajustes" onClick={() => setOpen(o => !o)}>
        <Icon name="settings" size={20}/>
      </button>
      <div className={`tweaks-panel ${open ? "open" : ""}`} role="dialog" aria-label="Ajustes visuais">
        <h4>Cor de acento</h4>
        <div className="swatch-row">
          {swatches.map(s => (
            <button
              key={s.c}
              className={`swatch ${color === s.c ? "active" : ""}`}
              style={{ background: s.c }}
              aria-label={s.name}
              onClick={() => setColor(s.c)}
            />
          ))}
        </div>
        <h4>Efeito glow</h4>
        <div className="tweak-toggle">
          <span>Brilho nos CTAs e cards</span>
          <button className={`toggle-switch ${glow ? "on" : ""}`} onClick={() => setGlow(g => !g)} aria-pressed={glow}/>
        </div>
        <h4>Destaque de público</h4>
        <select className="tweak-select" value={focus} onChange={e => setFocus(e.target.value)}>
          <option value="all">Todos os públicos</option>
          <option value="tea">Famílias TEA</option>
          <option value="pcd">Pessoas com deficiência</option>
          <option value="taxi">Taxistas</option>
        </select>
      </div>
    </>
  );
};

window.TweaksPanel = TweaksPanel;