import { List } from "@mantine/core";
import ListLink from "@/components/list-link";
import {
  DatabaseIcon,
  TreeStructureIcon,
  TrophyIcon,
  MedalIcon,
  CrownIcon,
  ListIcon,
} from "@phosphor-icons/react";
import ListButton from "@/components/list-button";
import { migrateBadgeProgress } from "@/features/badges/server";
import { useState } from "react";

const AdminPage = () => {
  const [isMigrating, setIsMigrating] = useState(false);

  const handleMigrateBadges = async () => {
    if (isMigrating) return;

    setIsMigrating(true);
    await migrateBadgeProgress();
    setIsMigrating(false);
  };

  return (
    <List p="0">
      <ListLink
        label="Manage Tournaments"
        Icon={TrophyIcon}
        to="/admin/tournaments"
      />
      <ListLink
        label="Award Badges"
        Icon={CrownIcon}
        to="/admin/badges"
      />
      <ListButton
        label="Migrate Badge Progress"
        Icon={MedalIcon}
        onClick={handleMigrateBadges}
        loading={isMigrating}
      />
      <ListLink
        label="Activities"
        Icon={ListIcon}
        to="/admin/activities"
      />
      <ListButton
        label="Open Pocketbase"
        Icon={DatabaseIcon}
        onClick={() =>
          window.location.replace(process.env.POCKETBASE_URL! + "/_/")
        }
      />
      <ListLink
        label="Bracket Preview"
        Icon={TreeStructureIcon}
        to="/admin/preview"
      />
    </List>
  );
};

export default AdminPage;