import React from 'react'
import { useForm } from '@/app/hooks/useForm'
import Button from '@/components/ui/Button'
// import LoginButton from '@/app/components/ui/LoginButton'
import showToast from '@/components/ui/Toast'
import { useRouter } from 'next/navigation'
import { signIn } from 'next-auth/react'
import TextInput from '@/components/ui/TextInput'
// 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}>
        <TextInput
          value={values.email}
          name="email"
          handleChange={handleChange}
          placeholder="my_email@gmail.com"
          style="register"
          label="Ваш еmail"
        />

        <TextInput
          value={values.password}
          name="password"
          handleChange={handleChange}
          placeholder="Не менее 8 символов"
          style="register"
          label="Ваш пароль"
          isPassword={true}
          isVisible={isVisible}
          togglePasswordVisibility={togglePasswordVisibility}
        />
        {/* <div className="flex flex-row-reverse text-sm justify-between pb-2">
          <PasswordRecovery />
        </div> */}
        <Button
          text="Войти"
          className="flex items-center justify-center bg-orange rounded-2xl text-white text-base font-semibold py-3 mt-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
