import {
  Card,
  Text,
  Stack,
  Group,
  UnstyledButton,
  Badge,
} from "@mantine/core";
import { TournamentInfo } from "@/features/tournaments/types";
import {
  TrophyIcon,
  CrownIcon,
  MedalIcon,
} from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import Avatar from "@/components/avatar";

interface TournamentCardProps {
  tournament: TournamentInfo;
}

export const TournamentCard = ({ tournament }: TournamentCardProps) => {
  const navigate = useNavigate();

  return (
    <UnstyledButton
      w="100%"
      onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
      style={{ borderRadius: "var(--mantine-radius-md)" }}
      styles={{
        root: {
          "&:hover": {
            transform: "translateY(-2px)",
            transition: "transform 0.15s ease",
          },
        },
      }}
    >
      <Card
        withBorder
        radius="md"
        p="lg"
        w="100%"
        style={{
          transition: "all 0.15s ease",
          border: "1px solid var(--mantine-color-default-border)",
        }}
        styles={{
          root: {
            "&:hover": {
              borderColor: "var(--mantine-primary-color-filled)",
              boxShadow: "var(--mantine-shadow-sm)",
            },
          },
        }}
      >
        <Group justify="space-between" align="center">
          <Group gap="md" align="center">
            <Avatar
              size={90}
              radius="sm"
              name={tournament.name}
              contain
              src={
                tournament.logo
                  ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
                  : undefined
              }
            >
              <TrophyIcon size={20} />
            </Avatar>
            <Stack gap="xs">
              <Text fw={600} size="lg" lineClamp={2}>
                {tournament.name}
              </Text>
              {(tournament.first_place || tournament.second_place || tournament.third_place) && (
                <Stack gap={6} >
                  {tournament.first_place && (
                    <Badge
                      size="md"
                      radius="md"
                      variant="filled"
                      color="yellow"
                      leftSection={
                        <CrownIcon size={16} />
                      }
                      style={{
                        textTransform: 'none',
                        fontWeight: 600,
                        color: 'white',
                      }}
                    >
                      {tournament.first_place.name}
                    </Badge>
                  )}
                  {tournament.second_place && (
                    <Badge
                      size="md"
                      radius="md"
                      color="gray"
                      variant="filled"
                      leftSection={
                        <MedalIcon size={16} />
                      }
                      style={{
                        textTransform: 'none',
                        fontWeight: 500,
                      }}
                    >
                      {tournament.second_place.name}
                    </Badge>
                  )}
                  {tournament.third_place && (
                    <Badge
                      size="md"
                      radius="md"
                      color="orange"
                      variant="filled"
                      leftSection={
                        <MedalIcon size={16} />
                      }
                      style={{
                        textTransform: 'none',
                        fontWeight: 500,
                      }}
                    >
                      {tournament.third_place.name}
                    </Badge>
                  )}
                </Stack>
              )}
            </Stack>
          </Group>
        </Group>
      </Card>
    </UnstyledButton>
  );
};