import { Box, AvatarGroup } from "@mantine/core";
import { CrownIcon } from "@phosphor-icons/react";
import { TeamInfo } from "@/features/teams/types";
import Avatar from "./avatar";
import PlayerAvatar from "./player-avatar";

interface TeamAvatarProps {
  team: TeamInfo;
  size?: number;
  radius?: string | number;
  withBorder?: boolean;
  disableFullscreen?: boolean;
  contain?: boolean;
  style?: React.CSSProperties;
  winner?: boolean;
  isRegional?: boolean;
}

const TeamAvatar = ({
  team,
  size = 35,
  radius = "sm",
  withBorder = true,
  disableFullscreen = false,
  contain = false,
  style,
  winner = false,
  isRegional,
}: TeamAvatarProps) => {
  const hasNoLogo = !team.logo;
  const hasTwoPlayers = team.players?.length === 2;

  const shouldShowPlayerAvatars = isRegional === true && hasTwoPlayers && hasNoLogo;

  if (shouldShowPlayerAvatars && team.players?.length === 2) {
    const playerSize = size * 0.6;
    const crownSize = Math.max(12, size * 0.35);

    return (
      <Box
        style={{
          position: "relative",
          width: size,
          height: size,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          ...style,
        }}
      >
        <AvatarGroup spacing={size * -0.25}>
          <Box style={{ position: "relative" }}>
            <PlayerAvatar
              name={`${team.players[0].first_name} ${team.players[0].last_name}`}
              size={playerSize}
              disableFullscreen={disableFullscreen}
            />
            {winner && (
              <Box
                style={{
                  position: "absolute",
                  top: -crownSize * 1.1,
                  left: "45%",
                  transform: "translateX(-50%)",
                  color: "gold",
                  rotate: "-5deg",
                }}
              >
                <CrownIcon size={crownSize} weight="fill" />
              </Box>
            )}
          </Box>
          <Box style={{ position: "relative" }}>
            <PlayerAvatar
              name={`${team.players[1].first_name} ${team.players[1].last_name}`}
              size={playerSize}
              disableFullscreen={disableFullscreen}
            />
            {winner && (
              <Box
                style={{
                  position: "absolute",
                  top: -crownSize * 0.95,
                  left: "65%",
                  transform: "translateX(-50%)",
                  color: "gold",
                  rotate: "10deg",
                }}
              >
                <CrownIcon size={crownSize} weight="fill" />
              </Box>
            )}
          </Box>
        </AvatarGroup>
      </Box>
    );
  }

  const crownSize = Math.max(14, size * 0.4); 

  return (
    <Box style={{ position: "relative", ...style }}>
      <Avatar
        name={team.name}
        size={size}
        radius={radius}
        withBorder={withBorder}
        disableFullscreen={disableFullscreen}
        contain={contain}
        src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
      />
      {winner && (
        <Box
          style={{
            position: "absolute",
            top: -crownSize * 0.6,
            left: -crownSize * 0.25,
            transform: "rotate(-25deg)",
            color: "gold",
          }}
        >
          <CrownIcon size={crownSize} weight="fill" />
        </Box>
      )}
    </Box>
  );
};

export default TeamAvatar;