/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState } from 'react';
import { ReviewCard } from '../../../components/loan/ReviewCard';
import { PageHeader } from '../../../components/PageHeader';
import { LoanApplicationForm } from '../../../components/loan/LoanApplicationForm';
import { calculateLoanDetails } from '../../../lib/utils/helpers';
import { ActionButtons } from '../../../components/loan/ActionButtons';
import { useAuth } from '../../..//context/AuthContext';
import Loader from '../../../components/loader';
import { useRouter } from "next/navigation";

export default function ApplyForLoanPage() {
  const router = useRouter();
  const { token } = useAuth();
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState('');
  const [modalMessage, setModalMessage] = useState('');
  const [isSuccess, setIsSuccess] = useState(false);
  
  const [formData, setFormData] = useState({
    // Employment & Address
    employmentStatus: '',
    houseAddress: '',
    
    // Work Info
    companyName: '',
    salaryAmount: '',
    salaryPayDay: '',
    
    // First Guarantor
    firstGuarantorName: '',
    firstGuarantorRelationship: '',
    firstGuarantorPhoneNumber: '',
    
    // Second Guarantor
    secondGuarantorName: '',
    secondGuarantorRelationship: '',
    secondGuarantorPhoneNumber: '',
    
    // Bank Info
    bankName: '',
    accountNumber: '',
    
    // Loan Details
    loanPurpose: '',
    loanAmount: '',
    loanTenure: '',
  });

  const handleFormChange = (data: any) => {
    setFormData(data);
  };

  const handleApplyForLoan = async () => {

    console.log(formData)
    // Validate required fields
    if (!formData.houseAddress || !formData.companyName || !formData.salaryAmount || 
        !formData.salaryPayDay || !formData.firstGuarantorName || 
        !formData.bankName || !formData.accountNumber || !formData.loanPurpose) {
      setModalTitle('Validation Error');
      setModalMessage('Please fill in all required fields.');
      setIsSuccess(false);
      setModalVisible(true);
      return;
    }

    setLoading(true);

    const tenureInDays = Number(formData.loanTenure) * 30;
    try {
      const payload = {
          employmentStatus: formData.employmentStatus,
          usersAdress: formData.houseAddress,
          workInfo: {
            salary: formData.salaryAmount, // Keep as string
            salaryDay: formData.salaryPayDay, // Keep as string
            companysName: formData.companyName,
          },
          guarantorInfo: {
            guarantorName: formData.firstGuarantorName,
            guarantorRelationship: formData.firstGuarantorRelationship,
            guarantorPhoneNumber: formData.firstGuarantorPhoneNumber,
          },
          guarantorInfo2: {
            guarantorName: formData.secondGuarantorName,
            guarantorRelationship: formData.secondGuarantorRelationship,
            guarantorPhoneNumber: formData.secondGuarantorPhoneNumber,
          },
          bankInfo: {
            bankAccount: formData.bankName,
            accountNumber: formData.accountNumber,
          },
          Purpose: formData.loanPurpose,
          loanAmount: parseFloat(formData.loanAmount),
          repaymentDuration: tenureInDays,
      };

      const response = await fetch(
        'https://webapidev.subacapital.co/api/Loan/apply-for-loan',
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify(payload),
        }
      );

      const result = await response.json();

      if (response.ok && result.isSuccessful) {
        setModalTitle('Success');
        setModalMessage(result.message || 'Loan application submitted successfully!');
        setIsSuccess(true);
        setModalVisible(true);
      } else {
        const errorMessage = 
          result?.errors?.[0]?.message || 
          result?.message || 
          result?.title ||
          'Loan application failed. Please try again.';
        
        setModalTitle('Error');
        setModalMessage(errorMessage);
        setIsSuccess(false);
        setModalVisible(true);
      }
    } catch (error: any) {
      console.error('Error applying for loan:', error);
      setModalTitle('Error');
      setModalMessage(error.message || 'An unexpected error occurred. Please try again.');
      setIsSuccess(false);
      setModalVisible(true);
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    // Reset form or navigate back
    router.back()
  };

  const handleCloseModal = () => {
    setModalVisible(false);
    if (isSuccess) {
      // Navigate to loan dashboard or refresh
      window.location.href = '/loan';
    }
  };

  // Calculate loan details dynamically based on current form values
  const loanAmount = parseFloat(formData.loanAmount) || 0;
  const tenure = parseInt(formData.loanTenure) || 6;
  const loanDetails = calculateLoanDetails(loanAmount, tenure);

  if (loading) {
    return (
      <main className="flex justify-center items-center h-screen bg-white">
        <Loader />
      </main>
    );
  }

  return (
    <div className="min-h-screen bg-white p-4 sm:p-8">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-8">
        {/* Left Column - Form */}
        <div className="bg-white rounded-3xl shadow-sm p-6 sm:p-8">
          <PageHeader
            title="Apply for loan"
            description="Invest towards any personal or financial goal of your choice"
          />
          <LoanApplicationForm 
            onSubmit={handleApplyForLoan} 
            onCancel={handleCancel}
            onChange={handleFormChange}
          />
        </div>

        {/* Right Column - Review Card */}
        <ReviewCard {...loanDetails} />
      </div>

      <div className="mt-8 max-w-2xl mx-auto">
        <ActionButtons 
          onContinue={handleApplyForLoan} 
          onCancel={handleCancel} 
        />
      </div>

      {/* Response Modal */}
      {modalVisible && (
        <div className="fixed inset-0 flex items-center justify-center bg-black/40 z-50">
          <div className="bg-white rounded-xl p-6 text-center max-w-sm mx-4">
            <h3 className={`text-lg font-bold mb-3 ${isSuccess ? 'text-green-600' : 'text-red-600'}`}>
              {modalTitle}
            </h3>
            <p className="text-gray-700 mb-4">
              {modalMessage}
            </p>
            <button
              onClick={handleCloseModal}
              className={`px-6 py-2 rounded-lg text-white ${
                isSuccess ? 'bg-green-600 hover:bg-green-700' : 'bg-red-600 hover:bg-red-700'
              }`}
            >
              {isSuccess ? 'Continue' : 'Try Again'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}