import { Box, Divider, Group, List, ListItem, Paper, Skeleton, Stack } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
import TournamentList from "@/features/tournaments/components/tournament-list";
import { StatsSkeleton } from "@/components/stats-overview";
import HeaderSkeleton from "./header-skeleton";
import { useLingui } from "@lingui/react/macro";

const MatchCardSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
  <Paper px="md" py="md" withBorder radius="md" style={{ opacity }}>
    <Stack gap="sm">
      <Skeleton height={12} width="55%" radius="sm" />
      {[0, 1].map((row) => (
        <Group key={row} justify="space-between" align="center" wrap="nowrap">
          <Group gap="sm" wrap="nowrap" style={{ flex: 1 }}>
            <Skeleton height={40} width={40} radius="sm" />
            <Skeleton height={14} width="40%" radius="sm" />
          </Group>
          <Skeleton height={12} width={64} radius="sm" />
        </Group>
      ))}
    </Stack>
  </Paper>
);

export const MatchListSkeleton = ({ count = 4 }: { count?: number }) => (
  <Stack p="md" gap="sm">
    {Array.from({ length: count }).map((_, index) => (
      <MatchCardSkeleton
        key={`match-skeleton-${index}`}
        opacity={Math.max(1 - index * 0.15, 0.4)}
      />
    ))}
  </Stack>
);

const PlayerListSkeleton = ({ count = 2 }: { count?: number }) => (
  <List>
    {Array.from({ length: count }).map((_, index) => (
      <ListItem
        py="xs"
        key={`player-skeleton-${index}`}
        icon={<Skeleton circle height={40} width={40} />}
      >
        <Skeleton height={16} width={180} radius="sm" />
      </ListItem>
    ))}
  </List>
);

export const OverviewSkeleton = () => (
  <>
    <Stack px="md">
      <Skeleton height={16} width={70} radius="sm" />
      <PlayerListSkeleton />
    </Stack>
    <Divider my="md" />
    <Stack>
      <Box px="md">
        <Skeleton height={16} width={80} radius="sm" />
      </Box>
      <StatsSkeleton />
    </Stack>
  </>
);

const ProfileSkeleton = () => {
  const { t } = useLingui();
  const tabs = [
    {
      label: t`Overview`,
      value: "overview",
      content: <OverviewSkeleton />,
    },
    {
      label: t`Matches`,
      value: "matches",
      content: <MatchListSkeleton />,
    },
    {
      label: t`Tournaments`,
      value: "tournaments",
      content: <TournamentList tournaments={[]} loading />,
    },
  ];

  return (
    <>
      <HeaderSkeleton />
      <Box mt="lg">
        <SwipeableTabs tabs={tabs} />
      </Box>
    </>
  );
};

export default ProfileSkeleton;
