const VerifyGate = () => {
  const {user, toast, setUser, logout} = useApp();
  const [sent, setSent] = useState(false);
  const [checking, setChecking] = useState(false);
  const resend = async () => {
    try { await api.resendVerify(); toast('Email de verificacion reenviado'); setSent(true); }
    catch(e) {
      if (e && (e.status === 401 || e.error === 'unauthorized')) { toast('Tu sesión ha caducado. Vuelve a iniciar sesión.'); await logout(); }
      else { toast('No se pudo reenviar. Inténtalo de nuevo en unos segundos.'); }
    }
  };
  const checkNow = async () => {
    setChecking(true);
    try {
      const r = await api.me();
      if (r && r.user && r.user.email_verified) {
        setUser(u => ({...u, email_verified: true}));
        try { const s=JSON.parse(localStorage.getItem('ap_user')||'{}'); s.email_verified=true; localStorage.setItem('ap_user',JSON.stringify(s)); } catch(e){}
        toast('Email verificado');
      } else { toast('Aun no verificado — revisa tu bandeja (y spam)'); }
    } catch(e) {
      // Nunca tragarse el error: el piloto se quedaba atrapado en esta pantalla.
      // Si la sesión caducó (401), la única salida fiable es volver a iniciar sesión:
      // el login devuelve el email_verified real de la BD y desbloquea la cuenta.
      if (e && (e.status === 401 || e.error === 'unauthorized')) {
        toast('Tu sesión ha caducado. Vuelve a iniciar sesión para continuar.');
        await logout();
      } else {
        toast('No se pudo comprobar. Revisa tu conexión e inténtalo de nuevo.');
      }
    } finally {
      setChecking(false);
    }
  };
  return <div style={{minHeight:'100dvh',display:'flex',padding:'40px 20px',background:'var(--bg)',boxSizing:'border-box'}}>
    <div style={{width:'100%',maxWidth:420,textAlign:'center',margin:'auto'}}>
      <div style={{marginBottom:24}}><LogoMark size={48}/></div>
      <h1 className="display" style={{fontSize:26,marginBottom:8}}>Confirma tu email</h1>
      <p style={{color:'var(--ink-dim)',fontSize:14,lineHeight:1.6,marginBottom:8}}>Hemos enviado un enlace de verificacion a:</p>
      <p style={{fontWeight:600,fontSize:16,marginBottom:24}}>{user.email}</p>
      <p style={{color:'var(--ink-dim)',fontSize:13,lineHeight:1.5,marginBottom:28}}>Revisa tu bandeja de entrada (y spam). Pulsa el enlace del email para activar tu cuenta.</p>
      <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
        <button className="btn btn-primary" onClick={checkNow} disabled={checking}>{checking ? '...' : 'Ya lo verifique'}</button>
        <button className="btn btn-ghost" onClick={resend} disabled={sent}>{sent ? 'Enviado' : 'Reenviar email'}</button>
      </div>
      <div style={{marginTop:20,fontSize:13,color:'var(--ink-dim)'}}>
        ¿Otra cuenta o sesión caducada? <button onClick={logout} style={{color:'var(--accent)',fontWeight:600}}>Cerrar sesión</button>
      </div>
    </div>
  </div>;
};

const App = () => {
  const {route, user} = useApp();
  const needsAuth = ['dashboard','plan-editor','send-flow','history','profile','admin','ifr-table'].includes(route.screen);
  const effective = (!user && needsAuth) ? 'landing' : route.screen;
  const needsVerify = user && !user.email_verified && user.role !== 'admin' && effective !== 'landing' && effective !== 'auth';
  return <div className="app-root">
    <Toasts/>
    {needsVerify ? <VerifyGate/> : <>
    {user && effective!=='landing' && effective!=='auth' && <TopNav/>}
    {effective==='landing' && <Landing/>}
    {effective==='auth' && <Auth/>}
    {effective==='dashboard' && <Dashboard/>}
    {effective==='plan-editor' && <PlanEditor/>}
    {effective==='send-flow' && <SendFlow/>}
    {effective==='history' && <History/>}
    {effective==='profile' && <Profile/>}
    {effective==='admin' && <Admin/>}
    {effective==='ifr-table' && <IfrTable/>}
    {user && effective!=='landing' && effective!=='auth' && <MobileTabBar/>}
    <Tweaks/>
    </>}
  </div>;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AppProvider><App/></AppProvider>);