"use client";

import { Box, SimpleGrid, Text, Card, VStack, Flex } from "@chakra-ui/react";
import { useColorModeValue } from "@/components/ui/color-mode";
import type { MatchPredictionDto } from "@/lib/api/predictions/types";
import { useTranslations } from "next-intl";

// movement: per market (Turkish name) -> per selection -> {open, close}
export type OddsMovement = Record<
  string,
  Record<string, { open: number; close: number }>
>;

interface OddsCardProps {
  odds?: Record<string, Record<string, { odd: string }>>;
  prediction?: MatchPredictionDto;
  movement?: OddsMovement;
}

// Turkish odds-market name -> prediction market_board code
const MARKET_CODE: Record<string, string> = {
  "Maç Sonucu": "MS",
  "1. Yarı Sonucu": "HT",
  "İlk Yarı Sonucu": "HT",
  "Karşılıklı Gol": "BTTS",
  "Çifte Şans": "DC",
  "1,5 Alt/Üst": "OU15",
  "1.5 Alt/Üst": "OU15",
  "2,5 Alt/Üst": "OU25",
  "2.5 Alt/Üst": "OU25",
  "3,5 Alt/Üst": "OU35",
  "3.5 Alt/Üst": "OU35",
};

// odds selection label -> market_board probs key
function probKey(code: string, sel: string): string | null {
  if (code === "MS" || code === "HT") {
    return ["1", "X", "2"].includes(sel) ? sel : null;
  }
  if (code.startsWith("OU")) {
    if (sel === "Üst" || sel === "Ust") return "over";
    if (sel === "Alt") return "under";
    return null;
  }
  if (code === "BTTS") {
    if (sel === "Var") return "yes";
    if (sel === "Yok") return "no";
    return null;
  }
  if (code === "DC") {
    return { "1-X": "1X", "X-2": "X2", "1-2": "12" }[sel] ?? null;
  }
  return null;
}

interface MarketBlockProps {
  title: string;
  selections: Record<string, { odd: string }>;
  prediction?: MatchPredictionDto;
  movement?: OddsMovement;
}

function MarketBlock({ title, selections, prediction, movement }: MarketBlockProps) {
  const bg = useColorModeValue("gray.50", "gray.800");
  const borderColor = useColorModeValue("gray.200", "gray.700");
  const selectionBg = useColorModeValue("white", "gray.700");

  const code = MARKET_CODE[title];
  const probs = code ? prediction?.market_board?.[code]?.probs : undefined;
  const moveMkt = movement?.[title];

  const order = (a: string, b: string) => {
    if (["1", "X", "2"].includes(a) && ["1", "X", "2"].includes(b))
      return ["1", "X", "2"].indexOf(a) - ["1", "X", "2"].indexOf(b);
    if (["Alt", "Üst"].includes(a) && ["Alt", "Üst"].includes(b))
      return a === "Alt" ? -1 : 1;
    if (["Var", "Yok"].includes(a) && ["Var", "Yok"].includes(b))
      return a === "Var" ? -1 : 1;
    return a.localeCompare(b);
  };
  const sortedKeys = Object.keys(selections).sort(order);

  return (
    <Box bg={bg} borderWidth="1px" borderColor={borderColor} borderRadius="md" overflow="hidden">
      <Box px={3} py={1.5} borderBottomWidth="1px" borderColor={borderColor}>
        <Text fontSize="xs" fontWeight="bold" color="fg.muted" textTransform="uppercase">
          {title}
        </Text>
      </Box>
      <Flex p={2} gap={2} wrap="wrap">
        {sortedKeys.map((key) => {
          const pk = code ? probKey(code, key) : null;
          const prob = pk && probs ? probs[pk] : undefined; // 0..1
          const mv = moveMkt?.[key];
          let movePct: number | null = null;
          if (mv && mv.open > 0) movePct = ((mv.close - mv.open) / mv.open) * 100;

          return (
            <Flex
              key={key}
              direction="column"
              align="center"
              justify="center"
              bg={selectionBg}
              borderWidth="1px"
              borderColor={borderColor}
              borderRadius="sm"
              minW="64px"
              py={1}
              px={2}
              flex={1}
            >
              <Text fontSize="xs" color="fg.muted" mb={0.5}>
                {key}
              </Text>
              <Text fontSize="sm" fontWeight="bold" color="primary.500">
                {Number(selections[key].odd).toFixed(2)}
              </Text>
              {/* Model hit probability (calibrated) */}
              {prob !== undefined && (
                <Text
                  fontSize="xs"
                  fontWeight="semibold"
                  color={prob >= 0.5 ? "green.500" : "fg.muted"}
                >
                  %{Math.round(prob * 100)}
                </Text>
              )}
              {/* Opening→closing total movement */}
              {movePct !== null && Math.abs(movePct) >= 0.5 && (
                <Text
                  fontSize="10px"
                  color={movePct < 0 ? "red.400" : "blue.400"}
                  title={`Açılış ${mv!.open.toFixed(2)} → Kapanış ${mv!.close.toFixed(2)}`}
                >
                  {movePct < 0 ? "↓" : "↑"}
                  {Math.abs(movePct).toFixed(1)}%
                </Text>
              )}
            </Flex>
          );
        })}
      </Flex>
    </Box>
  );
}

export default function OddsCard({ odds, prediction, movement }: OddsCardProps) {
  const t = useTranslations("matches");
  const cardBg = useColorModeValue("white", "gray.900");
  const borderColor = useColorModeValue("gray.100", "gray.800");

  if (!odds || Object.keys(odds).length === 0) return null;

  const PRIORITY_MARKETS = [
    "Maç Sonucu",
    "2.5 Alt/Üst",
    "2,5 Alt/Üst",
    "Karşılıklı Gol",
    "İlk Yarı Sonucu",
    "1. Yarı Sonucu",
    "Çifte Şans",
    "Kart",
    "Korner",
  ];

  const marketKeys = Object.keys(odds);
  const priorityKeys = marketKeys.filter((k) =>
    PRIORITY_MARKETS.some((pm) => k.includes(pm)),
  );
  const otherKeys = marketKeys.filter(
    (k) => !PRIORITY_MARKETS.some((pm) => k.includes(pm)),
  );

  return (
    <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="xl" mb={6}>
      <Card.Body>
        <VStack align="stretch" gap={4}>
          <Flex justify="space-between" align="baseline" wrap="wrap" gap={1}>
            <Text fontSize="lg" fontWeight="bold">
              {t("live-odds")}
            </Text>
            <Text fontSize="xs" color="fg.muted">
              {t("odds-legend")}
            </Text>
          </Flex>

          {priorityKeys.length > 0 && (
            <SimpleGrid columns={{ base: 1, md: 2 }} gap={4}>
              {priorityKeys.map((key) => (
                <MarketBlock
                  key={key}
                  title={key}
                  selections={odds[key]}
                  prediction={prediction}
                  movement={movement}
                />
              ))}
            </SimpleGrid>
          )}

          {otherKeys.length > 0 && (
            <SimpleGrid
              columns={{ base: 1, md: 2, lg: 3 }}
              gap={4}
              mt={priorityKeys.length > 0 ? 2 : 0}
            >
              {otherKeys.map((key) => (
                <MarketBlock
                  key={key}
                  title={key}
                  selections={odds[key]}
                  prediction={prediction}
                  movement={movement}
                />
              ))}
            </SimpleGrid>
          )}
        </VStack>
      </Card.Body>
    </Card.Root>
  );
}
