import { lazy, Suspense } from "react";
import {
  Box,
  Button,
  Flex,
  Loader,
  SimpleGrid,
  Stack,
  Text,
  UnstyledButton,
} from "@mantine/core";
import { Icon } from "@phosphor-icons/react";
import {
  ListDashes,
  ListIcon,
  TreeStructureIcon,
  UsersIcon,
} from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import { Trans, useLingui } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";
import Sheet from "@/components/sheet/sheet";
import { useSheet } from "@/hooks/use-sheet";
import TeamList from "@/features/teams/components/team-list";
import WizardOrbIcon from "@/components/wizard-orb-icon";
import { Tournament } from "../../../types";
import classes from "./nav-grid.module.css";

const RulesContent = lazy(
  () => import("../../upcoming-tournament/rules-content")
);

interface NavTileProps {
  label: string;
  Icon: Icon;
  onClick?: () => void;
  disabled?: boolean;
}

/** A single square-ish nav tile with icon-over-label and press feedback. */
export const NavTile = ({ label, Icon, onClick, disabled }: NavTileProps) => (
  <UnstyledButton className={classes.tile} onClick={onClick} disabled={disabled}>
    <span className={classes.icon}>
      <Icon size={22} weight="bold" />
    </span>
    <Text size="xs" fw={600} lineClamp={2} lh={1.2}>
      {label}
    </Text>
  </UnstyledButton>
);

interface NavGridProps {
  tournament: Tournament;
  isAdmin: boolean;
  hasGroupStage: boolean;
  isPredictable: boolean;
  predictionsLocked: boolean;
  hasSubmitted: boolean;
}

/**
 * Consolidates the old stack of full-width ListLinks into a compact icon grid
 * so it no longer dominates the page. Every original destination stays
 * reachable with identical conditional visibility. Teams and Rules open sheets;
 * everything else navigates.
 */
const NavGrid = ({
  tournament,
  isAdmin,
  hasGroupStage,
  isPredictable,
  predictionsLocked,
  hasSubmitted,
}: NavGridProps) => {
  const navigate = useNavigate();
  const teamsSheet = useSheet();
  const rulesSheet = useSheet();
  const { t, i18n } = useLingui();

  return (
    <Box px="md">
      <SimpleGrid cols={3} spacing="sm" verticalSpacing="sm">
        {isAdmin && (
          <NavTile
            label={t`Manage`}
            Icon={UsersIcon}
            onClick={() =>
              navigate({ to: `/admin/tournaments/${tournament.id}` })
            }
          />
        )}
        {hasGroupStage && (
          <NavTile
            label={t`Groups`}
            Icon={ListDashes}
            onClick={() =>
              navigate({ to: `/tournaments/${tournament.id}/groups` })
            }
          />
        )}
        <NavTile
          label={t`Bracket`}
          Icon={TreeStructureIcon}
          onClick={() =>
            navigate({ to: `/tournaments/${tournament.id}/bracket` })
          }
        />
        {isPredictable && !predictionsLocked && (
          <NavTile
            label={hasSubmitted ? t`Edit Prediction` : t`Make Prediction`}
            Icon={WizardOrbIcon}
            onClick={() =>
              navigate({ to: `/tournaments/${tournament.id}/predictions/make` })
            }
          />
        )}
        {isPredictable && (predictionsLocked || hasSubmitted) && (
          <NavTile
            label={t`Predictions`}
            Icon={WizardOrbIcon}
            onClick={() =>
              navigate({ to: `/tournaments/${tournament.id}/predictions` })
            }
          />
        )}
        <NavTile
          label={
            tournament.teams
              ? i18n._({
                  ...msg`{count, plural, one {Teams (#)} other {Teams (#)}}`,
                  values: { count: tournament.teams.length },
                })
              : t`Teams`
          }
          Icon={UsersIcon}
          onClick={teamsSheet.open}
        />
        <NavTile label={t`Rules`} Icon={ListIcon} onClick={rulesSheet.open} />
      </SimpleGrid>

      <Sheet title={t`Enrolled Teams`} {...teamsSheet.props}>
        <TeamList
          teams={tournament.teams || []}
          isRegional={tournament.regional}
        />
      </Sheet>

      <Sheet title={t`Tournament Rules`} {...rulesSheet.props}>
        <Stack gap="xs">
          <Suspense
            fallback={
              <Flex
                justify="center"
                align="center"
                w="100%"
                style={{ minHeight: "25vh" }}
              >
                <Loader size="lg" />
              </Flex>
            }
          >
            <RulesContent content={tournament.rules || ""} />
          </Suspense>
          <Button variant="subtle" c="red" onClick={rulesSheet.close}>
            <Trans>Close</Trans>
          </Button>
        </Stack>
      </Sheet>
    </Box>
  );
};

export default NavGrid;
