"use client";

import { Box, Card, Flex, HStack, Text, Badge } from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useColorModeValue } from "@/components/ui/color-mode";
import type { ValueBoardMatch } from "@/lib/api/value-board/types";

function pct(p: number): string {
  return `%${Math.round(p * 100)}`;
}

function formatKickoff(ms: number): string {
  if (!ms) return "";
  const d = new Date(ms);
  const p = (n: number) => String(n).padStart(2, "0");
  return `${p(d.getDate())}.${p(d.getMonth() + 1)} ${p(d.getHours())}:${p(d.getMinutes())}`;
}

function ProbBar({
  label,
  value,
  color,
  track,
}: {
  label: string;
  value: number;
  color: string;
  track: string;
}) {
  return (
    <HStack gap={2}>
      <Text w="62px" fontSize="xs" color="fg.muted" flexShrink={0}>
        {label}
      </Text>
      <Box flex="1" h="8px" bg={track} borderRadius="full" overflow="hidden">
        <Box
          h="full"
          w={`${(value * 100).toFixed(1)}%`}
          bg={color}
          borderRadius="full"
        />
      </Box>
      <Text
        w="42px"
        textAlign="right"
        fontSize="xs"
        fontWeight="semibold"
        flexShrink={0}
      >
        {pct(value)}
      </Text>
    </HStack>
  );
}

export default function ValueBoardCard({ item }: { item: ValueBoardMatch }) {
  const t = useTranslations("value-board");
  const cardBg = useColorModeValue("white", "gray.900");
  const track = useColorModeValue("gray.100", "gray.800");
  const leanLabel =
    item.lean &&
    { "1": t("home"), X: t("draw"), "2": t("away") }[item.lean.key];

  return (
    <Card.Root bg={cardBg} borderWidth="1px" borderRadius="2xl" overflow="hidden">
      <Card.Body p={5}>
        <Flex justify="space-between" align="flex-start" gap={2} mb={2}>
          <Box>
            <Text fontSize="xs" color="fg.muted">
              {item.league}
            </Text>
            <Text fontSize="xs" color="fg.muted">
              {formatKickoff(item.kickoff)}
            </Text>
          </Box>
          <Badge
            colorPalette={item.isCup ? "orange" : "green"}
            variant="subtle"
            fontSize="0.65rem"
            whiteSpace="nowrap"
          >
            {item.isCup ? t("cup") : t("calibrated")}
          </Badge>
        </Flex>

        <Text fontSize="md" fontWeight="bold" mb={3}>
          {item.matchName}
        </Text>

        {item.ms && (
          <Box mb={3}>
            <ProbBar label={t("home")} value={item.ms.home} color="green.500" track={track} />
            <Box h="4px" />
            <ProbBar label={t("draw")} value={item.ms.draw} color="gray.400" track={track} />
            <Box h="4px" />
            <ProbBar label={t("away")} value={item.ms.away} color="blue.500" track={track} />
          </Box>
        )}

        {item.ou25 && (
          <ProbBar
            label={`${t("over")} 2.5`}
            value={item.ou25.over}
            color="orange.400"
            track={track}
          />
        )}
        {item.btts && (
          <>
            <Box h="4px" />
            <ProbBar
              label={`${t("btts")} ✓`}
              value={item.btts.yes}
              color="purple.400"
              track={track}
            />
          </>
        )}
        {item.htResult && (
          <>
            <Box h="4px" />
            <ProbBar
              label={`${t("ht")} 1`}
              value={item.htResult.home}
              color="teal.400"
              track={track}
            />
          </>
        )}

        <Flex
          mt={4}
          pt={3}
          borderTopWidth="1px"
          justify="space-between"
          align="center"
          wrap="wrap"
          gap={2}
        >
          <HStack gap={3} fontSize="xs">
            {item.topScores[0] && (
              <Text color="fg.muted">
                {t("topScore")}:{" "}
                <Text as="span" fontWeight="semibold" color="fg">
                  {item.topScores[0].score} ({pct(item.topScores[0].prob)})
                </Text>
              </Text>
            )}
            {item.expectedGoals != null && (
              <Text color="fg.muted">
                {t("expectedGoals")}:{" "}
                <Text as="span" fontWeight="semibold" color="fg">
                  {item.expectedGoals.toFixed(1)}
                </Text>
              </Text>
            )}
          </HStack>
          {item.vigPct != null && (
            <Text fontSize="xs" color="fg.muted">
              {t("vig")} %{item.vigPct.toFixed(1)}
            </Text>
          )}
        </Flex>

        {item.lean && leanLabel && (
          <Text fontSize="sm" mt={2} fontWeight="medium">
            → {t("lean")}: {leanLabel} {pct(item.lean.prob)}
          </Text>
        )}
      </Card.Body>
    </Card.Root>
  );
}
