/* Tweaks island — applies live theme changes to :root.
   Mounts ONLY the floating panel; the page itself stays plain editable HTML. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "escuro",
  "direction": "vivido",
  "accent": "#0EA5C9",
  "display": "Sora",
  "motion": true
}/*EDITMODE-END*/;

/* ---- color helpers ---- */
function hexToRgb(h){ h=h.replace('#',''); if(h.length===3) h=h.replace(/./g,c=>c+c);
  const n=parseInt(h,16); return [(n>>16)&255,(n>>8)&255,n&255]; }
function rgbToHex(r,g,b){ return '#'+[r,g,b].map(x=>Math.max(0,Math.min(255,Math.round(x))).toString(16).padStart(2,'0')).join(''); }
function mix(hex,target,amt){ const [r,g,b]=hexToRgb(hex),[tr,tg,tb]=hexToRgb(target);
  return rgbToHex(r+(tr-r)*amt, g+(tg-g)*amt, b+(tb-b)*amt); }
function rgba(hex,a){ const [r,g,b]=hexToRgb(hex); return `rgba(${r},${g},${b},${a})`; }

/* accent palette derived from the active theme */
function applyAccent(theme, hex){
  const r=document.documentElement.style;
  let accent, deep, soft, glow;
  if(theme==='mono'){
    accent='#1A1D21'; deep='#0B0D0F'; soft='#ECEDEE'; glow='rgba(20,23,27,.10)';
  } else if(theme==='escuro'){
    accent=mix(hex,'#ffffff',0.06); deep=mix(hex,'#ffffff',0.20);
    soft=rgba(hex,0.14); glow=rgba(hex,0.26);
  } else { /* cor */
    accent=hex; deep=mix(hex,'#000000',0.28); soft=mix(hex,'#ffffff',0.90); glow=rgba(hex,0.18);
  }
  r.setProperty('--accent', accent);
  r.setProperty('--accent-deep', deep);
  r.setProperty('--accent-soft', soft);
  r.setProperty('--accent-glow', glow);
}

const ACCENTS = ['#00B4A6','#0EA5C9','#1E73E8','#0FA968','#7C5CFF'];
const FONTS = [
  { value:'Space Grotesk', label:'Grotesk' },
  { value:'Sora',          label:'Sora' },
  { value:'DM Sans',       label:'DM Sans' },
];

function ThemeBridge(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{ document.body.setAttribute('data-theme', t.theme); }, [t.theme]);
  React.useEffect(()=>{ document.body.setAttribute('data-direction', t.direction); }, [t.direction]);
  React.useEffect(()=>{
    applyAccent(t.theme, t.accent);
    if(window.__sinalysRefreshMotion) window.__sinalysRefreshMotion();
  }, [t.theme, t.accent]);
  React.useEffect(()=>{ document.documentElement.style.setProperty('--display', `'${t.display}', system-ui, sans-serif`); }, [t.display]);
  React.useEffect(()=>{
    document.body.setAttribute('data-motion', t.motion ? 'on' : 'off');
    if(window.__sinalysRefreshMotion) window.__sinalysRefreshMotion();
  }, [t.motion]);

  const themeNote = {
    cor: 'Claro · acento em cor',
    mono: 'Monocromático · grafite e cinzas',
    escuro: 'Tema escuro · acento luminoso',
  }[t.theme];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tema" />
      <TweakRadio label="Tema" value={t.theme}
        options={[{value:'cor',label:'Cor'},{value:'mono',label:'Mono'},{value:'escuro',label:'Escuro'}]}
        onChange={v=>setTweak('theme',v)} />
      <p style={{font:'10.5px/1.4 ui-monospace,monospace',color:'rgba(41,38,27,.5)',margin:'-2px 0 2px'}}>{themeNote}</p>

      {t.theme!=='mono' && (
        <React.Fragment>
          <TweakSection label="Cor de destaque" />
          <TweakColor label="Acento" value={t.accent} options={ACCENTS}
            onChange={v=>setTweak('accent',v)} />
        </React.Fragment>
      )}

      <TweakSection label="Forma" />
      <TweakRadio label="Cantos" value={t.direction}
        options={[{value:'horizonte',label:'Suave'},{value:'blueprint',label:'Reto'},{value:'vivido',label:'Médio'}]}
        onChange={v=>setTweak('direction',v)} />

      <TweakSection label="Tipografia" />
      <TweakRadio label="Títulos" value={t.display} options={FONTS}
        onChange={v=>setTweak('display',v)} />

      <TweakSection label="Movimento" />
      <TweakToggle label="Animações" value={t.motion}
        onChange={v=>setTweak('motion',v)} />
    </TweaksPanel>
  );
}

/* apply persisted defaults immediately on load (before panel opens) */
document.body.setAttribute('data-theme', TWEAK_DEFAULTS.theme);
document.body.setAttribute('data-direction', TWEAK_DEFAULTS.direction);
document.body.setAttribute('data-motion', TWEAK_DEFAULTS.motion ? 'on' : 'off');
applyAccent(TWEAK_DEFAULTS.theme, TWEAK_DEFAULTS.accent);
document.documentElement.style.setProperty('--display', `'${TWEAK_DEFAULTS.display}', system-ui, sans-serif`);

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<ThemeBridge />);