'use client'

import { Suspense, useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { signIn } from 'next-auth/react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

function LoginForm() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const callbackUrl = searchParams.get('callbackUrl') || '/'
  const error = searchParams.get('error')

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [userType, setUserType] = useState<'customer' | 'staff'>('staff')
  const [isLoading, setIsLoading] = useState(false)
  const [loginError, setLoginError] = useState<string | null>(null)

  // 2FA state
  const [show2FA, setShow2FA] = useState(false)
  const [pendingToken, setPendingToken] = useState<string | null>(null)
  const [twoFactorCode, setTwoFactorCode] = useState('')
  const [useBackupCode, setUseBackupCode] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setLoginError(null)

    try {
      const result = await signIn('credentials', {
        email,
        password,
        userType,
        redirect: false,
        callbackUrl,
      })

      if (result?.error) {
        // Check if 2FA is required
        if (result.error.startsWith('2FA_REQUIRED:')) {
          const token = result.error.replace('2FA_REQUIRED:', '')
          setPendingToken(token)
          setShow2FA(true)
          setLoginError(null)
        } else {
          setLoginError(result.error)
        }
      } else if (result?.ok) {
        router.push(userType === 'staff' ? '/admin' : '/')
        router.refresh()
      }
    } catch {
      setLoginError('An unexpected error occurred')
    } finally {
      setIsLoading(false)
    }
  }

  const handle2FASubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setLoginError(null)

    try {
      const result = await signIn('credentials', {
        pendingToken,
        twoFactorToken: twoFactorCode.replace(/[\s-]/g, ''), // Remove spaces and dashes
        redirect: false,
        callbackUrl,
      })

      if (result?.error) {
        setLoginError(result.error)
      } else if (result?.ok) {
        router.push(userType === 'staff' ? '/admin' : '/')
        router.refresh()
      }
    } catch {
      setLoginError('An unexpected error occurred')
    } finally {
      setIsLoading(false)
    }
  }

  const handleBack = () => {
    setShow2FA(false)
    setPendingToken(null)
    setTwoFactorCode('')
    setUseBackupCode(false)
    setLoginError(null)
  }

  // 2FA verification form
  if (show2FA) {
    return (
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-center">
            Two-Factor Authentication
          </CardTitle>
          <CardDescription className="text-center">
            {useBackupCode
              ? 'Enter one of your backup codes'
              : 'Enter the code from your authenticator app'}
          </CardDescription>
        </CardHeader>
        <form onSubmit={handle2FASubmit}>
          <CardContent className="space-y-4">
            {loginError && (
              <div className="p-3 text-sm text-red-500 bg-red-50 rounded-md">
                {loginError}
              </div>
            )}

            <div className="space-y-2">
              <Label htmlFor="twoFactorCode">
                {useBackupCode ? 'Backup Code' : 'Authentication Code'}
              </Label>
              <Input
                id="twoFactorCode"
                type="text"
                inputMode="numeric"
                pattern={useBackupCode ? '[A-Za-z0-9\\s-]*' : '[0-9]*'}
                placeholder={useBackupCode ? 'XXXX-XXXX' : '123456'}
                value={twoFactorCode}
                onChange={(e) => setTwoFactorCode(e.target.value)}
                required
                autoComplete="one-time-code"
                autoFocus
              />
            </div>

            <Button
              type="button"
              variant="link"
              className="px-0 text-sm"
              onClick={() => {
                setUseBackupCode(!useBackupCode)
                setTwoFactorCode('')
              }}
            >
              {useBackupCode
                ? 'Use authenticator app instead'
                : 'Use a backup code'}
            </Button>
          </CardContent>

          <CardFooter className="flex flex-col gap-2">
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? 'Verifying...' : 'Verify'}
            </Button>
            <Button
              type="button"
              variant="outline"
              className="w-full"
              onClick={handleBack}
            >
              Back to login
            </Button>
          </CardFooter>
        </form>
      </Card>
    )
  }

  // Regular login form
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">
          LetsBe Hub
        </CardTitle>
        <CardDescription className="text-center">
          Sign in to your account
        </CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          {(error || loginError) && (
            <div className="p-3 text-sm text-red-500 bg-red-50 rounded-md">
              {error === 'CredentialsSignin'
                ? 'Invalid email or password'
                : loginError || error}
            </div>
          )}

          <div className="flex gap-2">
            <Button
              type="button"
              variant={userType === 'staff' ? 'default' : 'outline'}
              className="flex-1"
              onClick={() => setUserType('staff')}
            >
              Staff Login
            </Button>
            <Button
              type="button"
              variant={userType === 'customer' ? 'default' : 'outline'}
              className="flex-1"
              onClick={() => setUserType('customer')}
            >
              Customer Login
            </Button>
          </div>

          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              autoComplete="current-password"
            />
          </div>
        </CardContent>

        <CardFooter>
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? 'Signing in...' : 'Sign In'}
          </Button>
        </CardFooter>
      </form>
    </Card>
  )
}

function LoginFormSkeleton() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">
          LetsBe Hub
        </CardTitle>
        <CardDescription className="text-center">
          Loading...
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="h-10 bg-gray-200 rounded animate-pulse" />
        <div className="h-10 bg-gray-200 rounded animate-pulse" />
        <div className="h-10 bg-gray-200 rounded animate-pulse" />
      </CardContent>
    </Card>
  )
}

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <Suspense fallback={<LoginFormSkeleton />}>
        <LoginForm />
      </Suspense>
    </div>
  )
}