import { SimpleGrid, Text, Title } from "@mantine/core";
import { useLingui } from "@lingui/react/macro";
import { useNavigate } from "@tanstack/react-router";
import { GearIcon, PlayIcon, UsersThreeIcon } from "@phosphor-icons/react";
import { useCurrentTournament } from "@/features/tournaments/queries";
import { NavTile } from "@/components/nav-tile";
import { Countdown } from "@/components/countdown";
import SectionBox from "./section-box";

export const TournamentSection = () => {
  const { t } = useLingui();
  const navigate = useNavigate();
  const { data: tournament } = useCurrentTournament();

  if (!tournament) return null;

  const upcoming = !!tournament.start_time && Date.parse(tournament.start_time) > Date.now();

  return (
    <SectionBox>
      <Title order={3}>{tournament.name}</Title>
      {upcoming && (
        <Text size="sm" c="dimmed" component="div">
          <Countdown date={new Date(tournament.start_time)} label={t`Starts in`} />
        </Text>
      )}
      <SimpleGrid cols={3} spacing="sm" mt="sm">
        <NavTile
          label={t`Run`}
          Icon={PlayIcon}
          onClick={() => navigate({ to: `/admin/tournaments/run/${tournament.id}` })}
        />
        <NavTile
          label={t`Enrollment`}
          Icon={UsersThreeIcon}
          onClick={() => navigate({ to: `/admin/tournaments/${tournament.id}/enrollment` })}
        />
        <NavTile
          label={t`Manage`}
          Icon={GearIcon}
          onClick={() => navigate({ to: `/admin/tournaments/${tournament.id}` })}
        />
      </SimpleGrid>
    </SectionBox>
  );
};

export default TournamentSection;