import { Box, Divider, Text, Stack } from "@mantine/core";
import Header from "./header";
import SwipeableTabs from "@/components/swipeable-tabs";
import TournamentList from "@/features/tournaments/components/tournament-list";
import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
import { useTeam, useTeamMatches, useTeamStats } from "../../queries";
import MatchList from "@/features/matches/components/match-list";
import PlayerList from "@/features/players/components/player-list";
import { MatchListSkeleton } from "./skeleton";
import { Trans, useLingui } from "@lingui/react/macro";

interface ProfileProps {
  id: string;
}

const TeamProfile = ({ id }: ProfileProps) => {
  const { t } = useLingui();
  const { data: team } = useTeam(id);
  const { data: matches, isLoading: matchesLoading } = useTeamMatches(id);
  const { data: stats, isLoading: statsLoading, error: statsError } = useTeamStats(id);
  if (!team) return <Text p="md"><Trans>Team not found</Trans></Text>;

  const tabs = [
    {
      label: t`Overview`,
      value: "overview",
      content: <>
        <Stack px="md">
          <Text size="md" fw={700}><Trans>Players</Trans></Text>
          <PlayerList players={team.players} />
        </Stack>
        <Divider my="md" />
        <Stack>
          <Text px="md" size="md" fw={700}><Trans>Statistics</Trans></Text>
          {statsLoading ? (
            <StatsSkeleton />
          ) : (
            <StatsOverview statsData={statsError ? null : stats || null} />
          )}
        </Stack>
      </>,
    },
    {
      label: t`Matches`,
      value: "matches",
      content: matchesLoading ? (
        <MatchListSkeleton />
      ) : (
        <MatchList matches={matches || []} />
      ),
    },
    {
      label: t`Tournaments`,
      value: "tournaments",
      content: (
        <>
          <TournamentList tournaments={team.tournaments || []} />
        </>
      ),
    },
  ];
  return (
    <>
      <Header name={team.name} logo={team.logo} id={team.id} />
      <Box mt="lg">
        <SwipeableTabs tabs={tabs} />
      </Box>
    </>
  );
};

export default TeamProfile;
