import {
  Card,
  Text,
  Stack,
  Group,
  UnstyledButton,
  Badge,
  Title,
} 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;
}

const tournamentCardCss = `
.flxn-tournament-card {
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
@media (hover: hover) {
  .flxn-tournament-card.flxn-tournament-card:hover {
    border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 40%, var(--mantine-color-default-border));
    box-shadow: var(--mantine-shadow-sm);
  }
}
.flxn-tournament-card.flxn-tournament-card:active {
  border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 55%, var(--mantine-color-default-border));
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .flxn-tournament-card {
    transition: none;
  }
}
`;

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

  return (
    <UnstyledButton
      w="100%"
      onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
      style={{ borderRadius: "var(--mantine-radius-md)" }}
    >
      <style href="flxn-tournament-card" precedence="medium">
        {tournamentCardCss}
      </style>
      <Card
        withBorder
        radius="md"
        p="lg"
        w="100%"
        className="flxn-tournament-card"
      >
        <Group justify="space-between" align="center">
          <Group gap="md" align="center">
            <Avatar
              size={75}
              radius="sm"
              name={tournament.name}
              contain
              src={
                tournament.logo
                  ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
                  : undefined
              }
            >
              <TrophyIcon size={20} />
            </Avatar>
            <Stack gap="xs">
              <Title mb={-6} order={3} lineClamp={2}>
                {tournament.name}
              </Title>
              {((tournament.first_place || tournament.second_place || tournament.third_place) && !tournament.regional) && (
                <Stack gap={6} >
                  {tournament.first_place && (
                    <Badge
                      size="sm"
                      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="sm"
                      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="sm"
                      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>
  );
};