'use client'

import { useSearchParams, useRouter } from 'next/navigation'
import { useEffect, Suspense } from 'react'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/shared/logo'
import { AlertCircle, Clock, Loader2 } from 'lucide-react'
import { AnimatedCard } from '@/components/shared/animated-container'

const errorMessages: Record<string, string> = {
  Configuration: 'There is a problem with the server configuration.',
  AccessDenied: 'You do not have access to this resource.',
  Verification: 'This sign-in link has expired or has already been used. Please request a new one.',
  Default: 'An error occurred during authentication.',
}

function AuthErrorContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const error = searchParams.get('error') || 'Default'
  const message = errorMessages[error] || errorMessages.Default
  const isExpired = error === 'Verification'

  useEffect(() => {
    if (isExpired) {
      const timer = setTimeout(() => {
        router.push('/login?expired=1')
      }, 5000)
      return () => clearTimeout(timer)
    }
  }, [isExpired, router])

  return (
    <AnimatedCard>
      <Card className="w-full max-w-md overflow-hidden">
        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
        <CardHeader className="text-center">
          <div className="mx-auto mb-4">
            <Logo variant="small" />
          </div>
          <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10">
            {isExpired ? (
              <Clock className="h-6 w-6 text-amber-600" />
            ) : (
              <AlertCircle className="h-6 w-6 text-destructive" />
            )}
          </div>
          <CardTitle className="text-xl">
            {isExpired ? 'Link Expired' : 'Authentication Error'}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 text-center">
          <p className="text-muted-foreground">{message}</p>
          {isExpired && (
            <p className="text-xs text-muted-foreground">
              Redirecting to login in 5 seconds...
            </p>
          )}
          <div className="flex gap-3 justify-center border-t pt-4">
            <Button asChild>
              <Link href="/login">
                {isExpired ? 'Sign In Again' : 'Return to Login'}
              </Link>
            </Button>
            {!isExpired && (
              <Button variant="outline" asChild>
                <Link href="/">Home</Link>
              </Button>
            )}
          </div>
        </CardContent>
      </Card>
    </AnimatedCard>
  )
}

export default function AuthErrorPage() {
  return (
    <Suspense
      fallback={
        <AnimatedCard>
          <Card className="w-full max-w-md overflow-hidden">
            <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
            <CardContent className="flex flex-col items-center justify-center py-12">
              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </CardContent>
          </Card>
        </AnimatedCard>
      }
    >
      <AuthErrorContent />
    </Suspense>
  )
}
