import { createFileRoute } from "@tanstack/react-router";
import { playerQueries } from "@/features/players/queries";
import PlayerStatsTable from "@/features/players/components/player-stats-table";
import { Suspense, useState, useDeferredValue } from "react";
import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";

export const Route = createFileRoute("/_authed/stats")({
  component: Stats,
  beforeLoad: ({ context }) => {
    const queryClient = context.queryClient;
    prefetchServerQuery(queryClient, playerQueries.allStats('all'));
    prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
    prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    header: {
      title: "Player Stats"
    },
    refresh: [playerQueries.allStats().queryKey],
  }),
});

function Stats() {
  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
  const deferredViewType = useDeferredValue(viewType);
  const isStale = viewType !== deferredViewType;

  return (
    <Tabs defaultValue="stats">
      <Tabs.List grow>
        <Tabs.Tab value="stats">Stats</Tabs.Tab>
        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="stats">
        <Container size="100%" px={0} mt="md">
          <Stack gap="xs">
            <Group gap="xs" px="md" justify="center">
              <Button
                variant={viewType === 'all' ? 'filled' : 'light'}
                size="compact-xs"
                onClick={() => setViewType('all')}
              >
                All
              </Button>
              <Button
                variant={viewType === 'mainline' ? 'filled' : 'light'}
                size="compact-xs"
                onClick={() => setViewType('mainline')}
              >
                Mainline
              </Button>
              <Button
                variant={viewType === 'regional' ? 'filled' : 'light'}
                size="compact-xs"
                onClick={() => setViewType('regional')}
              >
                Regional
              </Button>
            </Group>
            <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
              <Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
                <PlayerStatsTable viewType={deferredViewType} />
              </Suspense>
            </Box>
          </Stack>
        </Container>
      </Tabs.Panel>

      <Tabs.Panel value="h2h">
        <Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
          <LeagueHeadToHead />
        </Suspense>
      </Tabs.Panel>
    </Tabs>
  );
}