'use client';

import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Clock, MessageSquare, ShieldAlert } from 'lucide-react';

interface Protest {
  id: string;
  raceName: string;
  protestingDriver: string;
  accusedDriver: string;
  description: string;
  formattedSubmittedAt: string;
  status: 'pending' | 'under_review' | 'resolved' | 'rejected';
}

interface StewardingQueuePanelProps {
  protests: Protest[];
  onReview: (id: string) => void;
}

export function StewardingQueuePanel({ protests, onReview }: StewardingQueuePanelProps) {
  return (
    <Card variant="outline" p={0} rounded="lg" overflow="hidden" className="bg-graphite-black">
      <Stack px={6} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
        <Stack direction="row" align="center" justify="between">
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={ShieldAlert} size={4} color="text-error-red" />
            <Text weight="bold" letterSpacing="wider" size="sm" block>
              STEWARDING QUEUE
            </Text>
          </Stack>
          <Stack px={2} py={0.5} rounded="md" bg="bg-error-red/10" border borderColor="border-error-red/20">
            <Text size="xs" color="text-error-red" weight="bold">
              {protests.filter(p => p.status === 'pending').length} Pending
            </Text>
          </Stack>
        </Stack>
      </Stack>

      <Stack gap={0}>
        {protests.length === 0 ? (
          <Stack py={12} align="center" justify="center">
            <Stack align="center" gap={3}>
              <Icon icon={ShieldAlert} size={8} color="text-gray-700" />
              <Text color="text-gray-500">No active protests in the queue.</Text>
            </Stack>
          </Stack>
        ) : (
          protests.map((protest) => (
            <Stack key={protest.id} p={6} borderBottom borderColor="border-charcoal-outline" className="transition-colors hover:bg-white/5">
              <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="start" gap={4}>
                <Stack gap={3} flexGrow={1}>
                  <Stack direction="row" align="center" gap={2}>
                    <StatusIndicator status={protest.status} />
                    <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest">
                      {protest.raceName.toUpperCase()}
                    </Text>
                    <Stack w="1" h="1" rounded="full" bg="bg-gray-700">{null}</Stack>
                    <Stack direction="row" align="center" gap={1.5}>
                      <Icon icon={Clock} size={3} color="text-gray-600" />
                      <Text size="xs" color="text-gray-500">
                        {protest.formattedSubmittedAt}
                      </Text>
                    </Stack>
                  </Stack>

                  <Stack>
                    <Stack direction="row" align="center" gap={2} wrap>
                      <Text weight="bold" color="text-white">{protest.protestingDriver}</Text>
                      <Text size="xs" color="text-gray-600" weight="bold">VS</Text>
                      <Text weight="bold" color="text-white">{protest.accusedDriver}</Text>
                    </Stack>
                    <Text size="sm" color="text-gray-400" mt={2} lineClamp={2}>
                      &ldquo;{protest.description}&rdquo;
                    </Text>
                  </Stack>
                </Stack>

                <Stack direction="row" align="center" gap={3} w={{ base: 'full', md: 'auto' }}>
                  <Button 
                    variant="secondary" 
                    size="sm" 
                    onClick={() => onReview(protest.id)}
                  >
                    <Stack direction="row" align="center" gap={2}>
                      <Icon icon={MessageSquare} size={3.5} />
                      <Text>Review</Text>
                    </Stack>
                  </Button>
                </Stack>
              </Stack>
            </Stack>
          ))
        )}
      </Stack>
    </Card>
  );
}

function StatusIndicator({ status }: { status: Protest['status'] }) {
  const colors = {
    pending: 'bg-warning-amber',
    under_review: 'bg-primary-blue',
    resolved: 'bg-performance-green',
    rejected: 'bg-gray-500',
  };

  return (
    <Stack w="2" h="2" rounded="full" bg={colors[status]} {...({ animate: status === 'under_review' ? 'pulse' : 'none' } as any)}>{null}</Stack>
  );
}