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

export interface Transaction {
  id: string;
  date: string;
  description: string;
  amount: number;
  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 (
    <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
      <Box display={{ base: 'none', md: 'grid' }} gridCols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
        <Box colSpan={5}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
        </Box>
        <Box colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
        </Box>
        <Box colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
        </Box>
        <Box colSpan={2}>
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
        </Box>
        <Box colSpan={1} textAlign="right">
          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
        </Box>
      </Box>

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

              <Box colSpan={{ base: 1, md: 2 }}>
                <Text size="sm" color="text-gray-400">{new Date(tx.date).toLocaleDateString()}</Text>
              </Box>

              <Box colSpan={{ base: 1, md: 2 }}>
                <Text weight="semibold" color="text-white">${tx.amount.toFixed(2)}</Text>
              </Box>

              <Box colSpan={{ base: 1, md: 2 }}>
                <Box display="inline-flex" alignItems="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg as BoxProps<'div'>['bg']} border borderColor={status.border as BoxProps<'div'>['borderColor']}>
                  <Icon icon={status.icon} size={3} color={status.color as any} />
                  <Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
                </Box>
              </Box>

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