import React from 'react'
import { useForm } from '@/app/hooks/useForm'
import Button from '@/components/ui/Button'
// import LoginButton from '@/app/components/ui/LoginButton'
import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'
import showToast from '@/components/ui/Toast'
import { useRouter } from 'next/navigation'
import { signIn } from 'next-auth/react'
// import PasswordRecovery from '@/app/components/ui/PasswordRecovery'

const validationRules = {
  email: { required: true },
  password: { required: true, minLength: 8 },
}

const ClientView = () => {
  const router = useRouter()

  const {
    values,
    isVisible,
    handleChange,
    handleSubmit,
    togglePasswordVisibility,
  } = useForm(
    {
      email: '',
      password: '',
    },
    validationRules,
    async (values) => {
      try {
        const result = await signIn('credentials', {
          email: values.email,
          password: values.password,
          redirect: false,
        })

        if (result?.error) {
          showToast({ type: 'error', message: result.error })
          return
        }

        showToast({ type: 'success', message: 'Авторизация успешна!' })
        router.push('/account')
      } catch {
        showToast({ type: 'error', message: 'Ошибка при входе в аккаунт' })
      }
    }
  )

  return (
    <>
      <form className="flex flex-col gap-1" onSubmit={handleSubmit}>
        <div className="mb-2">
          <label className="block mb-2 text-gray-700" htmlFor="email">
            Ваш email:
          </label>
          <input
            type="email"
            id="email"
            placeholder="my_email@gmail.com"
            value={values.email}
            onChange={handleChange}
            className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
            autoComplete="true"
          />
        </div>

        <div className="mb-4">
          <label className="block mb-2 text-gray-700" htmlFor="email">
            Ваш пароль:
          </label>
          <div className="relative">
            <input
              type={isVisible ? 'text' : 'password'}
              id="password"
              placeholder="Пароль"
              value={values.password}
              onChange={handleChange}
              className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
              autoComplete="true"
            />
            <button
              type="button"
              onClick={() => togglePasswordVisibility()}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
            >
              {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
            </button>
          </div>
        </div>
        {/* <div className="flex flex-row-reverse text-sm justify-between pb-2">
          <PasswordRecovery />
        </div> */}
        <Button
          text="Войти"
          className="flex items-center justify-center bg-black rounded-2xl text-white text-base font-semibold py-3"
          type="submit"
        />
      </form>

      <div className="flex items-center gap-4">
        <div className="flex-1 border-t border-gray-300" />
        <p className="shrink-0 px-2 text-gray-700">Или</p>
        <div className="flex-1 border-t border-gray-300" />
      </div>

      {/* <LoginButton /> */}
    </>
  )
}

export default ClientView