import { Stack, Group, Text, ThemeIcon, Box, Center } from "@mantine/core";
import { CrownIcon, MedalIcon } from "@phosphor-icons/react";
import { Tournament } from "../types";

interface PodiumProps {
  tournament: Tournament;
}

export const Podium = ({ tournament }: PodiumProps) => {
  if (!tournament.first_place) return;

  return (
    <Stack gap="xs" px="md">
      {tournament.first_place && (
        <Group
          gap="md"
          p="md"
          style={{
            backgroundColor: 'var(--mantine-color-yellow-light)',
            borderRadius: 'var(--mantine-radius-md)',
            border: '3px solid var(--mantine-color-yellow-outline)',
            boxShadow: 'var(--mantine-shadow-md)',
          }}
        >
          <ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
            <CrownIcon size={24} />
          </ThemeIcon>
          <Stack gap={4} style={{ flex: 1 }}>
            <Text size="md" fw={600}>
              {tournament.first_place.name}
            </Text>
            <Group gap="xs">
              {tournament.first_place.players?.map((player) => (
                <Text key={player.id} size="sm" c="dimmed">
                  {player.first_name} {player.last_name}
                </Text>
              ))}
            </Group>
          </Stack>
        </Group>
      )}

      {tournament.second_place && (
        <Group
          gap="md"
          p="xs"
          style={{
            backgroundColor: 'var(--mantine-color-default)',
            borderRadius: 'var(--mantine-radius-md)',
            border: '2px solid var(--mantine-color-default-border)',
            boxShadow: 'var(--mantine-shadow-sm)',
          }}
        >
          <ThemeIcon size="lg" color="gray" variant="light" radius="xl">
            <MedalIcon size={20} />
          </ThemeIcon>
          <Stack gap={4} style={{ flex: 1 }}>
            <Text size="sm" fw={600}>
              {tournament.second_place.name}
            </Text>
            <Group gap="xs">
              {tournament.second_place.players?.map((player) => (
                <Text key={player.id} size="xs" c="dimmed">
                  {player.first_name} {player.last_name}
                </Text>
              ))}
            </Group>
          </Stack>
        </Group>
      )}

      {tournament.third_place && (
        <Group
          gap="md"
          p="xs"
          style={{
            backgroundColor: 'var(--mantine-color-orange-light)',
            borderRadius: 'var(--mantine-radius-md)',
            border: '2px solid var(--mantine-color-orange-outline)',
            boxShadow: 'var(--mantine-shadow-sm)',
          }}
        >
          <ThemeIcon size="lg" color="orange" variant="light" radius="xl">
            <MedalIcon size={18} />
          </ThemeIcon>
          <Stack gap={4} style={{ flex: 1 }}>
            <Text size="sm" fw={600}>
              {tournament.third_place.name}
            </Text>
            <Group gap="xs">
              {tournament.third_place.players?.map((player) => (
                <Text key={player.id} size="xs" c="dimmed">
                  {player.first_name} {player.last_name}
                </Text>
              ))}
            </Group>
          </Stack>
        </Group>
      )}
    </Stack>
  );
};