import React from 'react'
import Link from 'next/link'
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 PhoneInput from '@/components/ui/PhoneInput'

const validationRules = {
  name: { required: true },
  surname: { required: true },
  phone_number: {
    required: true,
    minLength: 11,
  },
  password: { required: true, minLength: 8 },
  privacy_accepted: { required: true },
}

export default function ClientRegistrationForm() {
  const router = useRouter()
  const {
    values,
    isVisible,
    handleChange,
    handleSubmit,
    togglePasswordVisibility,
  } = useForm(
    {
      name: '',
      surname: '',
      email: '',
      phone_number: '',
      password: '',
      privacy_accepted: false,
    },
    validationRules,
    async (values) => {
      try {
        const result = await signIn('register-credentials', {
          email: values.email,
          password: values.password,
          username: values.name,
          phone_number: values.phone_number,
          privacy_accepted: values.privacy_accepted.toString(),
          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 space-y-4">
          <TextInput
            value={values.name}
            name="name"
            handleChange={handleChange}
            placeholder="Иван"
            style="register"
            label="Ваше имя"
          />

          <TextInput
            value={values.surname}
            name="surname"
            handleChange={handleChange}
            placeholder="Иванов"
            style="register"
            label="Ваша фамилия"
          />

          <TextInput
            value={values.email}
            name="email"
            handleChange={handleChange}
            placeholder="my_email@gmail.com"
            style="register"
            label="Ваш еmail"
          />
          <PhoneInput
            value={values.phone_number}
            handleChange={handleChange}
            operatorsInfo={false}
          />

          <TextInput
            value={values.password}
            name="password"
            handleChange={handleChange}
            placeholder="Не менее 8 символов"
            style="register"
            label="Ваш пароль"
            isPassword={true}
            isVisible={isVisible}
            togglePasswordVisibility={togglePasswordVisibility}
          />
        </div>

        <div className="pb-2 flex items-start">
          <input
            type="checkbox"
            id="privacy_accepted"
            name="privacy_accepted"
            onChange={handleChange}
            checked={values.privacy_accepted}
            className="mt-1 cursor-pointer"
          />
          <label
            htmlFor="privacy_accepted"
            className="px-2 cursor-pointer select-none text-gray-700"
          >
            Даю согласие на обработку моих{' '}
            <Link
              href="/privacy-policy"
              className="text-orange/60 hover:underline"
            >
              персональных данных.
            </Link>
          </label>
        </div>
        <Button
          text="Зарегистрироваться"
          className="flex items-center justify-center bg-black text-white rounded-2xl 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-500">Или</p>
        <div className="flex-1 border-t border-gray-300" />
      </div>
      {/* <LoginButton /> */}
    </>
  )
}