import { createFileRoute } from "@tanstack/react-router";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { ActivitiesTable, activityQueries } from "@/features/activities";
import { PlayersActivityTable, playerQueries } from "@/features/players";
import { Tabs } from "@mantine/core";
import { useState } from "react";

export const Route = createFileRoute("/_authed/admin/activities")({
  component: Stats,
  beforeLoad: ({ context }) => {
    const queryClient = context.queryClient;
    prefetchServerQuery(queryClient, activityQueries.search());
    prefetchServerQuery(queryClient, playerQueries.activity());
  },
  loader: () => ({
    withPadding: false,
    fullWidth: true,
    header: {
      title: "Activities",
      withBackButton: true,
    },
    refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
  }),
});

function Stats() {
  const [activeTab, setActiveTab] = useState<string | null>("server-functions");

  return (
    <Tabs value={activeTab} onChange={setActiveTab}>
      <Tabs.List mb='md'>
        <Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
        <Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="server-functions">
        <ActivitiesTable />
      </Tabs.Panel>

      <Tabs.Panel value="player-activity">
        <PlayersActivityTable />
      </Tabs.Panel>
    </Tabs>
  );
}