'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Flag, AlertCircle, Calendar, MapPin, Gavel } from 'lucide-react';
import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';

interface StewardingTemplateProps {
  viewData: StewardingViewData;
}

export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
  return (
    <Stack gap={6}>
      <Card>
        <Stack gap={6}>
          <Box>
            <Heading level={1}>Stewarding</Heading>
            <Text size="sm" color="text-gray-400" block mt={1}>
              Quick overview of protests and penalties across all races
            </Text>
          </Box>

          {/* Stats summary */}
          <Grid cols={3} gap={4}>
            <StatItem label="Pending" value={viewData.totalPending} color="text-warning-amber" />
            <StatItem label="Resolved" value={viewData.totalResolved} color="text-performance-green" />
            <StatItem label="Penalties" value={viewData.totalPenalties} color="text-error-red" />
          </Grid>

          {/* Content */}
          {viewData.races.length === 0 ? (
            <Stack align="center" py={12} gap={4}>
              <Surface variant="muted" rounded="full" padding={4}>
                <Icon icon={Flag} size={8} color="#10b981" />
              </Surface>
              <Box textAlign="center">
                <Text weight="semibold" size="lg" color="text-white" block mb={1}>All Clear!</Text>
                <Text size="sm" color="text-gray-400">No protests or penalties to review.</Text>
              </Box>
            </Stack>
          ) : (
            <Stack gap={4}>
              {viewData.races.map((race) => (
                <Surface
                  key={race.id}
                  variant="muted"
                  rounded="lg"
                  border
                  borderColor="border-neutral-800"
                  overflow="hidden"
                >
                  {/* Race Header */}
                  <Box p={4} bg="bg-neutral-800/50" borderBottom="1px solid" borderColor="border-neutral-800">
                    <Stack direction="row" align="center" gap={4} wrap>
                      <Stack direction="row" align="center" gap={2}>
                        <Icon icon={MapPin} size={4} color="#9ca3af" />
                        <Text weight="medium" color="text-white">{race.track}</Text>
                      </Stack>
                      <Stack direction="row" align="center" gap={2}>
                        <Icon icon={Calendar} size={4} color="#9ca3af" />
                        <Text size="sm" color="text-gray-400">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
                      </Stack>
                      <Surface variant="muted" rounded="full" padding={1} bg="bg-amber-500/10" px={2}>
                        <Text size="xs" weight="medium" color="text-warning-amber">{race.pendingProtests.length} pending</Text>
                      </Surface>
                    </Stack>
                  </Box>

                  {/* Race Content */}
                  <Box p={4}>
                    {race.pendingProtests.length === 0 && race.resolvedProtests.length === 0 && race.penalties.length === 0 ? (
                      <Box py={4}>
                        <Text size="sm" color="text-gray-400" block align="center">No items to display</Text>
                      </Box>
                    ) : (
                      <Stack gap={3}>
                        {race.pendingProtests.map((protest) => {
                          const protester = viewData.drivers.find(d => d.id === protest.protestingDriverId);
                          const accused = viewData.drivers.find(d => d.id === protest.accusedDriverId);

                          return (
                            <Surface
                              key={protest.id}
                              variant="muted"
                              rounded="lg"
                              border
                              padding={4}
                              bg="bg-neutral-800/30"
                              borderColor="border-neutral-800"
                            >
                              <Stack direction="row" align="start" justify="between" gap={4}>
                                <Box flex={1} minWidth="0">
                                  <Stack direction="row" align="center" gap={2} mb={2} wrap>
                                    <Icon icon={AlertCircle} size={4} color="#f59e0b" />
                                    <Text weight="medium" color="text-white">
                                      {protester?.name || 'Unknown'} vs {accused?.name || 'Unknown'}
                                    </Text>
                                    <Surface variant="muted" rounded="full" padding={1} bg="bg-amber-500/10" px={2}>
                                      <Text size="xs" weight="medium" color="text-warning-amber">Pending</Text>
                                    </Surface>
                                  </Stack>
                                  <Stack direction="row" align="center" gap={4} mb={2}>
                                    <Text size="sm" color="text-gray-400">Lap {protest.incident.lap}</Text>
                                    <Text size="sm" color="text-gray-400">•</Text>
                                    <Text size="sm" color="text-gray-400">Filed {new Date(protest.filedAt).toLocaleDateString()}</Text>
                                  </Stack>
                                  <Text size="sm" color="text-gray-300" block truncate>{protest.incident.description}</Text>
                                </Box>
                                <Text size="sm" color="text-gray-500">Review needed</Text>
                              </Stack>
                            </Surface>
                          );
                        })}

                        {race.penalties.map((penalty) => {
                          const driver = viewData.drivers.find(d => d.id === penalty.driverId);
                          return (
                            <Surface
                              key={penalty.id}
                              variant="muted"
                              rounded="lg"
                              border
                              padding={4}
                              bg="bg-neutral-800/30"
                              borderColor="border-neutral-800"
                            >
                              <Stack direction="row" align="center" justify="between" gap={4}>
                                <Stack direction="row" align="center" gap={3}>
                                  <Surface variant="muted" rounded="full" padding={2} bg="bg-red-500/10">
                                    <Icon icon={Gavel} size={4} color="#ef4444" />
                                  </Surface>
                                  <Box>
                                    <Stack direction="row" align="center" gap={2}>
                                      <Text weight="medium" color="text-white">{driver?.name || 'Unknown'}</Text>
                                      <Surface variant="muted" rounded="full" padding={1} bg="bg-red-500/10" px={2}>
                                        <Text size="xs" weight="medium" color="text-error-red">
                                          {penalty.type.replace('_', ' ').toUpperCase()}
                                        </Text>
                                      </Surface>
                                    </Stack>
                                    <Text size="sm" color="text-gray-400" block mt={1}>{penalty.reason}</Text>
                                  </Box>
                                </Stack>
                                <Box textAlign="right">
                                  <Text weight="bold" color="text-error-red" size="lg">
                                    {penalty.type === 'time_penalty' && `+${penalty.value}s`}
                                    {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
                                    {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
                                    {penalty.type === 'disqualification' && 'DSQ'}
                                    {penalty.type === 'warning' && 'Warning'}
                                    {penalty.type === 'license_points' && `${penalty.value} LP`}
                                  </Text>
                                </Box>
                              </Stack>
                            </Surface>
                          );
                        })}
                      </Stack>
                    )}
                  </Box>
                </Surface>
              ))}
            </Stack>
          )}
        </Stack>
      </Card>
    </Stack>
  );
}

function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
  return (
    <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/50" borderColor="border-neutral-800">
      <Box textAlign="center">
        <Text size="2xl" weight="bold" color={color}>{value}</Text>
        <Text size="sm" color="text-gray-400" block mt={1}>{label}</Text>
      </Box>
    </Surface>
  );
}