// App root — wires sidebar + topbar + active module + mobile drawer
const MODULE_LABELS = {
  dashboard:   'Dashboard RRHH',
  employees:   'Empleados',
  'solicitudes-personal': 'Solicitudes de personal',
  recruit:     'Reclutamiento',
  onboarding:  'Onboarding',
  orgchart:    'Organigrama',
  docs:        'Documentos',
  training:    'Formación y desarrollo',
  performance: 'Desempeño',
  sst:         'SST',
  'salud-ocupacional': 'Salud ocupacional',
  'gestion-riesgo':    'Gestión del riesgo',
  estrategico:         'Estratégica',
  epp:         'Dotación y EPP',
  'time-off':  'Gestión de ausencias',
  comms:       'Comunicaciones',
  payroll:     'Nómina',
  benefits:    'Beneficios',
  wellness:    'Bienestar',
  reports:     'Reportes',
  automation:  'Motor de Automatización',
  portal:      'Portal del Colaborador',
  profile:     'Mi Perfil',
  design:      'Sistema de diseño',
  settings:    'Configuración',
};

const PLACEHOLDER_COPY = {
  benefits:    { title: 'Beneficios',                  description: 'Catálogo de beneficios y elegibilidad por convenio.' },
};

// Top 5 most-used admin modules for the mobile bottom tab bar
const MOB_TABS = [
  ['dashboard',  'Inicio',     'IconHome'],
  ['employees',  'Empleados',  'IconUsers'],
  ['docs',       'Docs',       'IconDoc'],
  ['onboarding', 'Onboarding', 'IconRocket'],
  ['reports',    'Reportes',   'IconBarChart'],
];

const App = () => {
  const [active, setActive]       = React.useState('dashboard');
  const [collapsed, setCollapsed] = React.useState(false);
  const [selectedEmp, setSelectedEmp] = React.useState(null);
  const [openNotif, setOpenNotif] = React.useState(false);
  const [openUser, setOpenUser]   = React.useState(false);
  const [mobDrawer, setMobDrawer] = React.useState(false);
  const [currentRole, setCurrentRole] = React.useState('admin');

  React.useEffect(() => {
    if (active !== 'employees') setSelectedEmp(null);
  }, [active]);

  // Close drawer when navigating. Si Mi perfil tiene cambios sin guardar
  // (window.__hasUnsavedProfileChanges, ver components/my-profile.jsx),
  // confirma antes de salir del módulo — mismo guard para clics del sidebar,
  // window.__navigateToModule y el cambio de rol (ver changeRole más abajo).
  const navigate = (id) => {
    if (id !== active && window.__hasUnsavedProfileChanges) {
      if (!window.confirm('Se limpiarán todos los cambios no guardados en Mi perfil. ¿Deseas salir de todas formas?')) return;
      window.__hasUnsavedProfileChanges = false;
    }
    setActive(id);
    setMobDrawer(false);
  };
  const changeRole = (role) => {
    if (role !== currentRole && window.__hasUnsavedProfileChanges) {
      if (!window.confirm('Se limpiarán todos los cambios no guardados en Mi perfil. ¿Deseas cambiar de rol de todas formas?')) return;
      window.__hasUnsavedProfileChanges = false;
    }
    setCurrentRole(role);
  };

  // Helper global: cualquier módulo puede saltar a la ficha de un empleado.
  // Uso: window.__navigateToEmployee(empId) — desde Nine Box, Análisis, etc.
  React.useEffect(() => {
    window.__navigateToEmployee = (empId) => {
      setActive('employees');
      setSelectedEmp(empId);
    };
    return () => { delete window.__navigateToEmployee; };
  }, []);

  // Helper global: navega a otro módulo, opcionalmente con una pista que el
  // módulo destino lee una vez y descarta (ej. abrir una pestaña o resaltar
  // un registro). Uso: window.__navigateToModule('orgchart', { tab: 'aprobado', focusCode: 'POS-010347' })
  React.useEffect(() => {
    window.__navigateToModule = (moduleId, hint) => {
      if (hint) window.__pendingModuleHint = hint;
      navigate(moduleId);
    };
    return () => { delete window.__navigateToModule; };
  }, [active]);

  const renderModule = () => {
    switch (active) {
      case 'dashboard':   return <Dashboard currentRole={currentRole} />;
      case 'employees':
        return selectedEmp
          ? <EmployeeDetail employeeId={selectedEmp} onBack={() => setSelectedEmp(null)} />
          : <EmployeeList onSelect={(id) => setSelectedEmp(id)} />;
      case 'solicitudes-personal': return <SolicitudesPersonal />;
      case 'onboarding':  return <Onboarding />;
      case 'orgchart':    return <OrgChart />;
      case 'docs':        return <Documents />;
      case 'training':    return <Training currentRole={currentRole} />;
      case 'sst':         return <SST />;
      case 'salud-ocupacional': return <SSTSaludOcupacional />;
      case 'gestion-riesgo':    return <SSTGestionRiesgo />;
      case 'estrategico':       return <SSTEstrategico />;
      case 'epp':         return <EPP />;
      case 'recruit':     return <ATS />;
      case 'performance': return <Performance />;
      case 'time-off':    return <TimeOff />;
      case 'comms':       return <Comms />;
      case 'benefits':    return <Benefits />;
      case 'wellness':    return <Wellness />;
      case 'payroll':     return <Payroll />;
      case 'portal':      return <Portal />;
      case 'profile':     return <MyProfile currentRole={currentRole} />;
      case 'reports':     return <Reports />;
      case 'design':      return <DesignSystem />;
      case 'settings':    return <Settings />;
      case 'automation':  return <Automation />;
      default: {
        const copy = PLACEHOLDER_COPY[active] || { title: MODULE_LABELS[active] || 'Módulo', description: 'Módulo en construcción.' };
        return <Placeholder title={copy.title} description={copy.description} />;
      }
    }
  };

  return (
    <div className={`app ${collapsed ? 'collapsed' : ''} ${mobDrawer ? 'mob-drawer-open' : ''}`}>
      <Sidebar active={active} setActive={navigate} collapsed={collapsed} setCollapsed={setCollapsed} currentRole={currentRole} />
      <div className="mob-drawer-backdrop" onClick={() => setMobDrawer(false)} />
      <div>
        <Topbar
          activeLabel={MODULE_LABELS[active] || 'Inicio'}
          openNotif={openNotif} setOpenNotif={setOpenNotif}
          openUser={openUser}   setOpenUser={setOpenUser}
          onBurger={() => setMobDrawer(true)}
          currentRole={currentRole}
          setCurrentRole={changeRole}
        />
        {renderModule()}

        <nav className="mob-bottom-nav">
          {MOB_TABS.map(([id, label, icon]) => {
            const I = window[icon];
            return (
              <button key={id} className={active === id ? 'active' : ''} onClick={() => navigate(id)}>
                <I size={18} />
                <span>{label}</span>
              </button>
            );
          })}
        </nav>
      </div>
    </div>
  );
};

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