'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Mail, User, Phone, UserPlus } from 'lucide-react';

import { registerSchema, RegisterSchema } from '@/lib/validations';
import { useRegister } from '@/hooks/useAuth';
import { motion } from 'framer-motion';
import { fadeUp } from '@/lib/animations/animation';
import { Turnstile } from '@marsidev/react-turnstile';

import { AuthHeader } from '../components/AuthHeader';
import { AuthCard } from '../components/AuthCard';
import { AuthInput } from '../components/AuthInput';
import { PasswordInput } from '../components/PasswordInput';
import { PasswordStrength } from '../components/PasswordStrength';
import { AuthSubmitButton } from '../components/AuthSubmitButton';
import { AuthBottomSwitch } from '../components/AuthBottomSwitch';

export default function RegisterPage() {
  const registerMutation = useRegister();
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<RegisterSchema>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      name: '',
      email: '',
      phone: '',
      password: '',
      password_confirmation: '',
      cf_turnstile_response: '',
    },
  });

  // eslint-disable-next-line react-hooks/incompatible-library
  const password = watch('password', '');

  return (
    <>
      <AuthHeader
        title="Daftar"
        highlightText="Akun"
        subtitle="Sudah punya akun?"
        linkText="Masuk di sini"
        linkHref="/auth/login"
      />

      <AuthCard customDelay={2}>
        <form
          onSubmit={handleSubmit((data) => registerMutation.mutateAsync(data))}
          className="space-y-5"
          noValidate
        >
          <AuthInput
            label="Nama Lengkap"
            icon={<User className="text-gray-500" size={18} />}
            placeholder="John Doe"
            error={errors.name?.message}
            {...register('name')}
          />

          <AuthInput
            label="Email"
            type="email"
            icon={<Mail className="text-gray-500" size={18} />}
            placeholder="john@example.com"
            error={errors.email?.message}
            {...register('email')}
          />

          <AuthInput
            label="Nomor Telepon"
            type="tel"
            icon={<Phone className="text-gray-500" size={18} />}
            placeholder="08123456789"
            error={errors.phone?.message}
            optional
            {...register('phone')}
          />

          <div>
            <PasswordInput
              label="Password"
              placeholder="Min. 8 karakter"
              error={errors.password?.message}
              {...register('password')}
            />
            <PasswordStrength password={password} />
          </div>

          <PasswordInput
            label="Konfirmasi Password"
            placeholder="Ulangi password yang sama"
            error={errors.password_confirmation?.message}
            {...register('password_confirmation')}
          />

          <div className="flex justify-center pt-2">
            <Turnstile
              siteKey={
                process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ||
                '1x00000000000000000000AA'
              }
              onSuccess={(token) =>
                setValue('cf_turnstile_response', token, {
                  shouldValidate: true,
                })
              }
              className="rounded-2xl bg-white"
            />
          </div>
          {errors.cf_turnstile_response && (
            <p className="text-xs text-red-500 text-center -mt-2">
              {errors.cf_turnstile_response.message}
            </p>
          )}

          <AuthSubmitButton
            isPending={registerMutation.isPending}
            defaultText="Daftar Sekarang"
            icon={<UserPlus size={18} />}
          />
        </form>
      </AuthCard>

      <AuthBottomSwitch
        question="Sudah punya akun?"
        linkText="Masuk di sini"
        linkHref="/auth/login"
        customDelay={3}
      />

      <motion.p
        variants={fadeUp}
        custom={4}
        className="text-center text-xs text-gray-400 mt-6 font-medium pb-8"
      >
        © 2024 Garam Cap Kapal. All rights reserved.
      </motion.p>
    </>
  );
}