import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate, useLocation } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ExplorarPage from './pages/ExplorarPage';
import VehiculoDetailPage from './pages/VehiculoDetailPage';
import PublicarAvisoPage from './pages/PublicarAvisoPage';
import MisAvisosPage from './pages/MisAvisosPage';
import SuccessPage from './pages/SuccessPage';
import AdminPage from './pages/AdminPage';
import LoginModal from './components/LoginModal';
import { type UserSession } from './services/auth.service';
import VerifyEmailPage from './pages/VerifyEmailPage';
import ResetPasswordPage from './pages/ResetPasswordPage';
import PerfilPage from './pages/PerfilPage';
import SeguridadPage from './pages/SeguridadPage';
import { FaHome, FaSearch, FaCar, FaUser, FaShieldAlt } from 'react-icons/fa';
import { initMercadoPago } from '@mercadopago/sdk-react';
import { AuthProvider, useAuth } from './context/AuthContext';
import ConfirmEmailChangePage from './pages/ConfirmEmailChangePage';
function AdminGuard({ children }: { children: React.ReactNode }) {
const { user, loading } = useAuth();
if (loading) return
;
if (!user || user.userType !== 3) return ;
return <>{children}>;
}
// COMPONENTE NAVBAR CON DROPDOWN
function Navbar() {
const { user, logout, login, unreadCount } = useAuth();
const [showLoginModal, setShowLoginModal] = useState(false);
const [showUserMenu, setShowUserMenu] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false);
const isAdmin = user?.userType === 3;
const navigate = useNavigate();
const location = useLocation();
const handleLogout = () => {
logout();
setShowUserMenu(false);
setShowMobileMenu(false);
navigate('/');
};
const handleMobileNavClick = (path: string) => {
setShowMobileMenu(false);
navigate(path);
};
const handleLoginSuccess = (userSession: UserSession) => {
login(userSession);
setShowLoginModal(false);
};
const getLinkClass = (path: string) => {
const isActive = location.pathname === path;
return `transition-all duration-300 font-bold tracking-widest text-s hover:text-white ${isActive ? 'text-blue-400 drop-shadow-[0_0_8px_rgba(59,130,246,0.5)]' : 'text-gray-300'}`;
};
return (
<>
{/* Menú móvil overlay MODERNIZADO */}
{showMobileMenu && (
{isAdmin && (
)}
)}
{showLoginModal && (
setShowLoginModal(false)}
/>
)}
>
);
}
function FooterLegal() {
const currentYear = new Date().getFullYear();
const baseEdition = 5858;
const baseDate = new Date('2026-01-21T00:00:00');
const today = new Date();
today.setHours(0, 0, 0, 0);
baseDate.setHours(0, 0, 0, 0);
const diffTime = today.getTime() - baseDate.getTime();
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const currentEdition = baseEdition + (diffDays > 0 ? diffDays : 0);
return (
);
}
function MainLayout() {
const { loading } = useAuth();
if (loading) {
return (
);
}
return (
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
);
}
function App() {
useEffect(() => {
const mpPublicKey = import.meta.env.VITE_MP_PUBLIC_KEY;
if (mpPublicKey) initMercadoPago(mpPublicKey);
}, []);
return (
);
}
export default App;