// Tweaks panel

const tweaksStyles = `
  .tweaks-panel {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    z-index: 95;
    overflow: hidden;
  }
  @keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .tweaks-panel .th {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .tweaks-panel .th h4 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .tweaks-body { padding: 10px 12px 12px; }
  .tweak-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
  }
  .tweak-row + .tweak-row { border-top: 1px dashed var(--line); }
  .swatch {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .14s;
  }
  .swatch.active { border-color: var(--ink); }
`;

if (!document.getElementById("tweak-styles")) {
  const s = document.createElement("style");
  s.id = "tweak-styles";
  s.textContent = tweaksStyles;
  document.head.appendChild(s);
}

const TweaksPanel = ({ visible, onClose, tweaks, setTweaks }) => {
  if (!visible) return null;
  const update = (patch) => {
    const next = {...tweaks, ...patch};
    setTweaks(next);
    window.parent.postMessage({type:"__edit_mode_set_keys", edits: patch}, "*");
  };
  return (
    <div className="tweaks-panel">
      <div className="th">
        <h4>Tweaks</h4>
        <button className="btn icon sm ghost" onClick={onClose}><I.x size={13}/></button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <span>Theme</span>
          <div className="seg">
            <button className={tweaks.theme === "light" ? "active" : ""} onClick={() => update({theme:"light"})}>Light</button>
            <button className={tweaks.theme === "dim" ? "active" : ""} onClick={() => update({theme:"dim"})}>Dim</button>
          </div>
        </div>
        <div className="tweak-row">
          <span>Density</span>
          <div className="seg">
            <button className={tweaks.density === "comfortable" ? "active" : ""} onClick={() => update({density:"comfortable"})}>Comfy</button>
            <button className={tweaks.density === "compact" ? "active" : ""} onClick={() => update({density:"compact"})}>Compact</button>
          </div>
        </div>
        <div className="tweak-row">
          <span>Feed layout</span>
          <div className="seg">
            <button className={tweaks.feedLayout === "grid" ? "active" : ""} onClick={() => update({feedLayout:"grid"})}>Grid</button>
            <button className={tweaks.feedLayout === "list" ? "active" : ""} onClick={() => update({feedLayout:"list"})}>List</button>
          </div>
        </div>
        <div className="tweak-row">
          <span>Accent</span>
          <div style={{display:"flex", gap:"6px"}}>
            {[
              {k:"amber", c:"#B8893A"},
              {k:"copper", c:"#B0593A"},
              {k:"ink", c:"#2D3748"},
              {k:"olive", c:"#6B7A38"},
            ].map(s => (
              <div key={s.k} className={`swatch ${tweaks.accent === s.k ? "active" : ""}`} style={{background: s.c}} onClick={() => update({accent: s.k})}/>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span>Account</span>
          <div className="seg">
            <button className={tweaks.signedIn ? "active" : ""} onClick={() => update({signedIn:true})}>Signed in</button>
            <button className={!tweaks.signedIn ? "active" : ""} onClick={() => update({signedIn:false})}>Anonymous</button>
          </div>
        </div>
        <div className="tweak-row">
          <span>Alerts rail</span>
          <Toggle on={tweaks.showAlertsRail} onChange={(v) => update({showAlertsRail: v})}/>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel });