'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 { FiArrowRight, FiEye } from 'react-icons/fi'
import { FiEyeOff } from 'react-icons/fi'
import { useMutation } from '@tanstack/react-query'
import { Axios } from '@/utils/axios'
import Link from 'next/link'
import { useUser } from '@/hooks/useUser'

const formSchema = z
  .object({
    password: z
      .string()
      .min(8, 'Password must be at least 8 characters long.')
      .refine((value) => /[a-zA-Z]/.test(value) && /[0-9]/.test(value), {
        message: 'Password must contain both letters and numbers.',
      }),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ['confirmPassword'],
  })

export default function UpdatePassword({
  params,
}: {
  params: { token: string }
}) {
  const [passwordUpdated, setPasswordUpdated] = useState(false)
  const [hide, setHide] = useState(false)
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      password: '',
      confirmPassword: '',
    },
  })
  type resetType = z.infer<typeof formSchema>
  const resestPassMutation = useMutation({
    mutationKey: ['login'],
    mutationFn: async (data: resetType) => {
      return (await Axios.put(`/reset-password/${params.token}`, { ...data }))
        .data
    },
  })
  const { addUser } = useUser()
  const onSubmit = (data: { password: string; confirmPassword: string }) => {
    resestPassMutation.mutate(data, {
      onSuccess: (result) => {
        addUser({ ...result.user })
        setPasswordUpdated(true)
        toast('Password updated successfully.')
      },
      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">
        <h2 className="text-xl text-center font-semibold mb-5">
          Update Password
        </h2>
        {passwordUpdated ? (
          <>
            <p className="text-white text-center mb-5">
              Password updated successfully.Continue to dashboard.
            </p>
            <Button className="flex items-center justify-center p-2 rounded-sm border  m-auto bg-surkhetSoft text-white">
              <Link href={'/'} className="">
                Continue{' '}
              </Link>
              <FiArrowRight />
            </Button>
          </>
        ) : (
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="flex flex-col gap-y-4 mt-7"
            >
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem className="relative">
                    <FormLabel>Password</FormLabel>
                    {hide ? (
                      <FiEye
                        onClick={() => {
                          setHide(!hide)
                        }}
                        className="absolute top-[32px] right-2"
                        size={21}
                      />
                    ) : (
                      <FiEyeOff
                        size={21}
                        onClick={() => {
                          setHide(!hide)
                        }}
                        className="absolute top-[32px] right-2"
                      />
                    )}
                    <FormControl>
                      <Input
                        type={hide ? 'password' : 'text'}
                        placeholder={'Password'}
                        {...field}
                        className="min-w-[300px] border rounded-md p-2 focus:outline-none focus:border-blue-500"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="confirmPassword"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Confirm Password</FormLabel>
                    <FormControl>
                      <Input
                        type={hide ? 'password' : 'text'}
                        placeholder="Confirm Password"
                        {...field}
                        className="border rounded-md p-2 focus:outline-none focus:border-blue-500"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button
                type="submit"
                className="w-full bg-surkhetSoft text-white"
              >
                Update Password
              </Button>
            </form>
          </Form>
        )}
      </div>
    </div>
  )
}