import { Flex, Text } from "@mantine/core";
import React, { useEffect, useRef, useState } from "react";
import { CrownIcon } from "@phosphor-icons/react";
import { SeedBadge } from "./seed-badge";
import { TeamInfo } from "@/features/teams/types";
import AnimatedScore from "@/features/matches/components/animated-score";
import classes from "./match-slot.module.css";
import { Trans } from "@lingui/react/macro";

export type MatchSlotState = "winner" | "correct" | "incorrect";

interface MatchSlotProps {
  from?: number;
  from_loser?: boolean;
  team?: TeamInfo;
  seed?: number;
  cups?: number;
  isWinner?: boolean;
  groupLabel?: string;
  state?: MatchSlotState;
}

export const MatchSlot: React.FC<MatchSlotProps> = ({
  from,
  from_loser,
  team,
  seed,
  cups,
  isWinner,
  groupLabel,
  state,
}) => {
  const teamId = team?.id;
  const previousTeamIdRef = useRef<string | undefined>(teamId);
  const [entranceKey, setEntranceKey] = useState(0);

  useEffect(() => {
    const previousTeamId = previousTeamIdRef.current;
    previousTeamIdRef.current = teamId;
    if (teamId && previousTeamId !== teamId) {
      setEntranceKey((key) => key + 1);
    }
  }, [teamId]);

  const slotState: MatchSlotState | undefined =
    state ?? (isWinner ? "winner" : undefined);
  const highlighted = slotState === "winner" || slotState === "correct";

  return (
    <Flex
      align="stretch"
      style={{
        backgroundColor: highlighted
          ? 'var(--mantine-color-green-light)'
          : slotState === "incorrect"
            ? 'var(--mantine-color-red-light)'
            : 'transparent',
        borderRadius: 'var(--mantine-radius-sm)',
        transition: 'background-color 200ms ease',
      }}
    >
      {(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
      <Flex p="6px 10px" w='100%' align="center">
        <Flex
          key={entranceKey}
          className={entranceKey > 0 ? classes.slotEnter : undefined}
          align="center"
          gap={4}
          flex={1}
        >
          {team ? (
            <>
              <Text
                size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
                truncate
                c={slotState === "incorrect" ? "dimmed" : undefined}
                style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
              >
                {team.name}
              </Text>
              {highlighted && (
                <CrownIcon
                  size={14}
                  weight="fill"
                  style={{
                    color: 'gold',
                    marginLeft: '2px',
                    marginTop: '-1px',
                    filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
                    flexShrink: 0
                  }}
                />
              )}
            </>
          ) : groupLabel ? (
            <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
              {groupLabel}
            </Text>
          ) : from ? (
            <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
              {from_loser ? (
                <Trans>Loser of Match {from}</Trans>
              ) : (
                <Trans>Winner of Match {from}</Trans>
              )}
            </Text>
          ) : (
            <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
              <Trans>TBD</Trans>
            </Text>
          )}
        </Flex>
        {
          cups !== undefined ? (
            <AnimatedScore ta='center' w={15} fw={800} ml={4} size="xs" value={cups} />
          ) : undefined
        }
      </Flex>
    </Flex>
  );
};
