/* eslint-disable @typescript-eslint/no-explicit-any */
'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 } from 'lucide-react';
import axios from 'axios';
import { toast } from 'sonner';
import { InitialSignupData, CompleteSignupData } from '../../lib/interfaces';
import { RegsiterUser } from '../../lib/api/api';

export default function CompleteSignupPage() {
  const router = useRouter();
  const [initialData, setInitialData] = useState<InitialSignupData | null>(null);
  const [formData, setFormData] = useState<CompleteSignupData>({
    userName: '',
    firstName: '',
    lastName: '',
    occupation: '',
    gender: ''
  });
  const [errors, setErrors] = useState<{[key: string]: string}>({});
  const [isLoading, setIsLoading] = useState(false);

  // Gender options
  const genderOptions = [
    { value: 'Male', label: 'Male' },
    { value: 'Female', label: 'Female' },
  ];

  // Occupation options
  const occupationOptions = [
    { value: 'student', label: 'Student' },
    { value: 'software-engineer', label: 'Software Engineer' },
    { value: 'designer', label: 'Designer' },
    { value: 'manager', label: 'Manager' },
    { value: 'teacher', label: 'Teacher' },
    { value: 'doctor', label: 'Doctor' },
    { value: 'lawyer', label: 'Lawyer' },
    { value: 'entrepreneur', label: 'Entrepreneur' },
    { value: 'consultant', label: 'Consultant' },
    { value: 'freelancer', label: 'Freelancer' },
    { value: 'marketing', label: 'Marketing Professional' },
    { value: 'sales', label: 'Sales Professional' },
    { value: 'finance', label: 'Finance Professional' },
    { value: 'healthcare', label: 'Healthcare Professional' },
    { value: 'artist', label: 'Artist/Creative' },
    { value: 'retired', label: 'Retired' },
    { value: 'unemployed', label: 'Unemployed' },
    { value: 'other', label: 'Other' }
  ];
  
  useEffect(() => {
    const fetchSignupData = async () => {
      try {
        const response = await axios.get('/lib/api/auth/signup-data');
          setInitialData(response.data.data);
          
          if (response.data.data.fullName) {
            const nameParts = response.data.data.fullName.split(" ");
            setFormData((prev) => ({
              ...prev,
              firstName: nameParts[0] || "",
              lastName: nameParts.slice(1).join(" ") || "",
            }));
          }
      } catch (error) {
        console.error('Error fetching signup data:', error);
        // Redirect back to signup if no data found
        router.push('/signup');
      } finally {
        setIsLoading(false);
      }
    };

    fetchSignupData();
  }, [router]);

  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.userName.trim()) {
      newErrors.userName = 'Username is required';
    } else if (formData.userName.length < 3) {
      newErrors.userName = 'Username must be at least 3 characters';
    } else if (!/^[a-zA-Z0-9_]+$/.test(formData.userName)) {
      newErrors.userName = 'Username can only contain letters, numbers, and underscores';
    }

    if (!formData.firstName.trim()) {
      newErrors.firstName = 'First name is required';
    }

    if (!formData.lastName.trim()) {
      newErrors.lastName = 'Last name is required';
    }

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

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

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
  
    if (validateForm()) {
      setIsLoading(true);
      
      try {
        // Get complete signup data from session
        const response = await axios.post('/lib/api/auth/signup-complete', formData);
  
        if (response.data.success) {
          const completeSignupData = response.data.data;
          
          // Now call your backend API with the complete data
          const registerResponse = await RegsiterUser(completeSignupData);
  
          if (registerResponse.data.code === 200) {
            // Store token if needed
            sessionStorage.setItem('userToken', registerResponse.data.data.data.token);
            
            // Clear the signup session
            await axios.delete('/lib/api/auth/signup-data');
            
            // Redirect to verification page
            router.push(`/verify-signup?email=${encodeURIComponent(response.data.email)}`);
          }
        }
      } catch (error: any) {
        console.error('Error during complete signup:', error);
        
        const errorMessage = error.response?.data?.error ||
                           error.response?.data?.errors?.[0]?.message ||
                           'An error occurred during signup';

        toast.error(errorMessage);
      } finally {
        setIsLoading(false);
      }
    }
  };

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

  if (!initialData) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading...</p>
        </div>
      </div>
    );
  }

  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 mt-10">
        <div className="w-full max-w-[75%] px-6">
          {/* 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-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">
                2
              </div>
              <div className="w-16 h-0.5 bg-gray-300"></div>
              <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-sm font-medium">
                3
              </div>
              <div className="w-16 h-0.5 bg-gray-300"></div>
              <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-sm font-medium">
                4
              </div>
            </div>
          </div>

          <div className="mb-6">
            <h1 className="text-3xl font-semibold text-gray-900 mb-2">
              Complete your profile
            </h1>
            <p className="text-[#1C1C1C80]">
              Just a few more details to personalize your experience
            </p>
            {/* Show user's email for context */}
            <p className="text-sm text-purple-600 mt-2">
              Creating account for: {initialData.email}
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <Input
              label="Username"
              name="userName"
              type="text"
              placeholder="john_andrew123"
              value={formData.userName}
              onChange={handleInputChange}
              error={errors.userName}
              disabled={isLoading}
            />

            <div className="grid grid-cols-2 gap-4">
              <Input
                label="First name"
                name="firstName"
                type="text"
                placeholder="John"
                value={formData.firstName}
                onChange={handleInputChange}
                error={errors.firstName}
                disabled={isLoading}
              />

              <Input
                label="Last name"
                name="lastName"
                type="text"
                placeholder="Andrew"
                value={formData.lastName}
                onChange={handleInputChange}
                error={errors.lastName}
                disabled={isLoading}
              />
            </div>

            <Select
              label="Occupation"
              options={occupationOptions}
              placeholder="Select your occupation"
              value={formData.occupation}
              onChange={(value: any) => handleSelectChange('occupation', value)}
              error={errors.occupation}
              disabled={isLoading}
            />

            <Select
              label="Gender"
              options={genderOptions}
              placeholder="Select your gender"
              value={formData.gender}
              onChange={(value: any) => handleSelectChange('gender', value)}
              error={errors.gender}
              disabled={isLoading}
            />

            <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>
                  Creating Account...
                </div>
              ) : (
                'Create Account'
              )}
            </Button>

            <div className="mt-6 text-center">
              <span className="text-gray-600">Have an account? </span>
              <a href="/login" className="text-purple-600 hover:text-purple-500 font-medium">
                Login
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}