import { Button } from '@/ui/Button';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { AlertTriangle, Check, Clock, Download, Receipt } from 'lucide-react';

export interface Transaction {
  id: string;
  formattedDate: string;
  description: string;
  formattedAmount: string;
  status: 'paid' | 'pending' | 'overdue' | 'failed';
  invoiceNumber: string;
  type: string;
}

interface TransactionTableProps {
  transactions: Transaction[];
  onDownload?: (id: string) => void;
}

const STATUS_CONFIG = {
  paid: {
    icon: Check,
    label: 'Paid',
    color: 'text-performance-green',
    bg: 'bg-performance-green/10',
    border: 'border-performance-green/30'
  },
  pending: {
    icon: Clock,
    label: 'Pending',
    color: 'text-warning-amber',
    bg: 'bg-warning-amber/10',
    border: 'border-warning-amber/30'
  },
  overdue: {
    icon: AlertTriangle,
    label: 'Overdue',
    color: 'text-racing-red',
    bg: 'bg-racing-red/10',
    border: 'border-racing-red/30'
  },
  failed: {
    icon: AlertTriangle,
    label: 'Failed',
    color: 'text-racing-red',
    bg: 'bg-racing-red/10',
    border: 'border-racing-red/30'
  },
};

/**
 * TransactionTable
 * 
 * A semantic table for displaying financial transactions.
 * Dense layout with thin dividers, optimized for ops panels.
 */
export function TransactionTable({ transactions, onDownload }: TransactionTableProps) {
  return (
    <Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
      <Grid className="hidden md:grid" cols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
        <Stack colSpan={5}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
        </Stack>
        <Stack colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
        </Stack>
        <Stack colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
        </Stack>
        <Stack colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
        </Stack>
        <Stack colSpan={1} textAlign="right">
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
        </Stack>
      </Grid>

      <Stack>
        {transactions.map((tx, index) => {
          const status = STATUS_CONFIG[tx.status];
          return (
            <Grid 
              key={tx.id} 
              cols={{ base: 1, md: 12 }}
              gap={4} 
              p={4} 
              alignItems="center"
              borderBottom={index !== transactions.length - 1}
              borderColor="border-charcoal-outline/30"
              className="transition-colors hover:bg-bg-iron-gray/20"
            >
              <Stack colSpan={{ base: 1, md: 5 } as any} direction="row" align="center" gap={3}>
                <Stack w="8" h="8" rounded="lg" bg="bg-iron-gray/50" align="center" justify="center">
                  <Icon icon={Receipt} size={4} color="text-gray-400" />
                </Stack>
                <Stack>
                  <Text weight="medium" color="text-white" block>{tx.description}</Text>
                  <Text size="xs" color="text-gray-500">{tx.invoiceNumber} • {tx.type}</Text>
                </Stack>
              </Stack>

              <Stack colSpan={{ base: 1, md: 2 } as any}>
                <Text size="sm" color="text-gray-400">{tx.formattedDate}</Text>
              </Stack>

              <Stack colSpan={{ base: 1, md: 2 } as any}>
                <Text weight="semibold" color="text-white">{tx.formattedAmount}</Text>
              </Stack>

              <Stack colSpan={{ base: 1, md: 2 } as any}>
                <Stack direction="row" align="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg} border borderColor={status.border}>
                  <Icon icon={status.icon} size={3} color={status.color as any} />
                  <Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
                </Stack>
              </Stack>

              <Stack colSpan={{ base: 1, md: 1 } as any} textAlign="right">
                <Button 
                  variant="ghost" 
                  size="sm" 
                  onClick={() => onDownload?.(tx.id)}
                  icon={<Icon icon={Download} size={3} />}
                >
                  PDF
                </Button>
              </Stack>
            </Grid>
          );
        })}
      </Stack>
    </Stack>
  );
}