import { Suspense, useCallback, useMemo } from "react";
import { Tournament } from "../../types";
import { useAuth } from "@/contexts/auth-context";
import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core";
import Countdown from "@/components/countdown";
import ListLink from "@/components/list-link";
import ListButton from "@/components/list-button";
import { TreeStructureIcon, UsersIcon } from "@phosphor-icons/react";
import EnrollTeam from "./enroll-team";
import EnrollFreeAgent from "./enroll-free-agent";
import TeamListButton from "./team-list-button";
import Header from "./header";
import TeamCardSkeleton from "@/features/teams/components/team-card-skeleton";
import TeamCard from "@/features/teams/components/team-card";
import UpdateTeam from "./update-team";
import UnenrollTeam from "./unenroll-team";
import { useQueryClient } from "@tanstack/react-query";
import { tournamentKeys, useFreeAgents } from "../../queries";
import RulesListButton from "./rules-list-button";
import EnrolledFreeAgent from "./enrolled-free-agent";

const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
  tournament,
}) => {
  const { user, roles } = useAuth();

  const isAdmin = useMemo(() => roles.includes("Admin"), [roles]);
  const userTeam = useMemo(
    () =>
      tournament.teams?.find((team) =>
        team.players?.some((player) => player.id === user?.id)
      ),
    [tournament.teams, user?.id]
  );
  const isUserEnrolled = !!userTeam;

  const enrollmentDeadline = tournament.enroll_time
    ? new Date(tournament.enroll_time)
    : new Date(tournament.start_time);
  const isEnrollmentOpen = enrollmentDeadline > new Date();

  const queryClient = useQueryClient();
  const handleSubmit = () => {
    queryClient.invalidateQueries({ queryKey: tournamentKeys.current });
  };

  const { data: free_agents } = useFreeAgents(tournament.id);
  const isFreeAgent = useMemo(() => !isUserEnrolled && free_agents.find(a => a.player?.id === user?.id), [free_agents, isUserEnrolled]);

  return (
    <Stack gap="lg">
      <Header tournament={tournament} />

      <Stack px="xs">
        {tournament.desc && <Text px="md" size="sm">{tournament.desc}</Text>}

        <Card withBorder radius="lg" p="lg">
          <Stack gap="xs">
            <Group mb="sm" gap="xs" align="center">
              <UsersIcon size={16} />
              <Text size="sm" fw={500}>
                Enrollment
              </Text>
              {isEnrollmentOpen && (
                <Box ml="auto">
                  <Countdown
                    date={enrollmentDeadline}
                    label="Time left"
                    color="yellow"
                  />
                </Box>
              )}
            </Group>

            {!isUserEnrolled && !isEnrollmentOpen && (
              <Text fw={600} c="dimmed" size="sm">
                Enrollment has been closed for this tournament.
              </Text>
            )}

            {!isUserEnrolled && isEnrollmentOpen && !isFreeAgent && (
              <>
                <EnrollTeam
                  tournamentId={tournament.id}
                  onSubmit={handleSubmit}
                />
                <Divider my={0} label="or" />
                <EnrollFreeAgent tournamentId={tournament.id} />
              </>
            )}

            {isUserEnrolled && (
              <>
                <Suspense fallback={<TeamCardSkeleton />}>
                  <TeamCard teamId={userTeam.id} />
                </Suspense>
                <UpdateTeam tournamentId={tournament.id} teamId={userTeam.id} />
                {isEnrollmentOpen && (
                  <UnenrollTeam
                    tournamentId={tournament.id}
                    teamId={userTeam.id}
                    onSubmit={handleSubmit}
                  />
                )}
              </>
            )}

            {
              isFreeAgent && isEnrollmentOpen && (
                <EnrolledFreeAgent tournamentId={tournament.id} />
              )
            }

          </Stack>
        </Card>
      </Stack>

      <Box>
        <Divider />
        {isAdmin && (
          <ListLink
            label={`Manage ${tournament.name}`}
            to={`/admin/tournaments/${tournament.id}`}
            Icon={UsersIcon}
          />
        )}
        <ListLink
          label={`View Bracket`}
          to={`/tournaments/${tournament.id}/bracket`}
          Icon={TreeStructureIcon}
          disabled
        />
        <TeamListButton teams={tournament.teams || []} />
        <RulesListButton tournamentId={tournament.id} />
      </Box>
    </Stack>
  );
};

export default UpcomingTournament;