// ============ Tweaks panel ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "comfortable",
  "language": "es"
}/*EDITMODE-END*/;

const TweaksPanel = ({ open, onClose, settings, setSettings, t }) => {
  if (!open) return null;
  const update = (k, v) => {
    setSettings(s => ({ ...s, [k]: v }));
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  return (
    <div className="tweaks-panel" onClick={(e) => e.stopPropagation()}>
      <div className="tweaks-panel-hd">
        <Icon name="sliders" size={14}/> {t("tweaks")}
        <div style={{ flex: 1 }}/>
        <Button variant="ghost" size="sm" icon="x" onClick={onClose}/>
      </div>
      <div className="tweaks-panel-bd">
        <div className="tweaks-row">
          <div className="label">{t("theme")}</div>
          <div className="seg-mini">
            <button className={settings.theme === "dark" ? "active" : ""} onClick={() => update("theme", "dark")}><Icon name="moon" size={12}/> {t("dark")}</button>
            <button className={settings.theme === "light" ? "active" : ""} onClick={() => update("theme", "light")}><Icon name="sun" size={12}/> {t("light")}</button>
          </div>
        </div>
        <div className="tweaks-row">
          <div className="label">{t("density")}</div>
          <div className="seg-mini">
            <button className={settings.density === "comfortable" ? "active" : ""} onClick={() => update("density", "comfortable")}>{t("comfortable")}</button>
            <button className={settings.density === "compact" ? "active" : ""} onClick={() => update("density", "compact")}>{t("compact")}</button>
          </div>
        </div>
        <div className="tweaks-row">
          <div className="label">{t("language")}</div>
          <div className="seg-mini">
            <button className={settings.language === "es" ? "active" : ""} onClick={() => update("language", "es")}>Español</button>
            <button className={settings.language === "en" ? "active" : ""} onClick={() => update("language", "en")}>English</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel, TWEAK_DEFAULTS });