flxn-app/src/features/tournaments/components/edit-enrolled-teams.tsx

import {
  Stack,
  ActionIcon,
  Text,
  Group,
  Loader,
} from "@mantine/core";
import Typeahead, { TypeaheadOption } from "@/components/typeahead";
import { TrashIcon } from "@phosphor-icons/react";
import { useState, useCallback, useMemo, memo } from "react";
import { useTournament, useUnenrolledTeams } from "../queries";
import useEnrollTeam from "../hooks/use-enroll-team";
import useUnenrollTeam from "../hooks/use-unenroll-team";
import Avatar from "@/components/avatar";
import { Team, TeamInfo } from "@/features/teams/types";

interface EditEnrolledTeamsProps {
  tournamentId: string;
}

interface TeamItemProps {
  team: TeamInfo;
  onUnenroll: (teamId: string) => void;
  disabled: boolean;
}

const TeamItem = memo(({ team, onUnenroll, disabled }: TeamItemProps) => {
  const playerNames = useMemo(
    () =>
      team.players?.map((p) => `${p.first_name} ${p.last_name}`).join(", ") ||
      "",
    [team.players]
  );

  return (
    <Group py="xs" px="sm" w="100%" gap="sm" align="center">
      <Avatar
        size={32}
        radius="sm"
        name={team.name}
        src={
          team.logo
            ? `/api/files/teams/${team.id}/${team.logo}`
            : undefined
        }
      />
      <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
        <Text fw={500} truncate>
          {team.name}
        </Text>
        {playerNames && (
          <Text size="xs" c="dimmed" truncate>
            {playerNames}
          </Text>
        )}
      </Stack>
      <ActionIcon
        variant="subtle"
        color="red"
        onClick={() => onUnenroll(team.id)}
        disabled={disabled}
        size="sm"
      >
        <TrashIcon size={14} />
      </ActionIcon>
    </Group>
  );
});

const EditEnrolledTeams = ({ tournamentId }: EditEnrolledTeamsProps) => {
  const { data: tournament, isLoading: tournamentLoading } =
    useTournament(tournamentId);
  const { data: unenrolledTeams = [], isLoading: unenrolledLoading } =
    useUnenrolledTeams(tournamentId);

  const { mutate: enrollTeam, isPending: isEnrolling } = useEnrollTeam();
  const { mutate: unenrollTeam, isPending: isUnenrolling } = useUnenrollTeam();

  const searchTeams = async (query: string): Promise<TypeaheadOption<Team>[]> => {
    if (!query.trim()) return [];

    const filtered = unenrolledTeams.filter((team: Team) =>
      team.name.toLowerCase().includes(query.toLowerCase())
    );

    return filtered.map((team: Team) => ({
      id: team.id,
      data: team
    }));
  };

  const handleEnrollTeam = useCallback(
    (option: TypeaheadOption<Team>) => {
      enrollTeam({ tournamentId, teamId: option.data.id });
    },
    [enrollTeam, tournamentId]
  );

  const handleUnenrollTeam = useCallback(
    (teamId: string) => {
      unenrollTeam({ tournamentId, teamId });
    },
    [unenrollTeam, tournamentId]
  );

  const renderTeamOption = (option: TypeaheadOption<Team>) => {
    const team = option.data;
    return (
      <Group py="xs" px="sm" gap="sm" align="center">
        <Avatar
          size={32}
          radius="sm"
          name={team.name}
          src={
            team.logo
              ? `/api/files/teams/${team.id}/${team.logo}`
              : undefined
          }
        />
        <Text fw={500} truncate>
          {team.name}
        </Text>
      </Group>
    );
  };

  const formatTeam = (option: TypeaheadOption<Team>) => {
    return option.data.name;
  };

  const isLoading = tournamentLoading || unenrolledLoading;
  const enrolledTeams = tournament?.teams || [];
  const hasEnrolledTeams = enrolledTeams.length > 0;

  return (
    <Stack gap="lg" w="100%">
      <Stack gap="xs">
        <Text fw={600} size="sm">
          Add Team
        </Text>
        <Typeahead
          placeholder="Search for teams to enroll..."
          onSelect={handleEnrollTeam}
          searchFn={searchTeams}
          renderOption={renderTeamOption}
          format={formatTeam}
          disabled={isEnrolling || unenrolledLoading}
        />
      </Stack>

      <Stack gap="xs">
        <Group justify="space-between">
          <Text fw={600} size="sm">
            Enrolled Teams
          </Text>
          <Text size="xs" c="dimmed">
            {enrolledTeams.length} teams
          </Text>
        </Group>

        {isLoading ? (
          <Group justify="center" py="md">
            <Loader size="sm" />
          </Group>
        ) : !hasEnrolledTeams ? (
          <Text size="sm" c="dimmed" ta="center" py="lg">
            No teams enrolled yet
          </Text>
        ) : (
          <Stack gap="xs" w="100%">
            {enrolledTeams.map((team: TeamInfo) => (
              <TeamItem
                key={team.id}
                team={team}
                onUnenroll={handleUnenrollTeam}
                disabled={isUnenrolling}
              />
            ))}
          </Stack>
        )}
      </Stack>
    </Stack>
  );
};

export default EditEnrolledTeams;