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 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 ResultRowSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
  <Box p="md" style={{ opacity }}>
    <Group gap="sm" align="center" wrap="nowrap">
      <Skeleton height={40} width={40} radius="sm" />
      <Stack gap={8} style={{ flex: 1 }}>
        <Skeleton height={14} width="45%" radius="sm" />
        <Group gap="md" wrap="nowrap">
          {Array.from({ length: 6 }).map((_, index) => (
            <Skeleton key={`result-stat-${index}`} height={20} width={22} radius="sm" />
          ))}
        </Group>
      </Stack>
    </Group>
  </Box>
);

const OverviewSkeleton = () => (
  <Stack gap="md">
    <Box>
      <Group p="md" wrap="nowrap" w="100%">
        <Skeleton height={20} width={20} radius="sm" />
        <Skeleton height={16} width={110} radius="sm" />
        <Skeleton ml="auto" height={20} width={20} radius="sm" />
      </Group>
      <Divider />
    </Box>
    <Stack gap={0}>
      <Box px="md" pb="xs">
        <Skeleton height={18} width={70} radius="sm" />
      </Box>
      {Array.from({ length: 4 }).map((_, index) => (
        <Box key={`result-row-${index}`}>
          <ResultRowSkeleton opacity={Math.max(1 - index * 0.15, 0.4)} />
          {index < 3 && <Divider />}
        </Box>
      ))}
    </Stack>
  </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;
