'use client';

import { CommissionSummary } from '@/types/commission.types';

interface CommissionSummaryCardsProps {
  summary: CommissionSummary | null;
  isLoading: boolean;
  error: string | null;
}

export const CommissionSummaryCards = ({ summary, isLoading, error }: CommissionSummaryCardsProps) => {
  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="bg-white rounded-lg shadow p-6 animate-pulse">
            <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
            <div className="h-8 bg-gray-200 rounded w-3/4"></div>
          </div>
        ))}
      </div>
    );
  }

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

  if (!summary) {
    return <div className="text-gray-500 p-4">No commission data available.</div>;
  }

  const cards = [
    {
      title: 'Total Commissions',
      value: summary.totalCommissions,
      subtitle: `${summary.totalAmount.toFixed(2)} total amount`,
      color: 'bg-blue-500',
    },
    {
      title: 'Paid',
      value: summary.paidAmount.toFixed(2),
      subtitle: `${summary.byType['PLATFORM']?.count || 0} platform + ${summary.byType['REFERRAL']?.count || 0} referral`,
      color: 'bg-green-500',
    },
    {
      title: 'Pending',
      value: summary.pendingAmount.toFixed(2),
      subtitle: `${summary.totalCommissions - (summary.paidAmount + summary.reversedAmount + summary.failedAmount)} transactions`,
      color: 'bg-yellow-500',
    },
    {
      title: 'Reversed',
      value: summary.reversedAmount.toFixed(2),
      subtitle: `${summary.byType['MANUAL_ADJUSTMENT']?.count || 0} adjustments`,
      color: 'bg-red-500',
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {cards.map((card, index) => (
        <div key={index} className="bg-white rounded-lg shadow overflow-hidden">
          <div className={`h-2 ${card.color}`}></div>
          <div className="p-6">
            <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">{card.title}</p>
            <p className="mt-2 text-3xl font-bold text-gray-900">
              {typeof card.value === 'number' ? card.value : `$${card.value}`}
            </p>
            <p className="mt-1 text-sm text-gray-500">{card.subtitle}</p>
          </div>
        </div>
      ))}
    </div>
  );
};