import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Button } from '@/ui/Button';
import { Check, X, Clock } from 'lucide-react';
import { Icon } from '@/ui/Icon';

interface JoinRequestsPanelProps {
  requests: Array<{
    id: string;
    driverName: string;
    driverAvatar?: string;
    message?: string;
    requestedAt: string;
  }>;
  onAccept: (id: string) => void;
  onDecline: (id: string) => void;
}

export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
  if (requests.length === 0) {
    return (
      <Box p={8} border borderDash borderColor="border-steel-grey" bg="surface-charcoal/20" textAlign="center">
        <Text color="text-gray-500" size="sm">No pending join requests</Text>
      </Box>
    );
  }

  return (
    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
      <Box p={4} borderBottom borderColor="border-steel-grey" bg="base-graphite/50">
        <Heading level={4} weight="bold" className="uppercase tracking-widest text-gray-400 text-[10px]">
          Pending Requests ({requests.length})
        </Heading>
      </Box>
      <Stack gap={0} className="divide-y divide-border-steel-grey/30">
        {requests.map((request) => (
          <Box key={request.id} p={4} className="hover:bg-white/[0.02] transition-colors">
            <Stack direction="row" align="start" justify="between" gap={4}>
              <Stack direction="row" align="center" gap={3}>
                <Box w="10" h="10" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center>
                  <Text size="xs" weight="bold" color="text-primary-blue">
                    {request.driverName.substring(0, 2).toUpperCase()}
                  </Text>
                </Box>
                <Box>
                  <Text weight="bold" size="sm" color="text-white" block>{request.driverName}</Text>
                  <Stack direction="row" align="center" gap={1.5} mt={0.5}>
                    <Icon icon={Clock} size={3} color="text-gray-500" />
                    <Text size="xs" color="text-gray-500" font="mono">{request.requestedAt}</Text>
                  </Stack>
                </Box>
              </Stack>
              
              <Stack direction="row" align="center" gap={2}>
                <Button 
                  variant="secondary" 
                  size="sm" 
                  onClick={() => onDecline(request.id)}
                  className="h-8 w-8 p-0 flex items-center justify-center border-red-500/30 hover:bg-red-500/10"
                >
                  <Icon icon={X} size={4} color="text-red-400" />
                </Button>
                <Button 
                  variant="primary" 
                  size="sm" 
                  onClick={() => onAccept(request.id)}
                  className="h-8 w-8 p-0 flex items-center justify-center"
                >
                  <Icon icon={Check} size={4} />
                </Button>
              </Stack>
            </Stack>
            {request.message && (
              <Box mt={3} p={3} bg="base-graphite/30" borderLeft borderPrimary borderColor="primary-blue/40">
                <Text size="xs" color="text-gray-400" italic leading="relaxed">
                  &ldquo;{request.message}&rdquo;
                </Text>
              </Box>
            )}
          </Box>
        ))}
      </Stack>
    </Box>
  );
}