'use client'

import React from 'react';
import { formatAmount } from '../../lib/utils/helpers';
import { TransactionRowProps, Transaction } from '../../lib/interfaces';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const TransactionRow: React.FC<TransactionRowProps> = ({ transaction, index }) => {
  const isCredit = transaction.status === 'Credit';
  
  return (
    <tr key={index} className="border-b border-gray-50 grid grid-cols-[3fr_1fr_1fr_1fr]">
      <td className="py-4 sm:py-1 text-gray-900 text-sm sm:text-base">{transaction.category}</td>
      <td className={`py-4 sm:py-1 text-sm sm:text-base font-medium ${isCredit ? 'text-green-600' : 'text-red-600'}`}>
        {isCredit ? '+' : '-'}{formatAmount(transaction.amount)}
      </td>
      <td className="py-4 sm:py-1 text-gray-600 text-sm sm:text-base hidden sm:table-cell">{transaction.date}</td>
      <td className="py-4 sm:py-1">
        <span className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium ${
          isCredit ? 'text-green-700 bg-green-50' : 'text-red-700 bg-red-50'
        }`}>
          {transaction.status}
        </span>
      </td>
    </tr>
  );
};

// Transaction History Component
interface TransactionHistoryProps {
  transactionHeader?: string;
  transactionDescription?: string;
  transactions?: Transaction[];
  limit?: number;
}

export const TransactionHistory: React.FC<TransactionHistoryProps> = ({
  transactionHeader,
  transactionDescription,
  transactions = [],
  limit,
}) => {
  const currentPath = usePathname();

  const displayedTransactions = limit ? transactions.slice(0, limit) : transactions;

  // 🧭 Determine next link dynamically
  let viewAllLink = '/dashboard/all-transactions';

  if (currentPath.includes('/investments')) {
    viewAllLink = '/investments/investmentsHistory';
  } else if (currentPath.includes('/dashboard')) {
    viewAllLink = '/dashboard/all-transactions';
  }

  return (
    <div className="bg-white shadow-sm mt-6">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 sm:mb-6">
        <div className="mb-4 sm:mb-0">
          <h3 className="text-base sm:text-xl font-semibold text-gray-900 mb-1">
            {transactionHeader}
          </h3>
          <p className="text-gray-600 text-xs sm:text-sm">{transactionDescription}</p>
        </div>

        <Link
          href={viewAllLink}
          className="text-sm sm:text-base font-medium hover:underline"
        >
          View All
        </Link>
      </div>

      <div className="overflow-x-auto bg-[#F5F5F599] rounded-t-3xl p-4 px-10 border border-[#1C1C1C1A]">
        <table className="w-full min-w-full">
          <thead>
            <tr className="grid grid-cols-[3fr_1fr_1fr_1fr] border-b border-gray-100">
              <th className="text-left py-2 sm:py-3 text-gray-600 font-medium text-sm sm:text-base">Description</th>
              <th className="text-left py-2 sm:py-3 text-gray-600 font-medium text-sm sm:text-base">Amount</th>
              <th className="text-left py-2 sm:py-3 text-gray-600 font-medium text-sm sm:text-base hidden sm:table-cell">Date</th>
              <th className="text-left py-2 sm:py-3 text-gray-600 font-medium text-sm sm:text-base">Status</th>
            </tr>
          </thead>
          <tbody>
            {displayedTransactions?.map((transaction, index) => (
              <TransactionRow
                key={index}
                transaction={transaction}
                index={index} />
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};