'use client';

import { Suspense, useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { LogIn, Mail, MailCheck, Loader2 } from 'lucide-react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';

import { loginSchema, LoginSchema } from '@/lib/validations';
import { useLogin, useResendVerification } from '@/hooks/useAuth';
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 { AuthSubmitButton } from '../components/AuthSubmitButton';
import { AuthBottomSwitch } from '../components/AuthBottomSwitch';
import { motion } from 'framer-motion';
import { fadeUp } from '@/lib/animations/animation';

function LoginForm() {
  const searchParams = useSearchParams();
  const justRegistered = searchParams.get('registered') === 'true';
  const justVerified = searchParams.get('verified') === 'true';

  const login = useLogin();
  const resendVerification = useResendVerification();
  const [unverifiedEmail, setUnverifiedEmail] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors },
  } = useForm<LoginSchema>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: '',
      remember: false,
      cf_turnstile_response: '',
    },
  });

  const handleLogin = async (data: LoginSchema) => {
    setUnverifiedEmail(null);
    try {
      await login.mutateAsync(data);
    } catch (error: unknown) {
      // Check if error is "email not verified"
      const err = error as { response?: { data?: { message?: string } } };
      const message = err?.response?.data?.message || '';
      if (message.toLowerCase().includes('belum diverifikasi')) {
        setUnverifiedEmail(data.email);
      }
    }
  };

  const handleResend = () => {
    const email = unverifiedEmail || getValues('email');
    if (email) {
      resendVerification.mutate(email);
    }
  };

  return (
    <>
      <AuthHeader
        title="Masuk ke"
        highlightText="Akun"
        subtitle="Belum punya akun?"
        linkText="Daftar Sekarang"
        linkHref="/auth/register"
      />

      <AuthCard customDelay={2}>
        {/* Registration success banner */}
        {justRegistered && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-xl"
          >
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                <MailCheck className="w-4 h-4 text-amber-600" />
              </div>
              <div>
                <p className="text-sm font-bold text-amber-800 tracking-wide">
                  Cek Email Anda
                </p>
                <p className="text-xs text-amber-600 mt-1 leading-relaxed">
                  Kami telah mengirim link verifikasi ke email Anda. Silakan
                  verifikasi terlebih dahulu sebelum login.
                </p>
              </div>
            </div>
          </motion.div>
        )}

        {/* Verification success banner */}
        {justVerified && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 p-4 bg-emerald-50 border border-emerald-200 rounded-xl"
          >
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
                <MailCheck className="w-4 h-4 text-emerald-600" />
              </div>
              <div>
                <p className="text-sm font-bold text-emerald-800 tracking-wide">
                  Email Terverifikasi!
                </p>
                <p className="text-xs text-emerald-600 mt-1 leading-relaxed">
                  Email Anda berhasil diverifikasi. Silakan login.
                </p>
              </div>
            </div>
          </motion.div>
        )}

        {/* Unverified email banner with resend */}
        {unverifiedEmail && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl"
          >
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                <Mail className="w-4 h-4 text-red-600" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-bold text-red-800 tracking-wide">
                  Email Belum Diverifikasi
                </p>
                <p className="text-xs text-red-600 mt-1 leading-relaxed">
                  Silakan cek inbox email Anda untuk link verifikasi.
                </p>
                <button
                  type="button"
                  onClick={handleResend}
                  disabled={resendVerification.isPending}
                  className="mt-2 text-xs font-bold text-red-700 hover:text-red-800 underline underline-offset-2 transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-1"
                >
                  {resendVerification.isPending ? (
                    <>
                      <Loader2 className="w-3 h-3 animate-spin" />
                      Mengirim...
                    </>
                  ) : (
                    'Kirim ulang email verifikasi'
                  )}
                </button>
              </div>
            </div>
          </motion.div>
        )}

        <form
          onSubmit={handleSubmit(handleLogin)}
          className="space-y-6"
          noValidate
        >
          <AuthInput
            label="Email"
            type="email"
            icon={<Mail className="text-gray-500" size={18} />}
            placeholder="admin@garamkapal.com"
            error={errors.email?.message}
            {...register('email')}
          />

          <PasswordInput
            label="Password"
            placeholder="Masukkan password"
            error={errors.password?.message}
            {...register('password')}
          />

          <div className="flex justify-end">
            <Link
              href="/auth/forgot-password"
              className="text-xs text-yellow-600 hover:text-yellow-700 font-bold uppercase tracking-wider transition-colors"
            >
              Lupa password?
            </Link>
          </div>

          <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,
                })
              }
            />
          </div>
          {errors.cf_turnstile_response && (
            <p className="text-xs text-red-500 text-center -mt-2">
              {errors.cf_turnstile_response.message}
            </p>
          )}

          <AuthSubmitButton
            isPending={login.isPending}
            defaultText="Masuk"
            icon={<LogIn size={18} />}
          />
        </form>

        <AuthBottomSwitch
          question="Belum punya akun?"
          linkText="Daftar sekarang"
          linkHref="/auth/register"
          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>
    </>
  );
}

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