// Tweaks panel — minimal customization (theme, sidebar, accent, dashboard layout)
function TweaksPanel({ open, onClose, tweaks, setTweak }) {
  if (!open) return null;
  const accentOptions = [
    { id: "orange", color: "#f97316", name: "Laranja Unbox" },
    { id: "amber",  color: "#f59e0b", name: "Âmbar" },
    { id: "blue",   color: "#3b82f6", name: "Azul" },
    { id: "green",  color: "#22c55e", name: "Verde" },
    { id: "violet", color: "#8b5cf6", name: "Violeta" },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <span className="tt"><i className="fas fa-sliders-h"></i> Tweaks</span>
        <button className="icon-btn" onClick={onClose} style={{ width: 24, height: 24, fontSize: 11 }}>
          <i className="fas fa-times"></i>
        </button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-field">
          <label>Tema</label>
          <div className="seg-row">
            <button className={"seg-btn" + (tweaks.theme === "dark" ? " active" : "")} onClick={() => setTweak("theme", "dark")}>
              <i className="fas fa-moon"></i> Escuro
            </button>
            <button className={"seg-btn" + (tweaks.theme === "light" ? " active" : "")} onClick={() => setTweak("theme", "light")}>
              <i className="fas fa-sun"></i> Claro
            </button>
          </div>
        </div>

        <div className="tweak-field">
          <label>Sidebar</label>
          <div className="seg-row">
            <button className={"seg-btn" + (tweaks.sidebar === "full" ? " active" : "")} onClick={() => setTweak("sidebar", "full")}>Completa</button>
            <button className={"seg-btn" + (tweaks.sidebar === "collapsed" ? " active" : "")} onClick={() => setTweak("sidebar", "collapsed")}>Ícones</button>
          </div>
        </div>

        <div className="tweak-field">
          <label>Cor de destaque</label>
          <div className="swatch-row">
            {accentOptions.map((a) => (
              <div
                key={a.id}
                className={"swatch" + (tweaks.accent === a.id ? " active" : "")}
                title={a.name}
                style={{ background: a.color }}
                onClick={() => setTweak("accent", a.id)}
              />
            ))}
          </div>
        </div>

        <div className="tweak-field">
          <label>Layout do Dashboard</label>
          <div className="seg-row">
            <button className={"seg-btn" + (tweaks.dashLayout === "cards" ? " active" : "")} onClick={() => setTweak("dashLayout", "cards")}>Cards</button>
            <button className={"seg-btn" + (tweaks.dashLayout === "list" ? " active" : "")} onClick={() => setTweak("dashLayout", "list")}>Lista</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;