// Root app: routing + tweaks
const App = () => {
  const [page, setPage] = useState('login');
  const tweaks = (window.useTweaks ? window.useTweaks(window.TWEAK_DEFAULTS || {}) : [{}, () => {}]);
  const [t, setTweak] = tweaks;

  // Apply tweak side-effects
  useEffect(() => {
    if (t.primaryColor) {
      document.documentElement.style.setProperty('--color-accent', t.primaryColor);
      const hex = t.primaryColor;
      // derive a light variant
      try {
        const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
        document.documentElement.style.setProperty('--color-accent-light', `rgba(${r},${g},${b},0.13)`);
      } catch(e){}
    }
    document.body.classList.toggle('dense', t.density === 'dense');
  }, [t]);

  if (page === 'login') {
    return <LoginPage onEnter={() => setPage('dashboard')} />;
  }

  const Page = ({
    dashboard:     DashboardPage,
    conversations: ConversationsPage,
    tickets:       TicketsPage,
    ticket_detail: TicketDetailPage,
    technicians:   TechniciansPage,
    agents:        AgentsPage,
    reporting:     ReportingPage,
    billing:       BillingPage,
    admin:         AdminPage,
  }[page]) || DashboardPage;

  return (
    <>
      <div className="app">
        <Shell.Sidebar page={page} onNav={setPage}/>
        <div className="main">
          <Shell.Topbar page={page} onNav={setPage}/>
          <div className="content">
            <Page key={page} onNav={setPage} />
          </div>
        </div>
      </div>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Apariencia">
            <window.TweakColor label="Color primario" value={t.primaryColor} onChange={v => setTweak('primaryColor', v)} />
            <window.TweakRadio label="Densidad" value={t.density}
              options={[{ value:'comfortable', label:'Cómoda' },{ value:'dense', label:'Densa' }]}
              onChange={v => setTweak('density', v)} />
          </window.TweakSection>
          <window.TweakSection title="Navegación">
            <window.TweakSelect label="Pantalla activa" value={page}
              options={[
                { value:'login',         label:'Login' },
                { value:'dashboard',     label:'01 Dashboard' },
                { value:'conversations', label:'02 Conversaciones' },
                { value:'tickets',       label:'03 Tickets' },
                { value:'technicians',   label:'04 Técnicos' },
                { value:'agents',        label:'05 Agentes IA' },
                { value:'reporting',     label:'06 Reporting' },
                { value:'billing',       label:'07 Facturación' },
                { value:'admin',         label:'08 Administración' },
              ]}
              onChange={v => setPage(v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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