// src/App.jsx
import { useState, useEffect } from "react";
import { useAuth } from "./lib/auth";
import Sidebar from "./components/Sidebar";
import Login from "./pages/Login";
import Ocupabilidad from "./pages/Ocupabilidad";
import Ventas from "./pages/Ventas";
import Comisiones from "./pages/Comisiones";
import Cobranza from "./pages/Cobranza";
import Rentabilidad from "./pages/Rentabilidad";
import Asesores from "./pages/Asesores";
import Usuarios from "./pages/Usuarios";

export default function App() {
  const { autenticado, cargando, permisos, puedeVer } = useAuth();
  const [pagina, setPagina] = useState(null);

  // Al entrar, seleccionar el primer módulo permitido
  useEffect(() => {
    if (autenticado && permisos.length > 0 && !pagina) {
      setPagina(permisos[0]);
    }
    if (!autenticado) setPagina(null);
  }, [autenticado, permisos, pagina]);

  if (cargando) {
    return (
      <div style={{ minHeight:"100vh", display:"flex", alignItems:"center", justifyContent:"center", background:"#0f172a", color:"#fff" }}>
        Cargando...
      </div>
    );
  }

  if (!autenticado) return <Login />;

  function render() {
    // Seguridad: si la página actual no está permitida, no renderizar
    if (pagina && !puedeVer(pagina)) return <SinAcceso />;
    switch (pagina) {
      case "ocupabilidad": return <Ocupabilidad />;
      case "ventas":       return <Ventas />;
      case "comisiones":   return <Comisiones />;
      case "cobranza":     return <Cobranza />;
      case "rentabilidad": return <Rentabilidad />;
      case "asesores":     return <Asesores />;
      case "usuarios":     return <Usuarios />;
      default:             return null;
    }
  }

  return (
    <div className="app">
      <Sidebar active={pagina} onChange={setPagina} />
      <main className="main">{render()}</main>
    </div>
  );
}

function SinAcceso() {
  return (
    <div style={{ padding:40, textAlign:"center", color:"#94a3b8" }}>
      🔒 No tienes acceso a este módulo.
    </div>
  );
}