import {
  Text,
  Container,
  Flex,
  NumberInput,
  Group,
  Loader,
} from "@mantine/core";
import { useEffect, useState } from "react";
import { bracketQueries } from "../queries";
import { useQuery } from "@tanstack/react-query";
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
import { BracketData, Match } from "../types";
import Bracket from "./bracket";
import "./styles.module.css";

interface PreviewTeam {
  id: string;
  name: string;
}

export const PreviewBracket: React.FC = () => {
  const [teamCount, setTeamCount] = useState(20);
  const { data, isLoading, error } = useQuery(
    bracketQueries.preview(teamCount)
  );

  const [teams, setTeams] = useState<PreviewTeam[]>([]);

  useEffect(() => {
    setTeams(
      Array.from({ length: teamCount }, (_, i) => ({
        id: `team-${i + 1}`,
        name: `Team ${i + 1}`,
      }))
    );
  }, [teamCount]);

  const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>(
    []
  );
  const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
  const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);

  useEffect(() => {
    if (!data || teams.length === 0) return;

    const maps = createBracketMaps(data as BracketData);
    setBracketMaps(maps);

    const mapBracket = (bracket: Match[][]) => {
      return bracket.map((round) =>
        round.map((match) => {
          const mappedMatch = { ...match };

          if (match.home?.seed && match.home.seed > 0) {
            const teamIndex = match.home.seed - 1;
            if (teams[teamIndex]) {
              mappedMatch.home = {
                ...match.home,
                team: teams[teamIndex],
              };
            }
          }

          if (match.away?.seed && match.away.seed > 0) {
            const teamIndex = match.away.seed - 1;
            if (teams[teamIndex]) {
              mappedMatch.away = {
                ...match.away,
                team: teams[teamIndex],
              };
            }
          }

          return mappedMatch;
        })
      );
    };

    const bracketData = data as BracketData;
    setSeededWinnersBracket(mapBracket(bracketData.winners));
    setSeededLosersBracket(mapBracket(bracketData.losers));
  }, [teams, data]);

  if (error) return <p>Error loading bracket</p>;

  return (
    <Container p={0} w="100%" style={{ userSelect: "none" }}>
      <Flex w="100%" justify="space-between" align="center" h="3rem">
        <Group gap="sm" mx='auto'>
          <Text size="sm" c="dimmed">
            Teams:
          </Text>
          <NumberInput
            value={teamCount}
            onChange={(value) => setTeamCount(Number(value) || 12)}
            min={12}
            max={20}
            size="sm"
            w={80}
            allowDecimal={false}
            clampBehavior="strict"
          />
        </Group>
      </Flex>
      <Flex w="100%" gap={24}>
        {isLoading ? (
          <Flex justify="center" align="center" h="20vh" w="100%">
            <Loader size="xl" />
          </Flex>
        ) : (
          <Bracket
            winners={seededWinnersBracket}
            losers={seededLosersBracket}
            bracketMaps={bracketMaps}
          />
        )}
      </Flex>
    </Container>
  );
};