import { Navigate, Outlet, useLocation } from 'react-router';
import { useAuth } from './AuthContext';

export function ProtectedRoute() {
  const { loading, user } = useAuth();
  const location = useLocation();

  if (loading) {
    return <div className="full-screen-state"><span className="spinner" />Verificando sesión…</div>;
  }
  if (!user) return <Navigate to="/login" replace state={{ from: location.pathname }} />;
  if (user.mustChangePassword && location.pathname !== '/change-password') {
    return <Navigate to="/change-password" replace />;
  }
  return <Outlet />;
}

export function PermissionRoute({ permission }: { permission: string }) {
  const { hasPermission } = useAuth();
  return hasPermission(permission) ? <Outlet /> : <Navigate to="/sin-acceso" replace />;
}