'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { motion } from 'framer-motion';
import { Mail, CheckCircle2 } from 'lucide-react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';

import { forgotPasswordSchema, ForgotPasswordSchema } from '@/lib/validations';
import { authService } from '@/lib/auth.service';

import { AuthHeader } from '../components/AuthHeader';
import { AuthCard } from '../components/AuthCard';
import { AuthInput } from '../components/AuthInput';
import { AuthSubmitButton } from '../components/AuthSubmitButton';
import { AuthBottomSwitch } from '../components/AuthBottomSwitch';
import { Button } from '@/components/ui';
import { fadeUp } from '@/lib/animations/animation';

export default function ForgotPasswordPage() {
  const [sent, setSent] = useState(false);

  const mutation = useMutation({
    mutationFn: (email: string) => authService.forgotPassword(email),
    onSuccess: () => setSent(true),
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onError: (err: any) =>
      toast.error(
        err?.response?.data?.message ?? 'Gagal mengirim email reset password.'
      ),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ForgotPasswordSchema>({
    resolver: zodResolver(forgotPasswordSchema),
  });

  const onSubmit = ({ email }: ForgotPasswordSchema) => {
    mutation.mutate(email);
  };

  return (
    <>
      <AuthHeader
        title="Lupa"
        highlightText="Password"
        subtitle="Ingat password Anda?"
        linkText="Masuk di sini"
        linkHref="/auth/login"
      />

      <AuthCard customDelay={2}>
        {sent ? (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="text-center py-4"
          >
            <div className="inline-flex items-center justify-center w-16 h-16 bg-emerald-50 rounded-2xl mb-6 shadow-sm border border-emerald-200">
              <CheckCircle2 className="w-8 h-8 text-emerald-600" />
            </div>

            <p className="text-sm text-gray-600 mb-8 leading-relaxed font-medium tracking-wide">
              Cek kotak masuk email Anda dan ikuti instruksi untuk mereset
              password. Jika tidak ada, periksa folder spam.
            </p>

            <Button
              onClick={() => setSent(false)}
              className="text-xs text-yellow-600 hover:text-yellow-700! hover:bg-yellow-100 bg-yellow-50 border border-yellow-200 shadow-sm font-black uppercase tracking-widest transition-colors cursor-pointer"
            >
              Kirim ulang tautan
            </Button>
          </motion.div>
        ) : (
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="space-y-6"
            noValidate
          >
            <AuthInput
              label="Email"
              type="email"
              icon={<Mail className="text-gray-500" size={18} />}
              placeholder="admin@garamcapkapal.id"
              error={errors.email?.message}
              {...register('email')}
            />

            <AuthSubmitButton
              isPending={mutation.isPending}
              defaultText="Kirim Tautan Reset"
              loadingText="Mengirim..."
              icon={<Mail size={18} />}
            />
          </form>
        )}

        <AuthBottomSwitch
          question="Kembali ke halaman"
          linkText="Login"
          linkHref="/auth/login"
          customDelay={3}
        />
      </AuthCard>

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