/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import Image from "next/image";
import Button from '../../components/Button';
import { Mail, CheckCircle, ArrowLeft, Loader2 } from 'lucide-react';
import axios from 'axios';

export default function VerifyEmailPage() {
  const router = useRouter();
  const apiUrl = process.env.NEXT_PUBLIC_SUBA_API_URL as string;
  
  const [email, setEmail] = useState<string>('');
  const [code, setCode] = useState<string[]>(['', '', '', '', '', '']);
  const [isVerifying, setIsVerifying] = useState(false);
  const [isResending, setIsResending] = useState(false);
  const [verificationError, setVerificationError] = useState('');
  const [resendSuccess, setResendSuccess] = useState(false);
  const [resendError, setResendError] = useState('');
  const [resendCooldown, setResendCooldown] = useState(0);
  const [resendCount, setResendCount] = useState(0);

  // Refs for input fields
  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    const storedCompleteData = sessionStorage.getItem("completeSignupData");
    if (storedCompleteData) {
      const data = JSON.parse(storedCompleteData);

      const email = data.email || '';
      email ? setEmail(email) : router.push('/register');
    }
  }, [router]);

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (resendCooldown > 0) {
      timer = setTimeout(() => {
        setResendCooldown(resendCooldown - 1);
      }, 1000);
    }
    return () => clearTimeout(timer);
  }, [resendCooldown]);

  useEffect(() => {
    if (inputRefs.current[0]) {
      inputRefs.current[0].focus();
    }
  }, []);

  const handleCodeChange = (index: number, value: string) => {
    if (!/^\d*$/.test(value)) return;

    const newCode = [...code];
    newCode[index] = value.slice(-1);
    setCode(newCode);

    if (verificationError) {
      setVerificationError('');
    }

    if (value && index < 5 && inputRefs.current[index + 1]) {
      inputRefs.current[index + 1]?.focus();
    }

    if (newCode.every(digit => digit !== '') && newCode.join('').length === 6) {
      handleVerifyCode(newCode.join(''));
    }
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Backspace' && !code[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
    
    if (e.key === 'v' && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
      navigator.clipboard.readText().then(text => {
        const digits = text.replace(/\D/g, '').slice(0, 6);
        if (digits.length === 6) {
          const newCode = digits.split('');
          setCode(newCode);
          inputRefs.current[5]?.focus();
        }
      });
    }
  };

  const handleVerifyCode = async (verificationCode?: string) => {
    const codeToVerify = verificationCode || code.join('');
    
    if (codeToVerify.length !== 6) {
      setVerificationError('Please enter all 6 digits');
      return;
    }

    setIsVerifying(true);
    setVerificationError('');

    try {
      const response = await axios.get(`${apiUrl}auth/confirmemail?email=${email}&code=${codeToVerify}`,);

      await new Promise(resolve => setTimeout(resolve, 1500));
      if (response.data.code === 200) {
        router.push('/kyc-profile');
      }
    } catch (error: any) {
      console.error('Error verifying code:', error);
      if (error.response?.data?.errors?.[0]?.message) {
        setVerificationError(error.response.data.errors[0].message);
      } else {
        setVerificationError('Invalid verification code. Please try again.');
      }
      
      setCode(['', '', '', '', '', '']);
      inputRefs.current[0]?.focus();
    } finally {
      setIsVerifying(false);
    }
  };

  const handleResendCode = async () => {
    if (resendCooldown > 0) return;

    setIsResending(true);
    setResendSuccess(false);
    setResendError('');

    try {
      console.log('Resending verification code to:', email);

      await axios.post(
        `${apiUrl}auth/resendcode?email=${email}`,
      );
      
      // Simulate API delay
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      setResendSuccess(true);
      setResendCooldown(60);
      setResendCount(prev => prev + 1);
      
      // Clear any existing code
      setCode(['', '', '', '', '', '']);
      setVerificationError('');
      
    } catch (error: any) {
      console.error('Error resending code:', error);
      if (error.response?.data?.errors?.[0]?.message) {
        setResendError(error.response.data.errors[0].message);
      } else {
        setResendError('Failed to resend verification code. Please try again.');
      }
    } finally {
      setIsResending(false);
    }
  };

  const handleBackToSignup = () => {
    router.push('/signup');
  };

  return (
    <div className="min-h-screen flex flex-col md:flex-row">
      <div className="w-full md:w-[45%] relative h-64 md:h-auto">
        <Image
          src="/assets/AuthImage.png"
          alt="Auth Image"
          fill
          sizes="(max-width: 768px) 100vw, 45vw"
          className="object-cover"
          priority
        />
      </div>

      <div className="w-full md:w-[55%] flex items-center justify-center p-8">
        <div className="w-full max-w-[75%]">
          {/* Back button */}
          <button
            onClick={handleBackToSignup}
            className="flex items-center text-gray-600 hover:text-gray-800 mb-6 transition-colors"
            disabled={isVerifying}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back
          </button>

          <div className="text-center">
            {/* Success Icon */}
            <div className="flex justify-center mb-6">
              <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center">
                <Mail className="w-10 h-10 text-purple-600" />
              </div>
            </div>

            {/* Main Message */}
            <div className="mb-8">
              <h1 className="text-3xl font-semibold text-gray-900 mb-4">
                Enter verification code
              </h1>
              <p className="text-[#1C1C1C80] mb-2">
                We have sent a 6-digit verification code to
              </p>
              <p className="text-purple-600 font-medium text-lg mb-4">
                {email}
              </p>
              <p className="text-[#1C1C1C80] text-sm">
                Enter the code below to verify your account
              </p>
            </div>

            {/* 6-Digit Code Input */}
            <div className="mb-6">
              <div className="flex justify-center space-x-3 mb-4">
                {code.map((digit, index) => (
                  <input
                    key={index}
                    ref={el => { inputRefs.current[index] = el; }}
                    type="text"
                    inputMode="numeric"
                    pattern="\d*"
                    maxLength={1}
                    value={digit}
                    onChange={(e) => handleCodeChange(index, e.target.value)}
                    onKeyDown={(e) => handleKeyDown(index, e)}
                    className={`w-12 h-12 text-center text-xl font-semibold border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors ${
                      verificationError 
                        ? 'border-red-300 bg-red-50' 
                        : digit 
                          ? 'border-purple-500 bg-purple-50' 
                          : 'border-gray-300 hover:border-gray-400'
                    }`}
                    disabled={isVerifying}
                  />
                ))}
              </div>

              {/* Verification Error */}
              {verificationError && (
                <div className="text-red-600 text-sm mb-4 bg-red-50 p-3 rounded-lg border border-red-200">
                  {verificationError}
                </div>
              )}

              {/* Manual Verify Button (shown when not auto-submitting) */}
              {code.join('').length === 6 && !isVerifying && (
                <Button
                  onClick={() => handleVerifyCode()}
                  disabled={isVerifying}
                  width="w-full"
                  marginBottom="mb-4"
                >
                  {isVerifying ? (
                    <div className="flex items-center justify-center">
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                      Verifying...
                      <Loader2 className="animate-spin mr-2 border-white" size={16} />
                    </div>
                  ) : (
                    'Verify Code'
                  )}
                </Button>
              )}
            </div>

            {/* Resend Code Section */}
            <div className="mb-8">
              {/* Success Message */}
              {resendSuccess && (
                <div className="flex items-center justify-center text-green-600 mb-4 bg-green-50 p-3 rounded-lg border border-green-200">
                  <CheckCircle className="w-5 h-5 mr-2" />
                  <span className="text-sm">
                    Verification code sent successfully!
                    {resendCount > 1 && ` (${resendCount} codes sent)`}
                  </span>
                </div>
              )}

              {/* Error Message */}
              {resendError && (
                <div className="flex items-center justify-center text-red-600 mb-4 bg-red-50 p-3 rounded-lg border border-red-200">
                  <div className="w-5 h-5 mr-2 shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                    </svg>
                  </div>
                  <span className="text-sm">{resendError}</span>
                </div>
              )}
              
              <div className="text-sm text-gray-600 mb-4">
                Didn&apos;t receive the code?
              </div>
              
              <Button
                onClick={handleResendCode}
                disabled={isResending || resendCooldown > 0 || isVerifying}
                width="w-full"
                marginBottom="mb-2"
              >
                {isResending ? (
                  <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-600 mr-2"></div>
                    Sending...
                  </div>
                ) : resendCooldown > 0 ? (
                  `Resend in ${resendCooldown}s`
                ) : (
                  'Resend verification code'
                )}
              </Button>

              {/* Resend limit warning */}
              {resendCount >= 3 && (
                <div className="text-xs text-amber-600 bg-amber-50 p-2 rounded border border-amber-200 mt-2">
                  You&apos;ve requested {resendCount} codes. If you still don&apos;t receive it, please check your message inbox or contact support.
                </div>
              )}

              {/* Tips for receiving code */}
              <div className="mt-4 text-xs text-gray-500 text-left">
                <p className="mb-2">💡 <strong>Tips:</strong></p>
                <ul className="space-y-1 ml-4">
                  <li>• Check your email inbox and spam folder</li>
                  <li>• The code expires in 10 minutes</li>
                  <li>• Make sure your email address is correct: {email}</li>
                  <li>• You can paste the code if you copy it</li>
                </ul>
              </div>
            </div>

            {/* Additional Help */}
            <div className="pt-6 border-t border-gray-200">
              <p className="text-xs text-gray-500">
                Need help? Contact our{' '}
                <a href="/support" className="text-purple-600 hover:text-purple-500">
                  support team
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}