import { Text, Group, Stack, Paper, Indicator, Box } from "@mantine/core";
import { CrownIcon } from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import { Match } from "../types";
import Avatar from "@/components/avatar";
import EmojiBar from "@/features/reactions/components/emoji-bar";

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={24}
    >
      <Box style={{ position: "relative" }}>
        <Paper
          px="md"
          py="md"
          withBorder
          radius="md"
          style={{ position: "relative", zIndex: 2 }}
        >
          <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"
                    src={
                      match.home?.logo
                        ? `/api/files/teams/${match.home?.id}/${match.home?.logo}`
                        : undefined
                    }
                  />
                  {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"
                    src={
                      match.away?.logo
                        ? `/api/files/teams/${match.away?.id}/${match.away?.logo}`
                        : undefined
                    }
                  />
                  {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>

        <Paper
          px="md"
          pb={4}
          style={{
            position: "relative",
            zIndex: 1,
            marginTop: -6,
            paddingTop: 8,
            backgroundColor: "var(--mantine-color-gray-light)",
            borderTop: "none",
            borderRadius:
              "0 0 var(--mantine-radius-md) var(--mantine-radius-md)",
            border: "1px solid var(--mantine-color-default-border)",
          }}
        >
          <EmojiBar />
        </Paper>
      </Box>
    </Indicator>
  );
};

export default MatchCard;