import { Card, Flex, Text } from "@mantine/core";
import { Trans } from "@lingui/react/macro";
import React from "react";
import { MatchSlot, MatchSlotState } from "@/features/bracket/components/match-slot";
import { Match } from "@/features/matches/types";
import { PickResult, ResolvedMatch } from "../utils";

interface PredictionMatchCardProps {
  match: Match;
  resolved?: ResolvedMatch;
  orders: Record<number, number>;
  mode: "edit" | "view";
  result?: PickResult;
  active?: boolean;
  onActivate?: () => void;
}

const pickedState = (mode: "edit" | "view", result?: PickResult): MatchSlotState => {
  if (mode === "edit") return "winner";
  if (result === "correct") return "correct";
  if (result === "incorrect") return "incorrect";
  return "winner";
};

export const PredictionMatchCard: React.FC<PredictionMatchCardProps> = ({
  match,
  resolved,
  orders,
  mode,
  result,
  active,
  onActivate,
}) => {
  const resetLive = !match.reset || !!resolved?.resetNecessary;

  const slotProps = (side: "home" | "away") => {
    const team = side === "home" ? resolved?.home : resolved?.away;
    const teamId = side === "home" ? resolved?.homeId : resolved?.awayId;
    const isPicked =
      !!teamId && resetLive && resolved?.pickedWinnerId === teamId;

    return {
      from: orders[side === "home" ? match.home_from_lid : match.away_from_lid],
      from_loser:
        side === "home" ? match.home_from_loser : match.away_from_loser,
      team,
      seed: side === "home" ? match.home_seed : match.away_seed,
      state: isPicked ? pickedState(mode, result) : undefined,
    };
  };

  return (
    <Flex
      direction="row"
      align="center"
      justify="end"
      gap={8}
      opacity={resetLive ? 1 : 0.55}
      style={{ transition: "opacity 200ms ease" }}
    >
      <Text
        c="dimmed"
        fw="bolder"
        px={6}
        py={2}
        style={{
          backgroundColor: 'var(--mantine-color-body)'
        }}
      >
        {match.order}
      </Text>
      <Card
        w={220}
        withBorder
        pos="relative"
        onClick={onActivate}
        style={{
          cursor: onActivate ? "pointer" : undefined,
          overflow: "visible",
          backgroundColor: 'var(--mantine-color-body)',
          borderColor: active
            ? 'var(--mantine-primary-color-filled)'
            : 'var(--mantine-color-default-border)',
          boxShadow: active
            ? '0 0 0 1px var(--mantine-primary-color-filled), 0 0 12px var(--mantine-primary-color-light-hover), var(--mantine-shadow-sm)'
            : 'var(--mantine-shadow-sm)',
          transition: 'border-color 200ms ease, box-shadow 200ms ease',
        }}
        data-match-lid={match.lid}
      >
        <Card.Section withBorder p={0}>
          <MatchSlot {...slotProps("home")} />
        </Card.Section>

        <Card.Section p={0} mb={-16}>
          <MatchSlot {...slotProps("away")} />
        </Card.Section>

        {match.reset && (
          <Text
            pos="absolute"
            top={-20}
            left={8}
            size="xs"
            c="dimmed"
            fw="bold"
          >
            <Trans>* If necessary</Trans>
          </Text>
        )}
      </Card>
    </Flex>
  );
};
