stack/apps/web/src/spa/guards.tsx

import type { ReactElement } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useSession } from '@/lib/auth-client';

export function GuestGuard(): ReactElement {
  const { data: session } = useSession();

  return session ? <Navigate to="/chat" replace /> : <Outlet />;
}

export function AuthGuard(): ReactElement {
  const { data: session, isPending } = useSession();

  if (isPending) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-sm text-text-muted">Loading...</div>
      </div>
    );
  }

  return session ? <Outlet /> : <Navigate to="/login" replace />;
}

export function AdminGuard(): ReactElement {
  const { data: session, isPending } = useSession();

  if (isPending) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-sm text-text-muted">Loading...</div>
      </div>
    );
  }

  if (!session) {
    return <Navigate to="/login" replace />;
  }

  const user = session.user as typeof session.user & { role?: string };

  return user.role === 'admin' ? <Outlet /> : <Navigate to="/" replace />;
}