// app/login/unauthorized/page.tsx
'use client';
import { AlertCircle } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { signOut } from 'next-auth/react';
import { useEffect } from 'react';

export default function UnauthorizedPage() {
  // Clear any partial session data when landing on this page
  useEffect(() => {
    signOut({ redirect: false });
  }, []);
  return (
    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
      <div className="flex w-full max-w-sm flex-col gap-6">
        <div className="flex items-center gap-2 self-center font-medium">
          <AlertCircle className="h-6 w-6 text-destructive" />
          <span>Access Denied</span>
        </div>
        <Card>
          <CardHeader className="text-center">
            <CardTitle className="text-xl">Not Registered</CardTitle>
            <CardDescription>
              Your email is not registered to access this platform.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="rounded-lg bg-muted p-4 text-sm">
              <p className="mb-2 font-medium">What does this mean?</p>
              <p className="text-muted-foreground">
                This is a university-only platform. If you believe you should have access, please contact your administrator or department coordinator.
              </p>
            </div>
            <div className="flex gap-2">
              <Link href="/login" className="flex-1">
                <Button type="button" variant="outline" className="w-full">
                  Try Another Email
                </Button>
              </Link>
              <Link href="/" className="flex-1">
                <Button type="button" className="w-full">
                  Go Home
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}