const TweakDefaults = /*EDITMODE-BEGIN*/{
  "palette": "mint",
  "sign": "wood",
  "font": "rounded",
  "density": "cozy",
  "mode": "day"
}/*EDITMODE-END*/;

const applyAll = (s) => {
  const html = document.documentElement;
  html.setAttribute("data-palette", s.palette);
  html.setAttribute("data-sign", s.sign);
  html.setAttribute("data-font", s.font);
  html.setAttribute("data-mode", s.mode);
  html.style.setProperty("--density", s.density === "roomy" ? "1.25" : "1");
};

const Tweaks = ({ open, onClose }) => {
  const [s, setS] = React.useState(() => {
    try {
      const raw = localStorage.getItem("netdb-tweaks");
      if (raw) return { ...TweakDefaults, ...JSON.parse(raw) };
    } catch(e){}
    return TweakDefaults;
  });
  React.useEffect(() => {
    applyAll(s);
    try { localStorage.setItem("netdb-tweaks", JSON.stringify(s)); } catch(e){}
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: s }, "*");
    } catch(e){}
  }, [s]);

  if (!open) return null;

  const Group = ({ label, value, setValue, options }) => (
    <div className="group">
      <div className="group-label">{label}</div>
      <div className="row">
        {options.map(o => (
          <button key={o.v} className={"swatch" + (value === o.v ? " on" : "")} onClick={()=>setValue(o.v)}>{o.l}</button>
        ))}
      </div>
    </div>
  );

  return (
    <aside className="tweaks" role="dialog" aria-label="Tweaks">
      <button className="tweaks-close" onClick={onClose} aria-label="Close tweaks"><Icon name="close" size={14}/></button>
      <h5><span className="dot"/> Tweaks</h5>
      <Group label="Palette" value={s.palette} setValue={v=>setS({...s, palette:v})}
        options={[{v:"mint",l:"Mint"},{v:"sand",l:"Sand"},{v:"ocean",l:"Ocean"},{v:"forest",l:"Forest"}]} />
      <Group label="Signboard" value={s.sign} setValue={v=>setS({...s, sign:v})}
        options={[{v:"wood",l:"Wood"},{v:"plank",l:"Plank"},{v:"mint",l:"Plaque"},{v:"parchment",l:"Parchment"},{v:"outline",l:"Outline"}]} />
      <Group label="Typography" value={s.font} setValue={v=>setS({...s, font:v})}
        options={[{v:"rounded",l:"Serif+Sans"},{v:"warm",l:"Warm"},{v:"clean",l:"Clean"}]} />
      <Group label="Density" value={s.density} setValue={v=>setS({...s, density:v})}
        options={[{v:"cozy",l:"Cozy"},{v:"roomy",l:"Roomy"}]} />
      <Group label="Mode" value={s.mode} setValue={v=>setS({...s, mode:v})}
        options={[{v:"day",l:"Day"},{v:"night",l:"Night"}]} />
    </aside>
  );
};

// Bootstrap: apply defaults immediately (before user opens panel)
(() => {
  let s = { ...TweakDefaults };
  try {
    const raw = localStorage.getItem("netdb-tweaks");
    if (raw) s = { ...s, ...JSON.parse(raw) };
  } catch(e){}
  applyAll(s);
})();

window.Tweaks = Tweaks;