// Tweaks panel — shown when host toggles edit mode
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "userState": "returning",
  "accent": "lime"
}/*EDITMODE-END*/;

const TweaksPanel = ({ tweaks, setTweak, visible }) => {
  if (!visible) return null;
  return (
    <div className="fixed bottom-5 right-5 z-40 w-[300px] rounded-[12px] bg-panel hairline2 shadow-[0_20px_60px_-10px_rgba(0,0,0,0.8)] overflow-hidden fade-in">
      <div className="flex items-center justify-between px-4 h-10 border-b border-line">
        <span className="text-ink text-[12.5px] font-medium">Tweaks</span>
        <span className="text-mute2 text-[10.5px] font-mono">velyx</span>
      </div>
      <div className="p-4 space-y-5">
        <Tweak label="Estado do usuário" hint="D0 = ainda não começou nada">
          <Segmented value={tweaks.userState} onChange={v => setTweak('userState', v)}
            opts={[['returning','Retorno'],['new','D0 (novo)']]}/>
        </Tweak>
        <Tweak label="Cor de acento" hint="O acento aparece em CTAs e progresso">
          <Segmented value={tweaks.accent} onChange={v => setTweak('accent', v)}
            opts={[['lime','Lima'],['orange','Laranja']]}/>
        </Tweak>
      </div>
    </div>
  );
};

const Tweak = ({ label, hint, children }) => (
  <div>
    <div className="text-ink text-[12px] font-medium mb-0.5">{label}</div>
    {hint && <div className="text-mute2 text-[11px] mb-2">{hint}</div>}
    {children}
  </div>
);

const Segmented = ({ value, onChange, opts }) => (
  <div className="flex p-0.5 rounded-[6px] hairline bg-black/20">
    {opts.map(([v, label]) => (
      <button key={v} onClick={() => onChange(v)}
        className={`flex-1 h-7 rounded-[4px] text-[11.5px] t-fast
          ${value === v ? 'bg-white/[0.08] text-ink hairline2' : 'text-mute hover:text-ink'}`}>
        {label}
      </button>
    ))}
  </div>
);

const applyAccent = (accent) => {
  const root = document.documentElement;
  if (accent === 'orange') {
    root.style.setProperty('--accent', '#E8622C');
    // swap tailwind accent class runtime via CSS var
    const s = document.getElementById('accent-override') || document.createElement('style');
    s.id = 'accent-override';
    s.textContent = `
      .bg-accent { background-color: #E8622C !important; }
      .text-accent { color: #E8622C !important; }
      .border-accent { border-color: #E8622C !important; }
      .bg-accent\\/10 { background-color: rgba(232,98,44,0.1) !important; }
      .bg-accent\\/15 { background-color: rgba(232,98,44,0.15) !important; }
      .bg-accent\\/\\[0\\.06\\] { background-color: rgba(232,98,44,0.06) !important; }
      ::selection { background: #E8622C; color:#fff; }
    `;
    if (!s.parentNode) document.head.appendChild(s);
  } else {
    const s = document.getElementById('accent-override');
    if (s) s.remove();
  }
};

window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
window.TweaksPanel = TweaksPanel;
window.applyAccent = applyAccent;