'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import * as z from 'zod'
import { FiEye } from 'react-icons/fi'
import { FiEyeOff } from 'react-icons/fi'
import { CiLock, CiMail } from 'react-icons/ci'
import { useMutation } from '@tanstack/react-query'
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 Link from 'next/link'
import { useState } from 'react'
import Image from 'next/image'
import { Axios } from '@/utils/axios'
import { toast } from 'sonner'
import { useUser } from '@/hooks/useUser'
import { useRouter } from 'next/navigation'

const formSchema = z.object({
  email: z.string().trim().email('Enter your email address.'),
  password: z
    .string()
    .trim()
    .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.',
    }),
})

export default function Login() {
  const { addUser } = useUser()
  const router = useRouter()
  const [hide, sethide] = useState(true)
  type loginDtype = z.infer<typeof formSchema>
  const form = useForm<loginDtype>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  })

  const loginMutation = useMutation({
    mutationKey: ['login'],
    mutationFn: async (data: loginDtype) => {
      return (await Axios.post('/login', { ...data })).data
    },
  })

  const { isPending } = loginMutation
  // 2. Define a submit handler.
  const onSubmit = (data: loginDtype) => {
    loginMutation.mutate(data, {
      onSuccess: (result) => {
        addUser({ ...result.user })
        if (result.role == 'admin') {
        } else if ('user') {
          router.push('/')
        }
      },
      onError: (err) => {
        // @ts-ignore
        toast(err?.response?.data.message)
      },
    })
  }

  return (
    <div className="w-full h-screen  flex items-center  justify-center m-auto">
      <div className="rounded-lg border shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
        <h2 className="text-xl text-center w-full  font-semibold p-5 pt-2 font-ralewayDots">
          Hotel Namaste Nepal
        </h2>
        <p className="text-center text-sm opacity-50 -mt-4">
          store your password securly.
        </p>
        <div className="w-fit flex  h-auto items-center  justify-around m-auto p-3 rounded-lg">
          {/* <Image
            alt="logo"
            height={300}
            width={300}
            className="hidden md:flex w-[300px] h-auto rounded-lg"
            src={"/company/logo.jpg"}
          /> */}
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="min-w-[340px] h-auto flex flex-col gap-y-6  p-3 rounded-lg"
            >
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem className="relative ">
                    {/* <FormLabel>Email</FormLabel> */}
                    <CiMail className="absolute top-[17px] left-2 " size={21} />
                    <FormControl>
                      <Input
                        placeholder="Email"
                        {...field}
                        className="min-w-[280px] pl-11 placeholder: font-roboto"
                      />
                    </FormControl>
                    <FormDescription>
                      {/* This is your public display name. */}
                    </FormDescription>
                    <FormMessage className="text-xs" />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem className="relative">
                    {/* <FormLabel className="mt-1">Password</FormLabel> */}
                    <CiLock className="absolute top-[17px] left-2 " size={21} />
                    <FormControl>
                      <Input
                        placeholder="Password"
                        {...field}
                        type={hide ? 'password' : 'text'}
                        className="pl-11  focus:border-b-0 placeholder: font-roboto"
                      />
                    </FormControl>
                    {hide ? (
                      <FiEye
                        onClick={() => {
                          sethide(!hide)
                        }}
                        className="absolute top-[10px] right-2 opacity-50"
                        size={18}
                      />
                    ) : (
                      <FiEyeOff
                        size={18}
                        onClick={() => {
                          sethide(!hide)
                        }}
                        className="absolute top-[10px] right-2 opacity-50"
                      />
                    )}
                    <FormDescription>
                      {/* This is your public display name. */}
                    </FormDescription>
                    <FormMessage className="text-xs" />
                  </FormItem>
                )}
              />
              <div className=" flex justify-between items-center">
                <Button
                  isLoading={isPending}
                  type="submit"
                  className=" bg-surkhetSoft text-white font-serif"
                >
                  Log in
                </Button>
                <Link
                  className="text-base font-poppins opacity-75"
                  href={'/forgot-password'}
                >
                  Forgot Password?
                </Link>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  )
}