'use client';

import { TransactionDetail } from '../types/transactionDetail.type';
import TopupDetailCard from './details/TopupDetailCard';
import WithdrawalDetailCard from './details/WithdrawalDetailCard';
import ChargeDetailCard from './details/ChargeDetailCard';
import { Typography } from '@/components/atoms/typogrpahy';

interface TransactionDetailDisplayProps {
  transaction: TransactionDetail;
}

//comment

const TransactionDetailDisplay: React.FC<TransactionDetailDisplayProps> = ({
  transaction,
}) => {
  const renderTransactionDetail = () => {
    // Normalize transaction_type to uppercase for case-insensitive matching
    const transactionType = transaction.transaction_type 
      ? String(transaction.transaction_type).toUpperCase() 
      : null;
    
    if (!transactionType) {
      return (
        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
          <Typography variant="h4" className="mb-4">Transaction Type Not Available</Typography>
          <Typography variant="b2">Transaction type is missing from the response.</Typography>
          <Typography variant="b2" className="mt-2 text-gray-500">
            Transaction ID: {transaction.id}
          </Typography>
        </div>
      );
    }
    
    switch (transactionType) {
      case 'TOPUP':
        return <TopupDetailCard transaction={transaction} />;
      
      case 'WITHDRAWAL':
        return <WithdrawalDetailCard transaction={transaction} />;
      
      case 'INVOICE':
        return (
          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
            <Typography variant="h4" className="mb-4">Invoice Transaction</Typography>
            <Typography variant="b2">Invoice details component coming soon...</Typography>
          </div>
        );
      
      case 'CHARGE':
        return <ChargeDetailCard transaction={transaction} />;
      
      case 'RESERVATION':
        return (
          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
            <Typography variant="h4" className="mb-4">Reservation Transaction</Typography>
            <Typography variant="b2">Reservation details component coming soon...</Typography>
          </div>
        );
      
      default:
        return (
          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
            <Typography variant="h4" className="mb-4">Unknown Transaction Type</Typography>
            <Typography variant="b2">Type: {transactionType}</Typography>
            <Typography variant="b2" className="mt-2 text-gray-500">
              Transaction ID: {transaction.id}
            </Typography>
          </div>
        );
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="mb-6">
        <Typography variant="h2" className="font-bold text-gray-900 dark:text-gray-100">
          Transaction Detail
        </Typography>
        <Typography variant="b2" className="text-gray-600 dark:text-gray-400">
          {transaction.transaction_type} Transaction
        </Typography>
      </div>

      {/* Transaction Detail Card */}
      {renderTransactionDetail()}
    </div>
  );
};

export default TransactionDetailDisplay;