/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import { FinancialCard } from "./FinancialCard";
import { LoansCard } from "./LoansCard";
import { TransactionHistory } from "./TransactionHistory";
import { useAuth } from "../../context/AuthContext";
import { Transaction } from "../../lib/interfaces";


export interface Loan {
  loanId: string;
  loanAmount: number;
  repaymentDuration: number;
  administrativeFee: number;
  interestRate: number;
  totalRepaymentAmount: number;
  status?: string; // made optional
  dateApplied: string;
  dateApproved: string;
  dueDate: string;
}

export const Finances = ({
  savings,
  investments,
  loans,
}: {
  savings: number;
  investments: number;
  loans: Loan | null;
  }) => {
  const { userTransactionsDetails } = useAuth();

  const transactions: Transaction[] = 
  (userTransactionsDetails?.transactions || []).map((transaction: any) => ({
    transactionId: transaction.transactionId || crypto.randomUUID(),
    transactionDate: transaction.transactionDate,
    transactionType: transaction.transactionType,
    description: transaction.description,
    amount: transaction.amount,
    status: transaction.transactionType, // e.g., Credit/Debit
    category: transaction.description,   // same as before
    date: new Date(transaction.transactionDate).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    }),

    firstName: transaction.firstName || null,
    walletId: transaction.walletId || '',
    walletAccountNumber: transaction.walletAccountNumber || '',
    walletAccountName: transaction.walletAccountName || '',
    walletBalance: transaction.walletBalance || '0.00',
  }));

  
    if (!loans) {
      return <div>No loan data available</div>;
    }
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-[3fr_1.5fr] gap-4 sm:gap-6 mb-12 sm:mb-6">
      {/* Left column */}
          <div className="gap-2 sm:gap-4">
            <div className="grid md:grid-cols-2 gap-4 sm:gap-6">
              <FinancialCard
                title="Savings"
                amount={savings}
                bgColor="bg-gradient-to-br from-pink-500 to-pink-600"
                textColor="text-pink-100"
                growth="+9.56%"
              />

              <FinancialCard 
                title="Investments"
                amount={investments}
                growth="+9.56%"
                bgColor="bg-gradient-to-br from-purple-600 to-[#541592]"
                textColor="text-purple-100"
              />
            </div>
            <TransactionHistory
              transactionHeader="Transaction History"
              transactionDescription="This is an overview of your savings and investment activities"
              transactions={transactions}
              limit={5}
            />
      </div>

      {/* Right column */}
      <div>
        <LoansCard loan={loans} />
      </div>
    </div>
  );
};