import { Box, Divider, Group, Paper, Skeleton, Stack } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
import TeamList from "@/features/teams/components/team-list";
import { StatsSkeleton } from "@/components/stats-overview";
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
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>
);

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 OverviewSkeleton = () => (
  <>
    <Stack px="md">
      <Group justify="space-between" align="center">
        <Skeleton height={16} width={70} radius="sm" />
        <Skeleton height={14} width={100} radius="sm" />
      </Group>
      <BadgeShowcaseSkeleton />
    </Stack>
    <Divider my="md" />
    <Stack>
      <Group gap="xs" px="md" justify="space-between" align="center">
        <Skeleton height={16} width={80} radius="sm" />
        <Group gap="xs">
          <Skeleton height={22} width={40} radius="xl" />
          <Skeleton height={22} width={64} radius="xl" />
          <Skeleton height={22} width={62} radius="xl" />
        </Group>
      </Group>
      <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`Teams`,
      value: "teams",
      content: <TeamList teams={[]} loading />,
    },
  ];

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

export default ProfileSkeleton;