'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'

import { Input } from '@/components/ui/input'
import { useState } from 'react'
import { toast } from 'sonner'

import { useMutation } from '@tanstack/react-query'
import { Axios } from '@/utils/axios'

const formSchema = z.object({
  email: z.string().trim().email('Invalid email address.'),
})

export default function ForgotPassword() {
  const [emailSent, setEmailSent] = useState(false)

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: '',
    },
  })
  type forgotType = z.infer<typeof formSchema>

  const forgotPassMutation = useMutation({
    mutationKey: ['login'],
    mutationFn: async (data: forgotType) => {
      return (await Axios.post('/forgot-password', { ...data })).data
    },
  })
  const onSubmit = (data: { email: string }) => {
    forgotPassMutation.mutate(data, {
      onSuccess: (result) => {
        setEmailSent(true)
        toast('Reset password link has been sent to your email.')
      },
      onError: (err) => {
        // @ts-ignore
        toast(err?.response?.data?.message)
      },
    })
  }

  return (
    <div className="w-full h-screen flex items-center justify-center">
      <div className="rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)] p-5 pt-3 min-w-[300px] w-[400px]">
        <h2 className="text-xl text-center font-semibold mb-5 font-ralewayDots">
          Forgot Password
        </h2>
        <p className="text-center mb-5 -mt-5 text-sm text-muted-foreground text-surkhetSoft">
          Surkhet Soft
        </p>
        {emailSent ? (
          <p className="text-white text-center mb-5">
            Password reset link has been sent to your email.
          </p>
        ) : (
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="flex flex-col gap-y-4 mt-7"
            >
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
                        // placeholder="Email"
                        {...field}
                        className="border rounded-md p-2 -mt-2 focus:outline-none focus:border-blue-500"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">
                Send Reset Password Link
              </Button>
            </form>
          </Form>
        )}
      </div>
    </div>
  )
}