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

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Input from '../../components/Input';
import Select from '../../components/Select';
import Image from "next/image";
import Button from '../../components/Button';
import { ArrowLeft, Info } from 'lucide-react';

interface KYCFormData {
  bvn: string;
  nin: string;
  phoneNumber: string;
  address: string;
  selectedState: string;
  selectedCity: string;
}

interface StateData {
  label: string;
  value: string;
}

export default function KYCProfilePage() {
  const router = useRouter();
  const [userEmail, setUserEmail] = useState<string>('');
  const [formData, setFormData] = useState<KYCFormData>({
    bvn: '',
    nin: '',
    phoneNumber: '',
    address: '',
    selectedState: '',
    selectedCity: ''
  });
  const [errors, setErrors] = useState<{[key: string]: string}>({});
  const [isLoading, setIsLoading] = useState(false);
  const [states, setStates] = useState<StateData[]>([]);
  const [cities, setCities] = useState<StateData[]>([]);
  const [loadingStates, setLoadingStates] = useState(false);
  const [loadingCities, setLoadingCities] = useState(false);

    useEffect(() => {
      const storedCompleteData = sessionStorage.getItem("completeSignupData");
      if (storedCompleteData) {
        const data = JSON.parse(storedCompleteData);
  
        const email = data.email || '';
        email ? setUserEmail(email) : router.push('/register');
      }
      fetchStates();
    }, [router]);

  useEffect(() => {
    if (formData.selectedState) {
      fetchCities(formData.selectedState);
    } else {
      setCities([]);
      setFormData(prev => ({ ...prev, selectedCity: '' }));
    }
  }, [formData.selectedState]);

  const fetchStates = async () => {
    setLoadingStates(true);
    try {
      const response = await fetch('https://nga-states-lga.onrender.com/fetch');
      const data = await response.json();
      const stateOptions = data.map((state: string) => ({
        label: state,
        value: state
      }));
      setStates(stateOptions);
    } catch (error) {
      console.error('Error fetching states:', error);
      // Fallback Nigerian states
      const fallbackStates = [
        'Abia', 'Adamawa', 'Akwa Ibom', 'Anambra', 'Bauchi', 'Bayelsa', 'Benue', 'Borno',
        'Cross River', 'Delta', 'Ebonyi', 'Edo', 'Ekiti', 'Enugu', 'FCT', 'Gombe', 'Imo',
        'Jigawa', 'Kaduna', 'Kano', 'Katsina', 'Kebbi', 'Kogi', 'Kwara', 'Lagos', 'Nasarawa',
        'Niger', 'Ogun', 'Ondo', 'Osun', 'Oyo', 'Plateau', 'Rivers', 'Sokoto', 'Taraba',
        'Yobe', 'Zamfara'
      ].map(state => ({ label: state, value: state }));
      setStates(fallbackStates);
    } finally {
      setLoadingStates(false);
    }
  };

  const fetchCities = async (state: string) => {
    setLoadingCities(true);
    try {
      const response = await fetch(`https://nga-states-lga.onrender.com/?state=${state}`);
      const data = await response.json();
      const cityOptions = Array.isArray(data) ? data.map((city: string) => ({
        label: city,
        value: city
      })) : [];
      setCities(cityOptions);
    } catch (error) {
      console.error('Error fetching cities:', error);
      setCities([]);
    } finally {
      setLoadingCities(false);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));

    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const handleSelectChange = (name: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));

    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const validateForm = () => {
    const newErrors: {[key: string]: string} = {};

    if (!formData.bvn.trim()) {
      newErrors.bvn = 'BVN is required';
    } else if (formData.bvn.length !== 11) {
      newErrors.bvn = 'BVN must be 11 digits';
    } else if (!/^\d{11}$/.test(formData.bvn)) {
      newErrors.bvn = 'BVN must contain only numbers';
    }

    if (!formData.nin.trim()) {
      newErrors.nin = 'NIN is required';
    } else if (formData.nin.length !== 11) {
      newErrors.nin = 'NIN must be 11 digits';
    } else if (!/^\d{11}$/.test(formData.nin)) {
      newErrors.nin = 'NIN must contain only numbers';
    }

    if (!formData.phoneNumber.trim()) {
      newErrors.phoneNumber = 'Phone number is required';
    } else if (!/^\d{10,11}$/.test(formData.phoneNumber)) {
      newErrors.phoneNumber = 'Phone number must be 10-11 digits';
    }

    if (!formData.address.trim()) {
      newErrors.address = 'Address is required';
    }

    if (!formData.selectedState) {
      newErrors.selectedState = 'Please select your state';
    }

    if (!formData.selectedCity) {
      newErrors.selectedCity = 'Please select your city';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (validateForm()) {
      setIsLoading(true);
      
      try {
        // Navigate to verification step with form data
        const completeKycData = {
          email: userEmail,
          bvn: formData.bvn,
          nin: formData.nin,
          phoneNumber: formData.phoneNumber,
          address: formData.address,
          selectedState: formData.selectedState,
          selectedCity: formData.selectedCity
        } ;

        sessionStorage.setItem("completeKycData", JSON.stringify(completeKycData));

        router.push('/verify-kyc');
        
      } catch (error) {
        console.error('Error during KYC profile submission:', error);
      } finally {
        setIsLoading(false);
      }
    }
  };

  const handleBack = () => {
    router.push(`/verify-signup?email=${encodeURIComponent(userEmail)}`);
  };

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

      <div className="w-full md:w-1/2 flex items-center justify-center p-6 overflow-y-auto">
        <div className="w-full max-w-md">
          {/* Back button */}
          <button
            onClick={handleBack}
            className="flex items-center text-gray-600 hover:text-gray-800 mb-6 transition-colors"
            disabled={isLoading}
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back
          </button>

          {/* Progress indicator */}
          <div className="flex items-center justify-center mb-8">
            <div className="flex items-center">
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
                ✓
              </div>
              <div className="w-16 h-0.5 bg-green-500"></div>
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
                ✓
              </div>
              <div className="w-16 h-0.5 bg-green-500"></div>
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
                ✓
              </div>
              <div className="w-16 h-0.5 bg-purple-600"></div>
              <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
                4
              </div>
            </div>
          </div>

          <div className="mb-6">
            <h1 className="text-3xl font-semibold text-gray-900 mb-2">
              KYC/Profile Update
            </h1>
            <p className="text-[#1C1C1C80] mb-2">
              Help us verify your identity to secure your account
            </p>
            <p className="text-sm text-purple-600">
              Account: {userEmail}
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <Input
                label="BVN"
                name="bvn"
                type="text"
                placeholder="Enter your BVN"
                value={formData.bvn}
                onChange={handleInputChange}
                error={errors.bvn}
                disabled={isLoading}
                maxLength={11}
              />
              <div className="flex items-center text-xs text-blue-600 mt-1">
                <Info className="w-3 h-3 mr-1" />
                Dial *565*0# to get your BVN
              </div>
            </div>

            <Input
              label="NIN"
              name="nin"
              type="text"
              placeholder="Enter your NIN"
              value={formData.nin}
              onChange={handleInputChange}
              error={errors.nin}
              disabled={isLoading}
              maxLength={11}
            />

            <Input
              label="Mobile number"
              name="phoneNumber"
              type="tel"
              placeholder="08012345678"
              value={formData.phoneNumber}
              onChange={handleInputChange}
              error={errors.phoneNumber}
              disabled={isLoading}
            />

            <Input
              label="Full address"
              name="address"
              type="text"
              placeholder="Enter your full address"
              value={formData.address}
              onChange={handleInputChange}
              error={errors.address}
              disabled={isLoading}
            />

            <div className="grid grid-cols-2 gap-4">
              <Select
                label="State"
                options={states}
                placeholder={loadingStates ? "Loading states..." : "Select state"}
                value={formData.selectedState}
                onChange={(value: any) => handleSelectChange('selectedState', value)}
                error={errors.selectedState}
                disabled={isLoading || loadingStates}
              />

              <Select
                label="City"
                options={cities}
                placeholder={loadingCities ? "Loading cities..." : !formData.selectedState ? "Select state first" : "Select city"}
                value={formData.selectedCity}
                onChange={(value: any) => handleSelectChange('selectedCity', value)}
                error={errors.selectedCity}
                disabled={isLoading || loadingCities || !formData.selectedState}
              />
            </div>

            <Button 
              type="submit" 
              disabled={isLoading}
              width="w-full"
            >
              {isLoading ? (
                <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>
                  Processing...
                </div>
                ) : (
                'Next'
              )}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}