import {
  Text,
  Group,
  Stack,
  Paper,
  ThemeIcon,
  Indicator,
  Box,
  Badge,
  Skeleton,
} from "@mantine/core";
import { TrophyIcon, CrownIcon } from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import { Match } from "../types";
import Avatar from "@/components/avatar";

interface MatchCardProps {
  match: Match;
}

const MatchCard = ({ match }: MatchCardProps) => {
  const navigate = useNavigate();
  const isHomeWin = match.home_cups > match.away_cups;
  const isAwayWin = match.away_cups > match.home_cups;
  const isStarted = match.status === "started";

  const handleHomeTeamClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (match.home?.id) {
      navigate({ to: `/teams/${match.home.id}` });
    }
  };

  const handleAwayTeamClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (match.away?.id) {
      navigate({ to: `/teams/${match.away.id}` });
    }
  };

  return (
    <Indicator
      disabled={!isStarted}
      size={12}
      color="red"
      processing
      position="top-end"
      offset={2}
    >
      <Paper p="md" withBorder radius="md">
        <Stack gap="sm">
          <Group gap="xs">
            <Text size="xs" fw={600} lineClamp={1} c="dimmed">
              {match.tournament.name}
            </Text>
            <Text c="dimmed">-</Text>
            <Text size="xs" c="dimmed">
              Round {match.round + 1}
              {match.is_losers_bracket && " (Losers)"}
            </Text>
          </Group>

          <Group justify="space-between" align="center">
            <Group gap="sm" style={{ flex: 1 }}>
              <Box
                style={{ position: "relative", cursor: "pointer" }}
                onClick={handleHomeTeamClick}
              >
                <Avatar size={40} name={match.home?.name!} radius="sm" />
                {isHomeWin && (
                  <Box
                    style={{
                      position: "absolute",
                      top: -10,
                      left: -4,
                      transform: "rotate(-25deg)",
                      color: "gold",
                    }}
                  >
                    <CrownIcon size={16} weight="fill" />
                  </Box>
                )}
              </Box>
              <Text
                size="md"
                fw={600}
                lineClamp={1}
                style={{ minWidth: 0, flex: 1 }}
              >
                {match.home?.name!}
              </Text>
            </Group>
            <Text
              size="xl"
              fw={700}
              c={"dimmed"}
            >
              {match.home_cups}
            </Text>
          </Group>

          <Group justify="space-between" align="center">
            <Group gap="sm" style={{ flex: 1 }}>
              <Box
                style={{ position: "relative", cursor: "pointer" }}
                onClick={handleAwayTeamClick}
              >
                <Avatar size={40} name={match.away?.name!} radius="sm" />
                {isAwayWin && (
                  <Box
                    style={{
                      position: "absolute",
                      top: -10,
                      left: -4,
                      transform: "rotate(-25deg)",
                      color: "gold",
                    }}
                  >
                    <CrownIcon size={16} weight="fill" />
                  </Box>
                )}
              </Box>
              <Text
                size="md"
                fw={600}
                lineClamp={1}
                style={{ minWidth: 0, flex: 1 }}
              >
                {match.away?.name}
              </Text>
            </Group>
            <Text
              size="xl"
              fw={700}
              c={"dimmed"}
            >
              {match.away_cups}
            </Text>
          </Group>
        </Stack>
      </Paper>
    </Indicator>
  );
};

export default MatchCard;
