'use client';

import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import {
    AlertCircle,
    ArrowUpRight,
    CheckCircle2,
    Clock,
    DollarSign
} from 'lucide-react';

export interface PayoutItem {
  id: string;
  date: string;
  amount: string;
  status: 'pending' | 'processing' | 'completed' | 'failed';
  recipient: string;
  description: string;
}

interface SponsorPayoutQueueTableProps {
  payouts: PayoutItem[];
}

const STATUS_CONFIG = {
  pending: { icon: Clock, color: 'text-warning-amber', label: 'Pending' },
  processing: { icon: ArrowUpRight, color: 'text-primary-blue', label: 'Processing' },
  completed: { icon: CheckCircle2, color: 'text-performance-green', label: 'Completed' },
  failed: { icon: AlertCircle, color: 'text-racing-red', label: 'Failed' },
};

/**
 * SponsorPayoutQueueTable
 * 
 * High-density table for tracking sponsorship payouts and financial transactions.
 */
export function SponsorPayoutQueueTable({ payouts }: SponsorPayoutQueueTableProps) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Date</TableHeader>
          <TableHeader>Recipient</TableHeader>
          <TableHeader>Description</TableHeader>
          <TableHeader textAlign="right">Amount</TableHeader>
          <TableHeader textAlign="center">Status</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {payouts.map((payout) => {
          const status = STATUS_CONFIG[payout.status];
          return (
            <TableRow key={payout.id}>
              <TableCell>
                <Text size="sm" color="text-gray-300">{payout.date}</Text>
              </TableCell>
              <TableCell>
                <Text size="sm" weight="medium" color="text-white">{payout.recipient}</Text>
              </TableCell>
              <TableCell>
                <Text size="sm" color="text-gray-400">{payout.description}</Text>
              </TableCell>
              <TableCell textAlign="right">
                <Stack direction="row" align="center" justify="end" gap={1}>
                  <Icon icon={DollarSign} size={3} color="text-gray-500" />
                  <Text size="sm" weight="bold" color="text-white">{payout.amount}</Text>
                </Stack>
              </TableCell>
              <TableCell>
                <Stack display="flex" justifyContent="center">
                  <Badge variant={payout.status === 'completed' ? 'success' : payout.status === 'failed' ? 'danger' : 'warning'}>
                    <Stack direction="row" align="center" gap={1.5}>
                      <Icon icon={status.icon} size={3} />
                      <Text size="xs" weight="bold" uppercase letterSpacing="wider">{status.label}</Text>
                    </Stack>
                  </Badge>
                </Stack>
              </TableCell>
            </TableRow>
          );
        })}
        {payouts.length === 0 && (
          <TableRow>
            <TableCell colSpan={5} textAlign="center" py={12}>
              <Text color="text-gray-500">No payouts in queue</Text>
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}