'use client'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useRouter, useSearchParams } from 'next/navigation'
import { useState } from 'react'
import { useGlobal } from '@/providers/GlobalProvider'
import { Loader2 } from 'lucide-react'
import { toast } from 'sonner'

export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
  const router = useRouter()
  const { setUser } = useGlobal()
  const [isLoading, setIsLoading] = useState(false)
  const searchParams = useSearchParams()

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    if (!isLoading) {
      const formData = new FormData(e.currentTarget)
      const email = String(formData.get('email'))
      const password = String(formData.get('password'))

      if (!email || !password) return

      setIsLoading(true)

      try {
        const loginReq = await fetch('/api/users/login', {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            email,
            password,
          }),
        })
        const loginResponse = await loginReq.json()

        if (loginResponse.errors?.length) {
          loginResponse.errors.forEach((e: Error) => {
            toast(e.message)
          })
        }

        if (loginResponse.user) setUser(loginResponse.user)

        if (loginResponse.token) router.push(searchParams.get('redirectUrl') || '/')
      } catch (error) {
        toast('Unknown issue while authenticating. Try again')
        setIsLoading(false)
      }
    }
  }

  return (
    <div className={cn('flex flex-col gap-6', className)} {...props}>
      <Card>
        <CardHeader className="text-center">
          <CardTitle className="text-xl">Welcome back</CardTitle>
          <CardDescription>Login to access your account</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit}>
            <div className="grid gap-6">
              <div className="grid gap-6">
                <div className="grid gap-3">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="me@example.com"
                    required
                  />
                </div>
                <div className="grid gap-3">
                  <div className="flex items-center">
                    <Label htmlFor="password">Password</Label>
                    <a
                      href="/forgotPassword"
                      className="ml-auto text-sm underline-offset-4 hover:underline"
                    >
                      Forgot your password?
                    </a>
                  </div>
                  <Input id="password" name="password" type="password" required />
                </div>
                <Button disabled={isLoading} type="submit" className="w-full">
                  {isLoading && <Loader2 />}
                  <span>Login</span>
                </Button>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
      <div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
        By clicking <i>Login</i> or <i>Request Access</i>, you agree to our{' '}
        <a href="/info/toc">Terms of Service</a> and <a href="/info/privacy">Privacy Policy</a>.
      </div>
    </div>
  )
}