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, useEffect } 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";
import { useQueryClient } from "@tanstack/react-query";
import { Trans } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";

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

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

  useEffect(() => {
    const timeout = window.setTimeout(() => {
      prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
      prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
    }, 1500);
    return () => window.clearTimeout(timeout);
  }, [queryClient]);

  return (
    <Tabs defaultValue="stats">
      <Tabs.List grow>
        <Tabs.Tab value="stats"><Trans>Stats</Trans></Tabs.Tab>
        <Tabs.Tab value="h2h"><Trans>Head to Head</Trans></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')}
              >
                <Trans>All</Trans>
              </Button>
              <Button
                variant={viewType === 'mainline' ? 'filled' : 'light'}
                size="compact-xs"
                onClick={() => setViewType('mainline')}
              >
                <Trans>Mainline</Trans>
              </Button>
              <Button
                variant={viewType === 'regional' ? 'filled' : 'light'}
                size="compact-xs"
                onClick={() => setViewType('regional')}
              >
                <Trans>Regional</Trans>
              </Button>
            </Group>
            <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
              <Suspense 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>
  );
}
