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

import React, { useState, useEffect } from 'react';
import { fetchBankDetails } from '../../../lib/api/api';
import { useRouter } from 'next/navigation';
import PaymentOption from '../../../components/loan/LoanRepayment/PaymentOption';
import CustomAmountInput from '../../../components/loan/LoanRepayment/CustomAmountInput';
import BankDetailsCard from '../../../components/loan/LoanRepayment/BankDetailsCard';
import ReviewCard from '../../../components/loan/LoanRepayment/ReviewCard';
import ActionButtons from '../../../components/loan/LoanRepayment/ActionButtons';
import { useAuth } from "../../../context/AuthContext";
// Main Page Component
export default function LoanRepaymentPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const { userLoanSummary } = useAuth();
  const [paymentType, setPaymentType] = useState<'full' | 'custom'>('full');
  const [customAmount, setCustomAmount] = useState('');
  const [bankDetails, setBankDetails] = useState<{
    bankName: string;
    accountNumber: string;
    accountName: string;
  } | null>(null); 

  const fetchWithdrawalData = async () => {
    try {
      const res = await fetchBankDetails();
      setBankDetails(res.data.data); 

    } catch (error: any) {
      if (error.response && error.response.data && error.response.data.errors && error.response.data.errors.length > 0) {
        console.log('Error fetching bank accounts:', error.response.data.errors[0].message);
      } else {
        console.log('Error fetching bank accounts:', error);
      }
    } finally {
      // if (isMounted)
      setLoading(false);
    }
  };
  
  useEffect(() => {
      fetchWithdrawalData();
  }, []);

  const loanData = {
    fullAmount: userLoanSummary?.totalRepaymentAmount || 0,
    loanAmount: userLoanSummary?.loanAmount || 0,
    interest: userLoanSummary?.interestRate || 0,
    totalAmountDue: userLoanSummary?.totalRepaymentAmount || 0,
    duration: userLoanSummary?.repaymentDuration || 0, // in months
  };  
  
  const installments = userLoanSummary
  ? Math.ceil(userLoanSummary.repaymentDuration / 30)
    : 1;
  
const repaymentAmount = paymentType === 'full' 
    ? userLoanSummary?.totalRepaymentAmount || 0
    : parseFloat(customAmount) || 0;

const monthlyRepayment = Math.round(
    (userLoanSummary?.totalRepaymentAmount || 0) / installments
);

const dueDate = userLoanSummary?.dueDate || 'N/A';

  const handleContinue = () => {
    console.log('Payment amount:', repaymentAmount);
  };

  const handleCancel = () => {
    router.back()
  };

  return (
    <div className="min-h-screen bg-white p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">

        <div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-8">
          {/* Left Column */}
          <div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">
              How much would you like to repay?
            </h2>
            <p className="text-gray-600 mb-6">
              Invest towards any personal or financial goal of your choice
            </p>

            <div className="space-y-4 mb-6">
              <PaymentOption
                label="Pay Full Amount"
                amount={loanData.fullAmount}
                isSelected={paymentType === 'full'}
                onClick={() => setPaymentType('full')}
              />
            </div>

            <CustomAmountInput
              value={customAmount}
              onChange={(value) => {
                setCustomAmount(value);
                setPaymentType('custom');
              }}
            />

            <BankDetailsCard
              bankName={bankDetails?.bankName || ""} 
              accountNumber={bankDetails?.accountNumber || ""}
              accountName={bankDetails?.accountName || ""}
              transferAmount={repaymentAmount}
            />

          </div>

          <ReviewCard
            loanAmount={userLoanSummary?.loanAmount || null}
            interest={userLoanSummary?.interestRate || null}
            totalAmountDue={userLoanSummary?.totalRepaymentAmount || null}
            dueDate={dueDate}
            dueAmount={monthlyRepayment}
            monthlyRepayment={monthlyRepayment}
            installments={installments}
            duration={userLoanSummary?.repaymentDuration || null}
          />
        </div>
        <div className='w-1/2 mx-auto mt-14'>
        <ActionButtons onContinue={handleContinue} onCancel={handleCancel} />
        </div>

      </div>
    </div>
  );
}