import React from "react";
import { Divider, Group, Paper, Stack, Text } from "@mantine/core";
import { Trans, useLingui } from "@lingui/react/macro";
import { TeamInfo } from "@/features/teams/types";
import TeamAvatar from "@/components/team-avatar";
import PlayerAvatar from "@/components/player-avatar";
import TeamHeadToHeadSheet from "@/features/matches/components/team-head-to-head-sheet";

interface MatchupSheetProps {
  home?: TeamInfo;
  away?: TeamInfo;
  isOpen: boolean;
}

const TeamRow = ({ team }: { team: TeamInfo }) => (
  <Group justify="space-between" align="center" wrap="nowrap">
    <Group gap="sm" align="center" wrap="nowrap" style={{ minWidth: 0 }}>
      <TeamAvatar team={team} size={40} radius="sm" />
      <Text size="sm" fw={600} lineClamp={2}>
        {team.name}
      </Text>
    </Group>
    <Stack gap={4} align="flex-end">
      {team.players?.map((player) => {
        const name = `${player.first_name} ${player.last_name}`;
        return (
          <Group key={player.id} gap={6} wrap="nowrap">
            <Text size="xs" c="dimmed" lineClamp={1}>
              {name}
            </Text>
            <PlayerAvatar name={name} size={20} disableFullscreen />
          </Group>
        );
      })}
    </Stack>
  </Group>
);

export const MatchupSheet: React.FC<MatchupSheetProps> = ({
  home,
  away,
  isOpen,
}) => {
  const { t } = useLingui();

  if (!home && !away) {
    return (
      <Text size="sm" c="dimmed" ta="center" py="md">
        <Trans>
          Pick the earlier matches first — these teams aren't decided yet.
        </Trans>
      </Text>
    );
  }

  return (
    <Stack gap="md">
      <Paper p="md" withBorder radius="md">
        <Stack gap="sm">
          {home ? (
            <TeamRow team={home} />
          ) : (
            <Text size="sm" c="dimmed">
              <Trans>Home team TBD — pick the earlier matches first</Trans>
            </Text>
          )}
          <Divider label={t`vs`} labelPosition="center" />
          {away ? (
            <TeamRow team={away} />
          ) : (
            <Text size="sm" c="dimmed">
              <Trans>Away team TBD — pick the earlier matches first</Trans>
            </Text>
          )}
        </Stack>
      </Paper>

      {home && away && (
        <TeamHeadToHeadSheet team1={home} team2={away} isOpen={isOpen} />
      )}
    </Stack>
  );
};
