'use client';

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

import { resetPasswordSchema, ResetPasswordSchema } 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 { Button } from '@/components/ui';
import { fadeUp } from '@/lib/animations/animation';

function ResetPasswordForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [success, setSuccess] = useState(false);

  const token = searchParams.get('token') || '';
  const email = searchParams.get('email') || '';

  const mutation = useMutation({
    mutationFn: (data: ResetPasswordSchema) =>
      authService.resetPassword({
        token,
        email,
        password: data.password,
        password_confirmation: data.password_confirmation,
      }),
    onSuccess: () => setSuccess(true),
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onError: (err: any) =>
      toast.error(
        err?.response?.data?.message ??
          'Gagal mereset password. Silakan coba lagi.'
      ),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ResetPasswordSchema>({
    resolver: zodResolver(resetPasswordSchema),
    defaultValues: {
      password: '',
      password_confirmation: '',
    },
  });

  const onSubmit = (data: ResetPasswordSchema) => {
    if (!token || !email) {
      toast.error('Token atau email tidak valid.');
      return;
    }
    mutation.mutate(data);
  };

  return (
    <>
      <AuthHeader
        title="Reset"
        highlightText="Password"
        subtitle="Buat password baru Anda."
        linkText="Kembali ke Login"
        linkHref="/auth/login"
      />

      <AuthCard customDelay={2}>
        {success ? (
          <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">
              Password Anda berhasil direset. Silakan login menggunakan password
              baru Anda.
            </p>

            <Button
              onClick={() => router.push('/auth/login')}
              className="text-xs text-emerald-600 hover:text-emerald-700 bg-emerald-50 border border-emerald-200 shadow-sm font-black uppercase tracking-widest transition-colors"
            >
              Ke Halaman Login
            </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} />}
              value={email}
              disabled
              className="bg-gray-50 text-gray-500"
            />

            <AuthInput
              label="Password Baru"
              type="password"
              icon={<Lock className="text-gray-500" size={18} />}
              placeholder="••••••••"
              error={errors.password?.message}
              {...register('password')}
            />

            <AuthInput
              label="Konfirmasi Password"
              type="password"
              icon={<Lock className="text-gray-500" size={18} />}
              placeholder="••••••••"
              error={errors.password_confirmation?.message}
              {...register('password_confirmation')}
            />

            <AuthSubmitButton
              isPending={mutation.isPending}
              defaultText="Reset Password"
              loadingText="Memproses..."
              icon={<Lock size={18} />}
            />
          </form>
        )}
      </AuthCard>
    </>
  );
}

export default function ResetPasswordPage() {
  return (
    <>
      <Suspense
        fallback={
          <div className="flex items-center justify-center py-8">Memuat...</div>
        }
      >
        <ResetPasswordForm />
      </Suspense>

      <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>
    </>
  );
}