import { Box, Group, Paper, Stack, Text } from "@mantine/core";
import { Trans, useLingui } from "@lingui/react/macro";
import { Match } from "@/features/matches/types";
import { MatchReport } from "@/features/bracket/components/match-report";
import TeamAvatar from "@/components/team-avatar";
import SectionHeading from "./section-heading";

interface ScoreReportCtaProps {
  /** Started matches the current user is playing in. */
  matches: Match[];
}

const teamName = (team: Match["home"], fallback: string): string =>
  team && typeof team !== "string" ? team.name : fallback;

/**
 * Top-of-home call-to-action for a participant whose match is live. Composes
 * the existing <MatchReport> so reporting/confirming a score is one tap from
 * the home screen instead of buried in the bracket. Renders nothing when the
 * user isn't playing in a started match.
 */
const ScoreReportCta = ({ matches }: ScoreReportCtaProps) => {
  const { t } = useLingui();

  if (matches.length === 0) return null;

  return (
    <Box>
      <SectionHeading
        label={t`Your match is live`}
        live
        count={matches.length}
      />
      <Stack gap="sm" px="md">
        {matches.map((match) => (
          <Paper key={match.id} withBorder p="md">
            <Stack gap="sm">
              <Group gap="xs" wrap="nowrap">
                <Group gap={8} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
                  {match.home && typeof match.home !== "string" && (
                    <TeamAvatar
                      team={match.home}
                      size={28}
                      radius="sm"
                      isRegional={match.tournament.regional === true}
                    />
                  )}
                  <Text size="sm" fw={600} lineClamp={1} style={{ minWidth: 0 }}>
                    {teamName(match.home, t`TBD`)}
                  </Text>
                </Group>
                <Text size="xs" c="dimmed" fw={600} style={{ flexShrink: 0 }}>
                  <Trans>vs</Trans>
                </Text>
                <Group
                  gap={8}
                  wrap="nowrap"
                  justify="flex-end"
                  style={{ flex: 1, minWidth: 0 }}
                >
                  <Text
                    size="sm"
                    fw={600}
                    lineClamp={1}
                    ta="right"
                    style={{ minWidth: 0 }}
                  >
                    {teamName(match.away, t`TBD`)}
                  </Text>
                  {match.away && typeof match.away !== "string" && (
                    <TeamAvatar
                      team={match.away}
                      size={28}
                      radius="sm"
                      isRegional={match.tournament.regional === true}
                    />
                  )}
                </Group>
              </Group>
              <MatchReport match={match} />
            </Stack>
          </Paper>
        ))}
      </Stack>
    </Box>
  );
};

export default ScoreReportCta;
