// App principal — Login real JWT + Router ALMACO v2.0

const Login = ({onLogin}) => {
  const [email, setEmail] = useState("");
  const [pass, setPass]   = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError]  = useState("");
  const [showPass, setShowPass] = useState(false);

  const handleLogin = async () => {
    if (!email || !pass) { setError("Ingresa tu correo y contraseña."); return; }
    setLoading(true); setError("");
    try {
      const data = await window.API.login(email.trim(), pass);
      localStorage.setItem("almaco_token", data.token);
      localStorage.setItem("almaco_user", JSON.stringify(data.user));
      onLogin(data.user);
    } catch (e) {
      setError(e.message || "Error al conectar con el servidor.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-wrap">
      <div className="login-left">
        <div className="login-brand">
          <BrandLogo size="lg"/>
        </div>

        <div className="login-hero">
          <div className="login-eyebrow">Sistema interno · v2.0</div>
          <h1 className="login-title">
            Control de gastos<br/>
            <span className="muted">para cada obra,</span><br/>
            en tiempo real.
          </h1>
          <p className="login-desc">
            Dashboard ejecutivo, planillas con cálculo automático de carga patronal,
            transferencias bancarias y asistente con IA. Todo bajo
            <span style={{color:"var(--yellow)",fontFamily:"'JetBrains Mono',monospace"}}> app.almacosadecv.com</span>.
          </p>
          <div className="login-stat-row">
            <div className="login-stat">
              <div className="login-stat-val">16.25%</div>
              <div className="login-stat-lbl">Carga patronal</div>
            </div>
            <div className="login-stat">
              <div className="login-stat-val">ISSS</div>
              <div className="login-stat-lbl">7.5% patronal</div>
            </div>
            <div className="login-stat">
              <div className="login-stat-val">AFP</div>
              <div className="login-stat-lbl">8.75% patronal</div>
            </div>
            <div className="login-stat">
              <div className="login-stat-val">JWT</div>
              <div className="login-stat-lbl">Acceso seguro</div>
            </div>
          </div>
        </div>

        <div className="login-foot">
          <span><span className="dot"></span>Sistema activo</span>
          <span>ALMACO, S.A. de C.V. · 2026</span>
        </div>
      </div>

      <div className="login-right">
        <div className="login-form">
          <h2>Iniciar sesión</h2>
          <div className="sub">Ingresa con tu correo corporativo</div>

          {error && (
            <div style={{padding:"10px 14px",background:"var(--red-dim)",border:"1px solid rgba(248,81,73,0.3)",borderRadius:8,fontSize:13,color:"var(--red)",marginBottom:16,display:"flex",alignItems:"center",gap:8}}>
              <Icon name="x" size={14}/> {error}
            </div>
          )}

          <div className="form-row">
            <label className="form-label">Correo corporativo</label>
            <input
              className="form-input"
              type="email"
              value={email}
              onChange={e=>setEmail(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&handleLogin()}
              placeholder="usuario@almacosadecv.com"
              autoComplete="email"
            />
          </div>
          <div className="form-row">
            <label className="form-label">Contraseña</label>
            <div style={{position:"relative"}}>
              <input
                className="form-input"
                type={showPass?"text":"password"}
                value={pass}
                onChange={e=>setPass(e.target.value)}
                onKeyDown={e=>e.key==="Enter"&&handleLogin()}
                placeholder="••••••••••"
                autoComplete="current-password"
                style={{paddingRight:40}}
              />
              <button
                onClick={()=>setShowPass(!showPass)}
                style={{position:"absolute",right:12,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",color:"var(--text-3)",padding:4}}
              >
                <Icon name={showPass?"eyeoff":"eye"} size={15}/>
              </button>
            </div>
          </div>

          <button
            className="btn-primary"
            onClick={handleLogin}
            disabled={loading}
            style={{display:"flex",alignItems:"center",justifyContent:"center",gap:8}}
          >
            {loading ? <><Spinner size={16} color="#0A0A0A"/> Verificando…</> : <>Ingresar al sistema <Icon name="arrowright" size={14}/></>}
          </button>

          <div style={{marginTop:24,padding:"14px 16px",background:"var(--bg-3)",border:"1px solid var(--border)",borderRadius:10,fontSize:12,color:"var(--text-3)"}}>
            <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6,color:"var(--text-2)",fontWeight:600}}>
              <Icon name="shieldcheck" size={13}/> Acceso restringido
            </div>
            Este sistema es de uso exclusivo de colaboradores de ALMACO SA de CV.
            Contacta al administrador del sistema si necesitas acceso.
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  const [user, setUser]   = useState(null);
  const [route, setRoute] = useState("dashboard");

  // Restaurar sesión si hay token guardado
  useEffect(() => {
    const saved = localStorage.getItem("almaco_user");
    const tok   = localStorage.getItem("almaco_token");
    if (saved && tok) {
      try { setUser(JSON.parse(saved)); } catch {}
    }
  }, []);

  // Listener de logout por 401
  useEffect(() => {
    const handler = () => { setUser(null); setRoute("dashboard"); };
    window.addEventListener("almaco:logout", handler);
    return () => window.removeEventListener("almaco:logout", handler);
  }, []);

  // Listener para cambios de ruta disparados desde otras pantallas
  useEffect(() => {
    const handler = (e) => { if (e?.detail) setRoute(e.detail); };
    window.addEventListener("almaco:route", handler);
    return () => window.removeEventListener("almaco:route", handler);
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("almaco_token");
    localStorage.removeItem("almaco_user");
    setUser(null);
    setRoute("dashboard");
  };

  if (!user) return <Login onLogin={setUser}/>;

  // Si el rol no tiene acceso a la ruta actual, redirigir a dashboard
  const effectiveRoute = window.canSee(user.rol, route) ? route : "dashboard";

  const crumbsByRoute = {
    dashboard:      ["app.almaco", "Dashboard"],
    proyectos:      ["app.almaco", "Proyectos"],
    gastos:         ["app.almaco", "Gastos"],
    transferencias: ["app.almaco", "Finanzas", "Transferencias"],
    planillas:      ["app.almaco", "Planillas"],
    archivos:       ["app.almaco", "Archivos"],
    reportes:       ["app.almaco", "Reportes"],
    ia:             ["app.almaco", "IA Asistente"],
    config:         ["app.almaco", "Configuración"],
  };

  const screens = {
    dashboard:      <Dashboard user={user} setRoute={setRoute}/>,
    proyectos:      <Proyectos user={user} setRoute={setRoute}/>,
    gastos:         <Gastos user={user} setRoute={setRoute}/>,
    transferencias: <Transferencias user={user}/>,
    planillas:      <Planillas user={user}/>,
    archivos:       <Archivos user={user}/>,
    reportes:       <Reportes user={user} setRoute={setRoute}/>,
    ia:             <IAAsistente user={user}/>,
    config:         <Configuracion user={user} setRoute={setRoute}/>,
  };

  return (
    <div className="app">
      <Sidebar route={route} setRoute={setRoute} user={user} onLogout={handleLogout}/>
      <div className="main">
        <Topbar crumbs={crumbsByRoute[effectiveRoute] || []} user={user} setRoute={setRoute}/>
        {screens[effectiveRoute] || screens.dashboard}
      </div>
    </div>
  );
};

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

// Notificar al loading screen que React está montado
window.dispatchEvent(new CustomEvent('almaco:ready'));