'use client';

import { Commission } from '@/types/commission.types';
import { format } from 'date-fns';

interface CommissionHistoryTableProps {
  commissions: Commission[];
  isLoading: boolean;
  error: string | null;
}

export const CommissionHistoryTable = ({ commissions, isLoading, error }: CommissionHistoryTableProps) => {
  if (isLoading) {
    return <div className="text-center p-4">Loading commission history...</div>;
  }

  if (error) {
    return <div className="text-center p-4 text-red-500">{error}</div>;
  }

  if (commissions.length === 0) {
    return <div className="text-center p-4">No commission history found.</div>;
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border border-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reference</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {commissions.map((commission) => (
            <tr key={commission.id}>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {format(new Date(commission.createdAt), 'yyyy-MM-dd HH:mm')}
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{commission.type}</td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {commission.amount.toFixed(2)} {commission.currency}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span
                  className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                    commission.status === 'PAID' ? 'bg-green-100 text-green-800' :
                    commission.status === 'REVERSED' ? 'bg-yellow-100 text-yellow-800' :
                    'bg-gray-100 text-gray-800'
                  }`}
                >
                  {commission.status}
                </span>
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{commission.tradeId || commission.referenceId || 'N/A'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};