import { useMemo, memo } from "react";
import {
  Stack,
  Text,
  Group,
  UnstyledButton,
  Container,
  Box,
  Center,
  ThemeIcon,
  Divider,
  Alert,
} from "@mantine/core";
import { Tournament } from "@/features/tournaments/types";
import { CrownIcon, TreeStructureIcon, InfoIcon } from "@phosphor-icons/react";
import Avatar from "@/components/avatar";
import ListLink from "@/components/list-link";
import { Podium } from "./podium";

interface TournamentStatsProps {
  tournament: Tournament;
}

export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {

  const matches = tournament.matches || [];
  const nonByeMatches = useMemo(() =>
    matches.filter((match) => !(match.status === 'tbd' && match.bye === true)),
    [matches]
  );
  const isComplete = useMemo(() =>
    nonByeMatches.length > 0 && nonByeMatches.every((match) => match.status === 'ended'),
    [nonByeMatches]
  );

  const sortedTeamStats = useMemo(() => {
    return [...(tournament.team_stats || [])].sort((a, b) => {
      if (b.wins !== a.wins) {
        return b.wins - a.wins;
      }
      return b.total_cups_made - a.total_cups_made;
    });
  }, [tournament.team_stats]);

  const teamStatsWithCalculations = useMemo(() => {
    return sortedTeamStats.map((stat) => ({
      ...stat,
      winPercentage: stat.matches > 0 ? (stat.wins / stat.matches) * 100 : 0,
      avgCupsPerMatch: stat.matches > 0 ? stat.total_cups_made / stat.matches : 0,
    })).sort((a, b) => b.winPercentage - a.winPercentage);;
  }, [sortedTeamStats]);

  const renderTeamStatsTable = () => {
    if (!teamStatsWithCalculations.length) {
      return (
        <Box p="md">
          <Center>
            <Text c="dimmed" size="sm">
              No stats available yet
            </Text>
          </Center>
        </Box>
      );
    }

    return (
      <Stack gap={0}>
        <Text px="md" size="lg" fw={600}>Results</Text>
        <Text px="md" c="dimmed" size="xs" fw={500}>Sorted by win percentage</Text>
        {teamStatsWithCalculations.map((stat, index) => {
          return (
            <Box key={stat.id}>
              <UnstyledButton
                w="100%"
                p="md"
                style={{ borderRadius: 0 }}
              >
                <Group justify="space-between" align="center" w="100%">
                  <Group gap="sm" align="center">
                    <Avatar name={stat.team_name} size={40} radius="sm" />
                    <Stack gap={2}>
                      <Group gap='xs'>
                        <Text size="xs" c="dimmed">
                          #{index + 1}
                        </Text>
                        <Text size="sm" fw={600}>
                          {stat.team_name}
                        </Text>
                        {index === 0 && isComplete && (
                          <ThemeIcon size="xs" color="yellow" variant="light" radius="xl">
                            <CrownIcon size={12} />
                          </ThemeIcon>
                        )}
                      </Group>
                      <Group gap="md" ta="center">
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            W
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.wins}
                          </Text>
                        </Stack>
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            L
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.losses}
                          </Text>
                        </Stack>
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            W%
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.winPercentage.toFixed(1)}%
                          </Text>
                        </Stack>
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            AVG
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.avgCupsPerMatch.toFixed(1)}
                          </Text>
                        </Stack>
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            CF
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.total_cups_made}
                          </Text>
                        </Stack>
                        <Stack gap={0}>
                          <Text size="xs" c="dimmed" fw={700}>
                            CA
                          </Text>
                          <Text size="xs" c="dimmed">
                            {stat.total_cups_against}
                          </Text>
                        </Stack>
                      </Group>
                    </Stack>
                  </Group>
                </Group>
              </UnstyledButton>
              {index < teamStatsWithCalculations.length - 1 && <Divider />}
            </Box>
          );
        })}
      </Stack>
    );
  };

  return (
    <Container size="100%" px={0}>
      <Stack gap="md">
        {tournament.regional && (
          <Alert px="md" variant="light" title="Regional Tournament" icon={<InfoIcon size={16} />}>
            Regional tournaments are a work in progress. Some features might not work as expected.
          </Alert>
        )}
        {!tournament.regional && <Podium tournament={tournament} />}
        <ListLink
          label={`View Bracket`}
          to={`/tournaments/${tournament.id}/bracket`}
          Icon={TreeStructureIcon}
        />
        {renderTeamStatsTable()}
      </Stack>
    </Container>
  );
});
