/* global React, ReactDOM, ScreenInicio, ScreenAgente, ScreenIntegraciones, ScreenLeads, ScreenCampanasDetalle, ScreenConfiguracion, ScreenInbox, ScreenReportes, ScreenClientes, SaoriShell, SaoriIcons */

const { useState, useEffect } = React;
const { Sidebar, Topbar } = SaoriShell;

const SCREEN_TO_NAV = {
  inicio: 'inicio',
  inbox: 'inbox',
  leads: 'leads',
  agentes: 'agentes',
  campanas: 'campanas',
  clientes: 'clientes',
  integraciones: 'integraciones',
  reportes: 'reportes',
  configuracion: 'configuracion',
};

function App() {
  const [route, setRoute] = useState(() => {
    const h = location.hash.replace('#', '');
    return Object.keys(SCREEN_TO_NAV).includes(h) ? h : 'inicio';
  });
  const [toastMsg, setToastMsg] = useState(null);

  useEffect(() => {
    location.hash = route;
  }, [route]);

  useEffect(() => {
    if (!toastMsg) return;
    const t = setTimeout(() => setToastMsg(null), 2200);
    return () => clearTimeout(t);
  }, [toastMsg]);

  const toast = (m) => setToastMsg(m);
  const nav = (r) => setRoute(r);

  let screen;
  switch (route) {
    case 'inicio':         screen = <ScreenInicio onNavigate={nav} toast={toast} />; break;
    case 'agentes':        screen = <ScreenAgente toast={toast} />; break;
    case 'integraciones':  screen = <ScreenIntegraciones />; break;
    case 'leads':          screen = <ScreenLeads toast={toast} />; break;
    case 'campanas':       screen = <ScreenCampanasDetalle toast={toast} />; break;
    case 'configuracion':  screen = <ScreenConfiguracion toast={toast} />; break;
    case 'inbox':          screen = <ScreenInbox toast={toast} />; break;
    case 'clientes':       screen = <ScreenClientes toast={toast} />; break;
    case 'reportes':       screen = <ScreenReportes />; break;
    default:               screen = <ScreenInicio onNavigate={nav} toast={toast} />;
  }

  return (
    <div className="app" data-screen-label={`Pantalla — ${route}`}>
      <Sidebar current={route} onNavigate={nav} />
      <div className="main">
        <Topbar />
        {screen}
      </div>
      {toastMsg && (
        <div className="toast">
          <SaoriIcons.Check size={15} strokeWidth={2.6} />
          <span>{toastMsg}</span>
        </div>
      )}
    </div>
  );
}

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