'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 resetPassword from '@/serverActions/ResetPassword'
import { toast } from 'sonner'
import forgotPassword from '@/serverActions/ForgotPassword'

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

  const token = searchParams.get('token')

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

    if (isLoading) return
    setIsLoading(true)

    const formData = new FormData(e.currentTarget)
    const password = String(formData.get('password'))
    const confirmPassword = String(formData.get('confirmPassword'))

    if (!password || !confirmPassword || password !== confirmPassword) {
      toast('Finish the form to continue')
      setIsLoading(false)
      return
    }

    if (!token) {
      toast('Password reset token is missing')
      setIsLoading(false)
      return
    }

    const didReset = await resetPassword({
      token,
      password,
      confirmPassword,
    })

    console.log('didReset', didReset)

    if (!didReset) {
      toast('Issue resetting your password')
      setIsLoading(false)
    } else router.push('/login')
  }

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

    if (isLoading) return
    setIsLoading(true)

    const formData = new FormData(e.currentTarget)
    const email = String(formData.get('email'))

    if (!email) return

    const didForget = await forgotPassword({ email })

    if (didForget) {
      toast('A password change email was sent')
      setDidSendForgetRequest(true)
    } else toast('There was an issue with your forget password request')

    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>
            {!token
              ? 'An email to reset your password will be sent if we find it in our system'
              : 'Please enter your new password'}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form
            onSubmit={token ? handleResetPasswordSubmit : handleForgotPasswordSubmit}
            aria-disabled={isLoading}
          >
            <div className="grid gap-6">
              <div className="grid gap-6">
                {!token ? (
                  <div className="grid gap-3">
                    {didSendForgetRequest ? (
                      <p className="accent-muted">
                        Your request has been sent. Check you emails inbox and span folders
                      </p>
                    ) : (
                      <>
                        <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>
                    </div>
                    <Input id="password" name="password" type="password" required />

                    <div className="flex items-center">
                      <Label htmlFor="password">Confirm Password</Label>
                    </div>
                    <Input id="confirmPassword" name="confirmPassword" type="password" required />
                  </div>
                )}
                {!didSendForgetRequest && (
                  <Button type="submit" className="w-full" disabled={isLoading}>
                    {!!token ? 'Forgot Password' : 'Reset'}
                  </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>Rest</i> or <i>Forgot Password</i>, you agree to our{' '}
        <a href="/info/toc">Terms of Service</a> and <a href="/info/privacy">Privacy Policy</a>.
      </div>
    </div>
  )
}