// App entry — wires everything together
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F5A524",
  "density": "comfortable",
  "showCopilot": true
}/*EDITMODE-END*/;

function App(){
  const [active, setActive] = React.useState('dashboard');
  const [theme, setTheme] = React.useState('light');
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [copilotOpen, setCopilotOpen] = React.useState(false);
  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const { toasts, push } = window.useToasts();
  const [tweaks, setTweak] = (window.useTweaks || (()=>[TWEAK_DEFAULTS,()=>{}]))(TWEAK_DEFAULTS);

  // theme
  React.useEffect(()=>{
    document.documentElement.setAttribute('data-theme', theme);
  },[theme]);

  // accent
  React.useEffect(()=>{
    document.documentElement.style.setProperty('--amber', tweaks.accent);
  },[tweaks.accent]);

  // cmd+k
  React.useEffect(()=>{
    const onKey = (e) => {
      if((e.metaKey||e.ctrlKey) && e.key.toLowerCase()==='k'){
        e.preventDefault();
        setCmdOpen(o=>!o);
      }
    };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  },[]);

  const onAction = (item) => {
    if(item.type==='action'){
      if(item.id==='copilot'){ setCopilotOpen(true); return; }
      if(item.id==='sync'){ push('Sincronización iniciada'); return; }
      if(item.id==='export'){ push('Reporte exportado'); return; }
      push(`Acción: ${item.label}`);
    } else if(item.type==='sku'){
      setActive('inventory');
    } else if(item.type==='store'){
      setActive('stores');
    }
  };

  const Page = (() => {
    switch(active){
      case 'dashboard': return <window.PageDashboard pushToast={push} onNav={setActive}/>;
      case 'inventory': return <window.PageInventory pushToast={push}/>;
      case 'sales': return <window.PageSales/>;
      case 'forecasts': return <window.PageForecasts pushToast={push}/>;
      case 'alerts': return <window.PageAlerts pushToast={push}/>;
      case 'reports': return <window.PageReports pushToast={push}/>;
      case 'stores': return <window.PageStores pushToast={push}/>;
      case 'products': return <window.PageProducts pushToast={push}/>;
      case 'suppliers': return <window.PageSuppliers pushToast={push}/>;
      case 'users': return <window.PageUsers pushToast={push}/>;
      case 'integrations': return <window.PageIntegrations pushToast={push}/>;
      case 'settings': return <window.PageSettings pushToast={push} theme={theme} onTheme={()=>setTheme(t=>t==='light'?'dark':'light')}/>;
      default: return null;
    }
  })();

  // Tweaks panel
  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;

  return (
    <>
      <div className="app">
        <window.Sidebar active={active} onNav={(id)=>{setActive(id); setSidebarOpen(false); window.scrollTo({top:0});}} open={sidebarOpen} onClose={()=>setSidebarOpen(false)}/>
        <div className="main">
          <window.Topbar
            active={active}
            theme={theme}
            onTheme={()=>setTheme(t=>t==='light'?'dark':'light')}
            onCmdK={()=>setCmdOpen(true)}
            onAlerts={()=>setActive('alerts')}
            onToggleCopilot={()=>setCopilotOpen(o=>!o)}
            onMenuToggle={()=>setSidebarOpen(o=>!o)}
          />
          <main className="content" data-screen-label={active}>{Page}</main>
        </div>
      </div>

      <window.CmdPalette open={cmdOpen} onClose={()=>setCmdOpen(false)} onNav={(id)=>{setActive(id); push('Navegando...');}} onAction={onAction}/>
      <window.Copilot open={copilotOpen} onClose={()=>setCopilotOpen(false)}/>
      <window.CopilotFab onClick={()=>setCopilotOpen(o=>!o)} hidden={copilotOpen || !tweaks.showCopilot}/>
      <window.Toasts toasts={toasts}/>

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Apariencia">
            <TweakColor label="Color de acento" value={tweaks.accent} onChange={v=>setTweak('accent', v)} presets={['#F5A524','#2563EB','#16A34A','#DC2626','#7C3AED','#EA580C']}/>
            <TweakRadio label="Tema" value={theme} options={[{value:'light',label:'Claro'},{value:'dark',label:'Oscuro'}]} onChange={setTheme}/>
          </TweakSection>
          <TweakSection title="Funciones">
            <TweakToggle label="Mostrar Copilot flotante" value={tweaks.showCopilot} onChange={v=>setTweak('showCopilot', v)}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);