1135 lines
40 KiB
TypeScript
1135 lines
40 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Badge,
|
||
Box,
|
||
Card,
|
||
Flex,
|
||
Grid,
|
||
HStack,
|
||
Icon,
|
||
IconButton,
|
||
Separator,
|
||
SimpleGrid,
|
||
Text,
|
||
VStack,
|
||
} from "@chakra-ui/react";
|
||
import { useMessages, useTranslations } from "next-intl";
|
||
import {
|
||
LuBadgeCheck,
|
||
LuBrain,
|
||
LuChartColumn,
|
||
LuChartNoAxesCombined,
|
||
LuCircleHelp,
|
||
LuFlame,
|
||
LuGauge,
|
||
LuShieldAlert,
|
||
LuSparkles,
|
||
LuTarget,
|
||
LuTriangleAlert,
|
||
LuTrendingUp,
|
||
} from "react-icons/lu";
|
||
import { useColorModeValue } from "@/components/ui/color-mode";
|
||
import { Tooltip } from "@/components/ui/overlays/tooltip";
|
||
import type {
|
||
MarketBoardEntryDto,
|
||
MatchBetSummaryItemDto,
|
||
MatchPickDto,
|
||
MatchPredictionDto,
|
||
SignalTier,
|
||
V27EngineDto,
|
||
} from "@/lib/api/predictions/types";
|
||
import type { SportType } from "@/lib/api/matches/types";
|
||
import V28OddsBandPanel from "@/components/matches/v28-odds-band-panel";
|
||
|
||
interface PredictionCardProps {
|
||
prediction: MatchPredictionDto;
|
||
}
|
||
|
||
function formatReasonFallback(reason: string): string {
|
||
if (reason.startsWith("risk:")) return formatReasonFallback(reason.slice(5));
|
||
const evMatch = reason.match(/^ev_edge_([+\-][\d.]+%)_grade_(\w)$/);
|
||
if (evMatch) return `Beklenen avantaj ${evMatch[1]} (Not ${evMatch[2]})`;
|
||
const negMatch = reason.match(/^negative_model_edge_([+\-][\d.]+)$/);
|
||
if (negMatch) return `Model avantajı negatif (${negMatch[1]})`;
|
||
const thresholdMatch = reason.match(/^below_market_edge_threshold_([+\-]?[\d.]+)$/);
|
||
if (thresholdMatch) return `Piyasa avantaj eşiğinin altında (${thresholdMatch[1]})`;
|
||
if (reason === "confidence_interval_too_wide") return "Güven aralığı fazla geniş.";
|
||
if (reason === "confidence_band_low") return "Güven bandı düşük.";
|
||
if (reason === "draw_probability_elevated") return "Beraberlik olasılığı yükselmiş görünüyor.";
|
||
if (reason === "balanced_match_risk") return "Maç dengeli görünüyor, sürpriz riski var.";
|
||
if (reason === "high_total_goal_volatility") return "Yüksek gol temposu sürpriz riskini artırıyor.";
|
||
if (reason === "mutual_goal_pressure") return "İki takım da gol tehdidi üretiyor.";
|
||
if (reason === "late_goal_swing_risk") return "Geç gol veya skor kırılması riski yüksek.";
|
||
if (reason === "live_match_open_state") return "Canlı maç tamamen açık oyuna dönmüş durumda.";
|
||
if (reason === "live_match_active_state") return "Canlı maç beklenenden daha hareketli ilerliyor.";
|
||
if (reason === "live_state_impossible_market") return "Canlı maç durumu bu marketi geçersiz kılıyor.";
|
||
if (reason === "live_score_exceeds_under_line") return "Canlı skor, alt seçeneğinin üst sınırına çok yaklaştı veya geçti.";
|
||
if (reason === "score_model_conflicts_with_under_pick") return "Skor ve xG modeli bu alt seçeneğiyle çelişiyor.";
|
||
if (reason === "score_model_conflicts_with_over_pick") return "Skor ve xG modeli bu üst seçeneğiyle çelişiyor.";
|
||
if (reason === "market_stack_conflict_over25") return "2.5 üst sinyali bu marketle çelişiyor.";
|
||
if (reason === "market_stack_conflict_btts") return "KG Var sinyali bu marketle çelişiyor.";
|
||
if (reason === "live_total_goals_close_to_line") return "Canlı toplam gol sayısı bu çizgiye fazla yaklaştı.";
|
||
if (reason === "score_model_conflicts_with_btts_no") return "Skor ve xG modeli KG Yok seçeneğiyle çelişiyor.";
|
||
if (reason === "score_model_conflicts_with_draw_pick") return "Skor modeli beraberlik seçeneğini desteklemiyor.";
|
||
if (reason === "score_model_conflicts_with_home_pick") return "Skor modeli ev sahibi seçeneğini desteklemiyor.";
|
||
if (reason === "score_model_conflicts_with_away_pick") return "Skor modeli deplasman seçeneğini desteklemiyor.";
|
||
if (/^[a-z0-9_]+$/i.test(reason)) {
|
||
return reason.replace(/_/g, " ").replace(/^\w/, (char) => char.toUpperCase());
|
||
}
|
||
return reason;
|
||
}
|
||
|
||
function formatPercent(value?: number, digits = 0): string {
|
||
if (value === undefined || value === null || Number.isNaN(value)) return "-";
|
||
return `${value.toFixed(digits)}%`;
|
||
}
|
||
|
||
function formatProbability(value?: number, digits = 1): string {
|
||
if (value === undefined || value === null || Number.isNaN(value)) return "-";
|
||
return `${(value * 100).toFixed(digits)}%`;
|
||
}
|
||
|
||
function formatOdds(value?: number | null): string {
|
||
if (!value || value <= 1.01) return "-";
|
||
return value.toFixed(2);
|
||
}
|
||
|
||
function formatUnits(value?: number): string {
|
||
if (!value || value <= 0) return "-";
|
||
return `${value.toFixed(1)}u`;
|
||
}
|
||
|
||
function getRiskPalette(level: string) {
|
||
switch (level.toUpperCase()) {
|
||
case "LOW":
|
||
return "green";
|
||
case "MEDIUM":
|
||
return "yellow";
|
||
case "HIGH":
|
||
return "orange";
|
||
case "EXTREME":
|
||
return "red";
|
||
default:
|
||
return "gray";
|
||
}
|
||
}
|
||
|
||
function getQualityPalette(label: string) {
|
||
switch (label.toUpperCase()) {
|
||
case "HIGH":
|
||
return "green";
|
||
case "MEDIUM":
|
||
return "yellow";
|
||
case "LOW":
|
||
return "red";
|
||
default:
|
||
return "gray";
|
||
}
|
||
}
|
||
|
||
function getConfidenceBandPalette(band?: string) {
|
||
switch ((band || "").toUpperCase()) {
|
||
case "HIGH":
|
||
return "green";
|
||
case "MEDIUM":
|
||
return "yellow";
|
||
case "LOW":
|
||
return "red";
|
||
default:
|
||
return "gray";
|
||
}
|
||
}
|
||
|
||
function getConfidenceBandLabel(band?: string) {
|
||
switch ((band || "").toUpperCase()) {
|
||
case "HIGH":
|
||
return "Yüksek";
|
||
case "MEDIUM":
|
||
return "Orta";
|
||
case "LOW":
|
||
return "Düşük";
|
||
default:
|
||
return "Belirsiz";
|
||
}
|
||
}
|
||
|
||
function getLineupSourceLabel(source?: string): string {
|
||
if (source === "confirmed_live") return "Onayli ilk 11";
|
||
if (source === "probable_xi") return "Muhtemel ilk 11";
|
||
return source ? formatReasonFallback(source) : "Bilinmiyor";
|
||
}
|
||
|
||
function formatInterval(
|
||
interval?: { lower?: number; upper?: number },
|
||
digits = 0,
|
||
): string {
|
||
if (
|
||
!interval ||
|
||
interval.lower === undefined ||
|
||
interval.upper === undefined ||
|
||
Number.isNaN(interval.lower) ||
|
||
Number.isNaN(interval.upper)
|
||
) {
|
||
return "-";
|
||
}
|
||
return `${interval.lower.toFixed(digits)}-${interval.upper.toFixed(digits)}%`;
|
||
}
|
||
|
||
function getPredictionReasonText(
|
||
reason: string,
|
||
reasonMessages?: Record<string, string>,
|
||
): string {
|
||
if (
|
||
reasonMessages &&
|
||
Object.prototype.hasOwnProperty.call(reasonMessages, reason)
|
||
) {
|
||
return reasonMessages[reason];
|
||
}
|
||
return formatReasonFallback(reason);
|
||
}
|
||
|
||
function getMarketLabel(
|
||
market: string,
|
||
marketLabels?: Record<string, string>,
|
||
): string {
|
||
if (marketLabels && Object.prototype.hasOwnProperty.call(marketLabels, market)) {
|
||
return marketLabels[market];
|
||
}
|
||
|
||
const fallbackLabels: Record<string, string> = {
|
||
ML: "Moneyline",
|
||
MS: "Maç Sonucu",
|
||
DC: "Çifte Şans",
|
||
TOTAL: "Toplam Sayı",
|
||
SPREAD: "Handikap",
|
||
OU15: "Toplam Gol 1.5",
|
||
OU25: "Toplam Gol 2.5",
|
||
OU35: "Toplam Gol 3.5",
|
||
BTTS: "Karşılıklı Gol",
|
||
HT: "İlk Yarı Sonucu",
|
||
HT_OU05: "İlk Yarı 0.5 Gol",
|
||
HT_OU15: "İlk Yarı 1.5 Gol",
|
||
HTFT: "İlk Yarı / Maç Sonu",
|
||
"HT/FT": "İlk Yarı / Maç Sonu",
|
||
OE: "Tek / Çift",
|
||
CARDS: "Kartlar 4.5",
|
||
HCAP: "Handikap Sonucu",
|
||
};
|
||
if (fallbackLabels[market]) {
|
||
return fallbackLabels[market];
|
||
}
|
||
|
||
return market;
|
||
}
|
||
|
||
const MARKET_ORDER = [
|
||
"ML",
|
||
"TOTAL",
|
||
"SPREAD",
|
||
"MS",
|
||
"DC",
|
||
"OU15",
|
||
"OU25",
|
||
"OU35",
|
||
"BTTS",
|
||
"HT",
|
||
"HT_OU05",
|
||
"HT_OU15",
|
||
"HTFT",
|
||
"OE",
|
||
"CARDS",
|
||
"HCAP",
|
||
];
|
||
|
||
function getPredictionSport(prediction: MatchPredictionDto): SportType {
|
||
const explicitSport = prediction.match_info?.sport;
|
||
if (explicitSport === "basketball" || explicitSport === "football") {
|
||
return explicitSport;
|
||
}
|
||
|
||
if (
|
||
prediction.model_version?.toLowerCase().includes("basketball") ||
|
||
Object.keys(prediction.market_board || {}).some((market) =>
|
||
["ML", "TOTAL", "SPREAD"].includes(market),
|
||
)
|
||
) {
|
||
return "basketball";
|
||
}
|
||
|
||
return "football";
|
||
}
|
||
|
||
const SIGNAL_TIER_ORDER: SignalTier[] = ["CORE", "VALUE", "LEAN", "LONGSHOT", "PASS"];
|
||
|
||
function getSignalTierPalette(tier?: SignalTier) {
|
||
switch (tier) {
|
||
case "CORE":
|
||
return "green";
|
||
case "VALUE":
|
||
return "blue";
|
||
case "LEAN":
|
||
return "orange";
|
||
case "LONGSHOT":
|
||
return "pink";
|
||
default:
|
||
return "gray";
|
||
}
|
||
}
|
||
|
||
function getSignalTierLabel(tier?: SignalTier) {
|
||
switch (tier) {
|
||
case "CORE":
|
||
return "Çekirdek";
|
||
case "VALUE":
|
||
return "Değer";
|
||
case "LEAN":
|
||
return "Yorum";
|
||
case "LONGSHOT":
|
||
return "Sürpriz";
|
||
default:
|
||
return "Pas";
|
||
}
|
||
}
|
||
|
||
function TooltipIcon({ content }: { content: string }) {
|
||
return (
|
||
<Tooltip
|
||
content={content}
|
||
showArrow
|
||
positioning={{ placement: "top" }}
|
||
contentProps={{ maxW: "260px", fontSize: "xs", px: 3, py: 2 }}
|
||
>
|
||
<IconButton aria-label="Bilgi" variant="ghost" size="2xs" colorPalette="gray">
|
||
<LuCircleHelp />
|
||
</IconButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
|
||
function SectionTitle({
|
||
icon,
|
||
title,
|
||
info,
|
||
}: {
|
||
icon: React.ElementType;
|
||
title: string;
|
||
info?: string;
|
||
}) {
|
||
return (
|
||
<HStack justify="space-between" w="full">
|
||
<HStack gap={2}>
|
||
<Icon as={icon} boxSize={4.5} color="fg.muted" />
|
||
<Text fontSize="lg" fontWeight="semibold">
|
||
{title}
|
||
</Text>
|
||
</HStack>
|
||
{info ? <TooltipIcon content={info} /> : null}
|
||
</HStack>
|
||
);
|
||
}
|
||
|
||
function MetricTile({
|
||
label,
|
||
value,
|
||
helper,
|
||
accent,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
helper?: string;
|
||
accent?: string;
|
||
}) {
|
||
const bg = useColorModeValue("gray.50", "whiteAlpha.50");
|
||
const borderColor = useColorModeValue("gray.200", "gray.700");
|
||
return (
|
||
<Box p={3.5} bg={bg} borderWidth="1px" borderColor={borderColor} borderRadius="xl">
|
||
<HStack justify="space-between" mb={1.5}>
|
||
<Text fontSize="xs" color="fg.muted" fontWeight="medium">
|
||
{label}
|
||
</Text>
|
||
{helper ? <TooltipIcon content={helper} /> : null}
|
||
</HStack>
|
||
<Text fontSize="xl" fontWeight="bold" color={accent}>
|
||
{value}
|
||
</Text>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
function Bar({
|
||
value,
|
||
color,
|
||
trackBg,
|
||
height = "8px",
|
||
}: {
|
||
value: number;
|
||
color: string;
|
||
trackBg: string;
|
||
height?: string;
|
||
}) {
|
||
return (
|
||
<Box h={height} w="full" bg={trackBg} borderRadius="full" overflow="hidden">
|
||
<Box h="full" w={`${Math.max(0, Math.min(100, value))}%`} bg={color} borderRadius="full" />
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
function ReasonList({
|
||
items,
|
||
resolveReason,
|
||
}: {
|
||
items?: string[];
|
||
resolveReason: (reason: string) => string;
|
||
}) {
|
||
if (!items?.length) return null;
|
||
return (
|
||
<VStack align="stretch" gap={1.5}>
|
||
{items.map((item, index) => (
|
||
<HStack key={`${item}-${index}`} align="start" gap={2}>
|
||
<Box mt="7px" boxSize="5px" bg="primary.400" borderRadius="full" />
|
||
<Text fontSize="sm" color="fg.muted" lineHeight="tall">
|
||
{resolveReason(item)}
|
||
</Text>
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
);
|
||
}
|
||
|
||
function ProbabilitySplit({
|
||
modelProb,
|
||
impliedProb,
|
||
}: {
|
||
modelProb: number;
|
||
impliedProb: number;
|
||
}) {
|
||
const trackBg = useColorModeValue("gray.100", "gray.700");
|
||
if (!impliedProb || impliedProb <= 0) return null;
|
||
return (
|
||
<VStack align="stretch" gap={2}>
|
||
<Flex justify="space-between">
|
||
<Text fontSize="xs" color="blue.600" fontWeight="semibold">
|
||
Model {formatProbability(modelProb, 0)}
|
||
</Text>
|
||
<Text fontSize="xs" color="orange.500" fontWeight="semibold">
|
||
Piyasa {formatProbability(impliedProb, 0)}
|
||
</Text>
|
||
</Flex>
|
||
<Box position="relative">
|
||
<Bar value={modelProb * 100} color="blue.400" trackBg={trackBg} />
|
||
<Box
|
||
position="absolute"
|
||
top="-2px"
|
||
left={`calc(${Math.min(impliedProb * 100, 100)}% - 1px)`}
|
||
h="12px"
|
||
w="2px"
|
||
bg="orange.500"
|
||
borderRadius="full"
|
||
/>
|
||
</Box>
|
||
</VStack>
|
||
);
|
||
}
|
||
|
||
function PickCard({
|
||
pick,
|
||
stakeFallback,
|
||
title,
|
||
resolveReason,
|
||
palette,
|
||
marketLabels,
|
||
labels,
|
||
}: {
|
||
pick: MatchPickDto;
|
||
stakeFallback?: number;
|
||
title: string;
|
||
resolveReason: (reason: string) => string;
|
||
palette: string;
|
||
marketLabels?: Record<string, string>;
|
||
labels: {
|
||
confidence: string;
|
||
odds: string;
|
||
recommendedStake: string;
|
||
playScore: string;
|
||
playability: string;
|
||
};
|
||
}) {
|
||
const bg = useColorModeValue(`${palette}.50`, `${palette}.950`);
|
||
const borderColor = useColorModeValue(`${palette}.200`, `${palette}.800`);
|
||
const trackBg = useColorModeValue("gray.100", "gray.700");
|
||
const intervalWarningBg = useColorModeValue("orange.50", "orange.950");
|
||
const intervalWarningBorder = useColorModeValue("orange.200", "orange.800");
|
||
const confidenceBandPalette = getConfidenceBandPalette(
|
||
pick.confidence_interval?.band,
|
||
);
|
||
return (
|
||
<Card.Root bg={bg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<Flex justify="space-between" align={{ base: "start", md: "center" }} direction={{ base: "column", md: "row" }} gap={3}>
|
||
<VStack align="start" gap={2}>
|
||
<Badge colorPalette={palette} variant="solid" borderRadius="full">
|
||
{title}
|
||
</Badge>
|
||
<Text fontSize="2xl" fontWeight="bold">
|
||
{pick.pick}
|
||
</Text>
|
||
<HStack gap={2} flexWrap="wrap">
|
||
<Badge variant="subtle">{getMarketLabel(pick.market, marketLabels)}</Badge>
|
||
<Badge colorPalette={pick.playable ? "green" : "gray"} variant="subtle">
|
||
{pick.bet_grade}
|
||
</Badge>
|
||
<Badge colorPalette={getSignalTierPalette(pick.signal_tier)} variant="subtle">
|
||
{getSignalTierLabel(pick.signal_tier)}
|
||
</Badge>
|
||
<Badge colorPalette={confidenceBandPalette} variant="subtle">
|
||
{getConfidenceBandLabel(pick.confidence_interval?.band)}
|
||
</Badge>
|
||
<Badge colorPalette={pick.ev_edge > 0 ? "green" : "red"} variant="subtle">
|
||
EV {pick.ev_edge > 0 ? "+" : ""}
|
||
{formatPercent(pick.ev_edge * 100, 1)}
|
||
</Badge>
|
||
</HStack>
|
||
</VStack>
|
||
<SimpleGrid columns={2} gap={3} minW={{ base: "full", md: "320px" }}>
|
||
<MetricTile label={labels.confidence} value={formatPercent(pick.calibrated_confidence, 0)} />
|
||
<MetricTile label={labels.odds} value={formatOdds(pick.odds)} />
|
||
<MetricTile
|
||
label={labels.recommendedStake}
|
||
value={formatUnits(pick.stake_units || stakeFallback)}
|
||
/>
|
||
<MetricTile label={labels.playScore} value={formatPercent(pick.play_score, 0)} />
|
||
<MetricTile label="Guven Araligi" value={formatInterval(pick.confidence_interval)} />
|
||
<MetricTile
|
||
label="Band"
|
||
value={getConfidenceBandLabel(pick.confidence_interval?.band)}
|
||
accent={`${confidenceBandPalette}.500`}
|
||
/>
|
||
</SimpleGrid>
|
||
</Flex>
|
||
<ProbabilitySplit modelProb={pick.probability} impliedProb={pick.implied_prob} />
|
||
<Box>
|
||
<HStack justify="space-between" mb={1.5}>
|
||
<Text fontSize="sm" fontWeight="semibold">
|
||
{labels.playability}
|
||
</Text>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{formatPercent(pick.play_score, 1)}
|
||
</Text>
|
||
</HStack>
|
||
<Bar
|
||
value={pick.play_score}
|
||
color={pick.ev_edge > 0 ? "green.400" : "orange.400"}
|
||
trackBg={trackBg}
|
||
/>
|
||
</Box>
|
||
<ReasonList items={pick.decision_reasons} resolveReason={resolveReason} />
|
||
{pick.confidence_interval && !pick.confidence_interval.threshold_met ? (
|
||
<Box
|
||
p={3}
|
||
borderRadius="xl"
|
||
bg={intervalWarningBg}
|
||
borderWidth="1px"
|
||
borderColor={intervalWarningBorder}
|
||
>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
Guven araligi genis. Sinyal olsa bile tek basina oynanmasi onerilmez.
|
||
</Text>
|
||
</Box>
|
||
) : null}
|
||
</Card.Body>
|
||
</Card.Root>
|
||
);
|
||
}
|
||
|
||
function SummaryTable({
|
||
items,
|
||
marketLabels,
|
||
title,
|
||
info,
|
||
}: {
|
||
items: MatchBetSummaryItemDto[];
|
||
marketLabels?: Record<string, string>;
|
||
title: string;
|
||
info: string;
|
||
}) {
|
||
const cardBg = useColorModeValue("white", "gray.800");
|
||
const borderColor = useColorModeValue("gray.200", "gray.700");
|
||
const highlightBg = useColorModeValue("green.50", "green.950");
|
||
if (!items.length) return null;
|
||
return (
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle icon={LuChartColumn} title={title} info={info} />
|
||
<VStack align="stretch" gap={2}>
|
||
{items
|
||
.slice()
|
||
.sort((left, right) => {
|
||
const leftIndex = SIGNAL_TIER_ORDER.indexOf(left.signal_tier || "PASS");
|
||
const rightIndex = SIGNAL_TIER_ORDER.indexOf(right.signal_tier || "PASS");
|
||
if (leftIndex !== rightIndex) return leftIndex - rightIndex;
|
||
return right.calibrated_confidence - left.calibrated_confidence;
|
||
})
|
||
.map((item) => (
|
||
<Flex
|
||
key={`${item.market}-${item.pick}`}
|
||
justify="space-between"
|
||
align={{ base: "start", md: "center" }}
|
||
direction={{ base: "column", md: "row" }}
|
||
gap={3}
|
||
px={3}
|
||
py={3}
|
||
borderRadius="xl"
|
||
bg={item.playable ? highlightBg : "transparent"}
|
||
borderWidth="1px"
|
||
borderColor={item.playable ? "green.200" : borderColor}
|
||
>
|
||
<HStack gap={2} flexWrap="wrap">
|
||
<Badge colorPalette={item.playable ? "green" : "gray"} variant="subtle">
|
||
{item.bet_grade}
|
||
</Badge>
|
||
<Badge colorPalette={getSignalTierPalette(item.signal_tier)} variant="subtle">
|
||
{getSignalTierLabel(item.signal_tier)}
|
||
</Badge>
|
||
<Text fontWeight="semibold">{getMarketLabel(item.market, marketLabels)}</Text>
|
||
<Text color="fg.muted">{item.pick}</Text>
|
||
</HStack>
|
||
<HStack gap={5} fontSize="sm">
|
||
<Text minW="48px">{formatOdds(item.odds)}</Text>
|
||
<Text minW="68px" color={item.ev_edge > 0 ? "green.500" : "red.500"} fontWeight="semibold">
|
||
{item.ev_edge > 0 ? "+" : ""}
|
||
{formatPercent(item.ev_edge * 100, 1)}
|
||
</Text>
|
||
<Text minW="48px">{formatPercent(item.calibrated_confidence, 0)}</Text>
|
||
<Badge colorPalette={getConfidenceBandPalette(item.confidence_interval?.band)} variant="subtle">
|
||
{getConfidenceBandLabel(item.confidence_interval?.band)}
|
||
</Badge>
|
||
<Badge variant="surface">{formatUnits(item.stake_units)}</Badge>
|
||
</HStack>
|
||
</Flex>
|
||
))}
|
||
</VStack>
|
||
</Card.Body>
|
||
</Card.Root>
|
||
);
|
||
}
|
||
|
||
function MarketBoardSection({
|
||
marketBoard,
|
||
betSummary,
|
||
marketLabels,
|
||
title,
|
||
info,
|
||
}: {
|
||
marketBoard?: Record<string, MarketBoardEntryDto>;
|
||
betSummary?: MatchBetSummaryItemDto[];
|
||
marketLabels?: Record<string, string>;
|
||
title: string;
|
||
info: string;
|
||
}) {
|
||
const cardBg = useColorModeValue("white", "gray.800");
|
||
const borderColor = useColorModeValue("gray.200", "gray.700");
|
||
const trackBg = useColorModeValue("gray.100", "gray.700");
|
||
const innerBg = useColorModeValue("gray.50", "whiteAlpha.50");
|
||
|
||
if (!marketBoard || !Object.keys(marketBoard).length) return null;
|
||
|
||
const summaryByMarket = new Map((betSummary || []).map((item) => [item.market, item]));
|
||
const orderedEntries = Object.entries(marketBoard).sort(([left], [right]) => {
|
||
const leftIndex = MARKET_ORDER.indexOf(left);
|
||
const rightIndex = MARKET_ORDER.indexOf(right);
|
||
const safeLeft = leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
|
||
const safeRight = rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
|
||
return safeLeft - safeRight;
|
||
});
|
||
|
||
return (
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle
|
||
icon={LuChartNoAxesCombined}
|
||
title={title}
|
||
info={info}
|
||
/>
|
||
<SimpleGrid columns={{ base: 1, xl: 2 }} gap={4}>
|
||
{orderedEntries.map(([market, entry]) => {
|
||
if (!entry?.probs) return null;
|
||
const summary = summaryByMarket.get(market);
|
||
const interval =
|
||
summary?.confidence_interval || entry.confidence_interval;
|
||
return (
|
||
<Box
|
||
key={market}
|
||
p={4}
|
||
bg={innerBg}
|
||
borderWidth="1px"
|
||
borderColor={borderColor}
|
||
borderRadius="xl"
|
||
>
|
||
<Flex justify="space-between" align="start" mb={3}>
|
||
<VStack align="start" gap={1}>
|
||
<Text fontWeight="semibold">{market}</Text>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{getMarketLabel(market, marketLabels)}
|
||
</Text>
|
||
<HStack gap={2} flexWrap="wrap">
|
||
{summary ? (
|
||
<Badge colorPalette={summary.playable ? "green" : "gray"} variant="subtle">
|
||
{summary.playable ? "Oynanabilir" : "Riskli"}
|
||
</Badge>
|
||
) : null}
|
||
{summary?.signal_tier ? (
|
||
<Badge colorPalette={getSignalTierPalette(summary.signal_tier)} variant="subtle">
|
||
{getSignalTierLabel(summary.signal_tier)}
|
||
</Badge>
|
||
) : null}
|
||
{summary?.bet_grade ? <Badge variant="outline">{summary.bet_grade}</Badge> : null}
|
||
</HStack>
|
||
</VStack>
|
||
{entry.pick ? (
|
||
<Badge
|
||
colorPalette={getConfidenceBandPalette(entry.confidence_band || interval?.band)}
|
||
variant="subtle"
|
||
borderRadius="full"
|
||
>
|
||
{entry.pick} ({formatPercent(entry.confidence, 0)})
|
||
</Badge>
|
||
) : null}
|
||
</Flex>
|
||
<SimpleGrid columns={3} gap={2} mb={3}>
|
||
<MetricTile
|
||
label="Tutma Olasiligi"
|
||
value={formatPercent(entry.confidence, 0)}
|
||
accent="green.500"
|
||
/>
|
||
<MetricTile
|
||
label="Kalibre Guven"
|
||
value={summary ? formatPercent(summary.calibrated_confidence, 0) : "-"}
|
||
accent={summary?.playable ? "green.500" : "orange.500"}
|
||
/>
|
||
<MetricTile
|
||
label="Oran"
|
||
value={summary ? formatOdds(summary.odds) : "-"}
|
||
/>
|
||
</SimpleGrid>
|
||
{interval ? (
|
||
<Text fontSize="xs" color="fg.muted" mb={3}>
|
||
Guven araligi: {formatInterval(interval)}
|
||
</Text>
|
||
) : null}
|
||
<VStack align="stretch" gap={2.5}>
|
||
{Object.entries(entry.probs).map(([outcome, probability]) => (
|
||
<Box key={`${market}-${outcome}`}>
|
||
<Flex justify="space-between" mb={1}>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{outcome.toUpperCase()}
|
||
</Text>
|
||
<Text fontSize="sm" fontWeight="semibold">
|
||
{formatProbability(probability, 1)}
|
||
</Text>
|
||
</Flex>
|
||
<Bar
|
||
value={probability * 100}
|
||
color={
|
||
entry.pick === outcome ||
|
||
entry.pick?.toUpperCase() === outcome.toUpperCase()
|
||
? "green.400"
|
||
: "blue.400"
|
||
}
|
||
trackBg={trackBg}
|
||
height="6px"
|
||
/>
|
||
</Box>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
);
|
||
})}
|
||
</SimpleGrid>
|
||
</Card.Body>
|
||
</Card.Root>
|
||
);
|
||
}
|
||
|
||
function ScoreCard({
|
||
prediction,
|
||
sport,
|
||
}: {
|
||
prediction: MatchPredictionDto;
|
||
sport: SportType;
|
||
}) {
|
||
const cardBg = useColorModeValue("white", "gray.800");
|
||
const borderColor = useColorModeValue("gray.200", "gray.700");
|
||
const subBg = useColorModeValue("gray.50", "whiteAlpha.50");
|
||
const isBasketball = sport === "basketball";
|
||
|
||
return (
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle
|
||
icon={LuTarget}
|
||
title={isBasketball ? "Sayi Senaryosu" : "Skor Senaryosu"}
|
||
info={
|
||
isBasketball
|
||
? "Beklenen sayi dagilimi ve en olasi mac senaryolari."
|
||
: "Beklenen skor ve en olasi senaryolar."
|
||
}
|
||
/>
|
||
<SimpleGrid columns={{ base: 1, md: 3 }} gap={3}>
|
||
<MetricTile
|
||
label={isBasketball ? "Mac Sonu Sayi" : "Mac Sonu"}
|
||
value={prediction.score_prediction.ft}
|
||
/>
|
||
<MetricTile
|
||
label={isBasketball ? "Ilk Yari Sayi" : "Ilk Yari"}
|
||
value={prediction.score_prediction.ht}
|
||
/>
|
||
<MetricTile
|
||
label={isBasketball ? "Beklenen Toplam Sayi" : "Toplam xG"}
|
||
value={prediction.score_prediction.xg_total.toFixed(2)}
|
||
/>
|
||
</SimpleGrid>
|
||
<SimpleGrid columns={{ base: 2, md: 5 }} gap={2}>
|
||
{prediction.scenario_top5.map((scenario) => (
|
||
<Box key={`${scenario.score}-${scenario.prob}`} p={3} bg={subBg} borderWidth="1px" borderColor={borderColor} borderRadius="xl">
|
||
<Text fontSize="lg" fontWeight="bold">
|
||
{scenario.score}
|
||
</Text>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{formatProbability(scenario.prob, 1)}
|
||
</Text>
|
||
</Box>
|
||
))}
|
||
</SimpleGrid>
|
||
</Card.Body>
|
||
</Card.Root>
|
||
);
|
||
}
|
||
|
||
export default function PredictionCard({ prediction }: PredictionCardProps) {
|
||
const t = useTranslations("predictions");
|
||
const messages = useMessages() as {
|
||
predictions?: {
|
||
"prediction-reasons"?: Record<string, string>;
|
||
"market-labels"?: Record<string, string>;
|
||
ui?: Record<string, string>;
|
||
};
|
||
};
|
||
const marketLabels = messages.predictions?.["market-labels"];
|
||
const ui = messages.predictions?.ui;
|
||
const uiText = (key: string, fallback: string) => ui?.[key] || fallback;
|
||
const resolveReason = (reason: string) =>
|
||
getPredictionReasonText(reason, messages.predictions?.["prediction-reasons"]);
|
||
|
||
const pageBg = useColorModeValue("gray.50", "gray.900");
|
||
const cardBg = useColorModeValue("white", "gray.800");
|
||
const borderColor = useColorModeValue("gray.200", "gray.700");
|
||
const riskPalette = getRiskPalette(prediction.risk.level);
|
||
const qualityPalette = getQualityPalette(prediction.data_quality.label);
|
||
const recommendedPick = prediction.main_pick;
|
||
const mainBandPalette = getConfidenceBandPalette(
|
||
prediction.bet_advice.confidence_band,
|
||
);
|
||
const sport = getPredictionSport(prediction);
|
||
const isBasketball = sport === "basketball";
|
||
|
||
const engineItems = [
|
||
{
|
||
key: "team",
|
||
icon: LuGauge,
|
||
label: isBasketball ? "Takim Formu" : "Takim Gucu",
|
||
value: prediction.engine_breakdown.team,
|
||
color: "blue.400",
|
||
},
|
||
{
|
||
key: "player",
|
||
icon: LuSparkles,
|
||
label: isBasketball ? "Kadro Etkisi" : "Oyuncu Etkisi",
|
||
value: prediction.engine_breakdown.player,
|
||
color: "green.400",
|
||
},
|
||
{ key: "odds", icon: LuTrendingUp, label: "Oran Analizi", value: prediction.engine_breakdown.odds, color: "orange.400" },
|
||
{
|
||
key: "referee",
|
||
icon: LuShieldAlert,
|
||
label: isBasketball ? "Yardimci Sinyaller" : "Hakem Etkisi",
|
||
value: prediction.engine_breakdown.referee,
|
||
color: "purple.400",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<VStack align="stretch" gap={5}>
|
||
<Card.Root bg={pageBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={5}>
|
||
<SectionTitle
|
||
icon={LuBrain}
|
||
title={uiText("summary-title", "Tahmin Ozeti")}
|
||
info={uiText(
|
||
"summary-info",
|
||
"Kullanicinin once neyi oynayacagini, sonra nedenini anlamasi icin sade ozet.",
|
||
)}
|
||
/>
|
||
|
||
{recommendedPick ? (
|
||
<Grid templateColumns={{ base: "1fr", xl: "1.4fr 1fr" }} gap={4}>
|
||
<Box p={4} bg={useColorModeValue("green.50", "green.950")} borderWidth="1px" borderColor={useColorModeValue("green.200", "green.800")} borderRadius="2xl">
|
||
<HStack justify="space-between" align="start" mb={4}>
|
||
<VStack align="start" gap={2}>
|
||
<Badge colorPalette="green" variant="solid" borderRadius="full">
|
||
{uiText("main-recommendation", "Ana Oneri")}
|
||
</Badge>
|
||
<Text fontSize="2xl" fontWeight="bold">
|
||
{recommendedPick.pick}
|
||
</Text>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{getMarketLabel(recommendedPick.market, marketLabels)} {uiText("best-market-copy", "marketinde en guclu secim.")}
|
||
</Text>
|
||
<HStack gap={2} flexWrap="wrap">
|
||
<Badge colorPalette={mainBandPalette} variant="subtle">
|
||
{getConfidenceBandLabel(prediction.bet_advice.confidence_band)}
|
||
</Badge>
|
||
{recommendedPick.confidence_interval ? (
|
||
<Badge variant="outline">
|
||
{formatInterval(recommendedPick.confidence_interval)}
|
||
</Badge>
|
||
) : null}
|
||
</HStack>
|
||
</VStack>
|
||
<Icon as={LuBadgeCheck} boxSize={8} color="green.500" />
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 2, md: 4 }} gap={3}>
|
||
<MetricTile label={uiText("confidence-label", "Guven")} value={formatPercent(recommendedPick.calibrated_confidence, 0)} />
|
||
<MetricTile label={uiText("odds-label", "Oran")} value={formatOdds(recommendedPick.odds)} />
|
||
<MetricTile label="Guven Araligi" value={formatInterval(recommendedPick.confidence_interval)} />
|
||
<MetricTile
|
||
label={uiText("edge-label", "Beklenen Avantaj (Edge)")}
|
||
value={`${recommendedPick.ev_edge > 0 ? "+" : ""}${formatPercent(recommendedPick.ev_edge * 100, 1)}`}
|
||
helper={uiText(
|
||
"edge-info",
|
||
"Edge, model olasiligi ile piyasa olasiligi arasindaki farktir. Pozitifse model bu orani avantajli buluyor demektir.",
|
||
)}
|
||
accent={recommendedPick.ev_edge > 0 ? "green.500" : "red.500"}
|
||
/>
|
||
<MetricTile
|
||
label={uiText("stake-label", "Onerilen Miktar (Stake)")}
|
||
value={formatUnits(
|
||
recommendedPick.stake_units ||
|
||
prediction.bet_advice.suggested_stake_units,
|
||
)}
|
||
helper={uiText(
|
||
"stake-info",
|
||
"Stake, bu bahis icin onerilen bahis birimidir. 2.0u demek, kendi bankroll planinizdaki 2 birimlik bahis anlamina gelir.",
|
||
)}
|
||
/>
|
||
</SimpleGrid>
|
||
</Box>
|
||
|
||
<Box p={4} bg={cardBg} borderWidth="1px" borderColor={borderColor} borderRadius="2xl">
|
||
<Text fontSize="sm" fontWeight="semibold" mb={3}>
|
||
{uiText("quick-read", "Hizli yorum")}
|
||
</Text>
|
||
<ReasonList
|
||
items={[
|
||
...prediction.reasoning_factors.slice(0, 2),
|
||
prediction.risk.surprise_type || "",
|
||
].filter(Boolean)}
|
||
resolveReason={resolveReason}
|
||
/>
|
||
</Box>
|
||
</Grid>
|
||
) : null}
|
||
|
||
<SimpleGrid columns={{ base: 1, md: 2, xl: 4 }} gap={3}>
|
||
<MetricTile
|
||
label="Veri Kalitesi"
|
||
value={formatPercent(prediction.data_quality.score * 100, 0)}
|
||
helper="Kadro, oran ve mac verisinin ne kadar guvenilir oldugu."
|
||
accent={`${qualityPalette}.500`}
|
||
/>
|
||
<MetricTile
|
||
label={t("risk-level")}
|
||
value={`${prediction.risk.level} (${prediction.risk.score}/100)`}
|
||
helper="Surpriz ihtimali ve belirsizlik seviyesi."
|
||
accent={`${riskPalette}.500`}
|
||
/>
|
||
<MetricTile
|
||
label={uiText("lineup-source", "Lineup Kaynagi")}
|
||
value={getLineupSourceLabel(prediction.data_quality.lineup_source)}
|
||
/>
|
||
<MetricTile label={uiText("model-label", "Model")} value={prediction.model_version} />
|
||
</SimpleGrid>
|
||
|
||
{prediction.risk.is_surprise_risk || prediction.risk.warnings?.length ? (
|
||
<Box
|
||
p={4}
|
||
bg={useColorModeValue("orange.50", "orange.950")}
|
||
borderWidth="1px"
|
||
borderColor={useColorModeValue("orange.200", "orange.800")}
|
||
borderRadius="2xl"
|
||
>
|
||
<HStack align="start" gap={3}>
|
||
<Icon as={LuTriangleAlert} boxSize={5} color="orange.500" mt={0.5} />
|
||
<VStack align="start" gap={1.5}>
|
||
<Text fontWeight="semibold">Risk Yorumu</Text>
|
||
<Text fontSize="sm" color="fg.muted">
|
||
{prediction.risk.surprise_comment ||
|
||
(prediction.risk.surprise_type
|
||
? `${resolveReason(prediction.risk.surprise_type)}`
|
||
: "Model bu maçta ekstra dikkat istiyor.")}
|
||
</Text>
|
||
{prediction.risk.surprise_score !== undefined ? (
|
||
<Text fontSize="sm" fontWeight="semibold" color="orange.600">
|
||
Sürpriz skoru: {formatPercent(prediction.risk.surprise_score, 0)}
|
||
</Text>
|
||
) : null}
|
||
<ReasonList
|
||
items={[
|
||
...(prediction.risk.surprise_reasons || []),
|
||
...prediction.risk.warnings,
|
||
]}
|
||
resolveReason={resolveReason}
|
||
/>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
) : null}
|
||
</Card.Body>
|
||
</Card.Root>
|
||
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle
|
||
icon={LuChartColumn}
|
||
title={t("engine-breakdown-title")}
|
||
info={uiText("engine-info", "Tahmini en cok hangi bilesenlerin etkiledigini gosterir.")}
|
||
/>
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} gap={4}>
|
||
{engineItems.map((item) => (
|
||
<Box key={item.key} p={4} bg={useColorModeValue("gray.50", "whiteAlpha.50")} borderWidth="1px" borderColor={borderColor} borderRadius="xl">
|
||
<HStack justify="space-between" mb={2}>
|
||
<HStack gap={2}>
|
||
<Icon as={item.icon} boxSize={4} color={item.color} />
|
||
<Text fontSize="sm" fontWeight="semibold">
|
||
{item.label}
|
||
</Text>
|
||
</HStack>
|
||
<Text fontSize="sm" fontWeight="bold">
|
||
+{item.value.toFixed(1)}
|
||
</Text>
|
||
</HStack>
|
||
<Bar value={Math.min(item.value, 100)} color={item.color} trackBg={useColorModeValue("gray.100", "gray.700")} />
|
||
</Box>
|
||
))}
|
||
</SimpleGrid>
|
||
</Card.Body>
|
||
</Card.Root>
|
||
|
||
{recommendedPick ? (
|
||
<PickCard
|
||
pick={recommendedPick}
|
||
title={uiText("best-single-pick", "En iyi tekli secim")}
|
||
resolveReason={resolveReason}
|
||
palette="green"
|
||
stakeFallback={prediction.bet_advice.suggested_stake_units}
|
||
marketLabels={marketLabels}
|
||
labels={{
|
||
confidence: uiText("confidence-label", "Guven"),
|
||
odds: uiText("odds-label", "Oran"),
|
||
recommendedStake: uiText("stake-label-short", "Stake"),
|
||
playScore: uiText("play-score-label", "Play Score"),
|
||
playability: uiText("playability-label", "Oynanabilirlik"),
|
||
}}
|
||
/>
|
||
) : null}
|
||
|
||
{prediction.supporting_picks?.length ? (
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle
|
||
icon={LuFlame}
|
||
title={uiText("alternative-markets", "Alternatif Marketler")}
|
||
info={uiText("alternative-markets-info", "Ana tahmin disindaki secenekler.")}
|
||
/>
|
||
<SimpleGrid columns={{ base: 1, xl: 2 }} gap={4}>
|
||
{prediction.supporting_picks.map((pick) => (
|
||
<PickCard
|
||
key={`${pick.market}-${pick.pick}`}
|
||
pick={pick}
|
||
title={pick.playable ? uiText("alternative", "Alternatif") : uiText("pass-market", "PASS market")}
|
||
resolveReason={resolveReason}
|
||
palette={pick.ev_edge > 0 ? "blue" : "orange"}
|
||
marketLabels={marketLabels}
|
||
labels={{
|
||
confidence: uiText("confidence-label", "Guven"),
|
||
odds: uiText("odds-label", "Oran"),
|
||
recommendedStake: uiText("stake-label-short", "Stake"),
|
||
playScore: uiText("play-score-label", "Play Score"),
|
||
playability: uiText("playability-label", "Oynanabilirlik"),
|
||
}}
|
||
/>
|
||
))}
|
||
</SimpleGrid>
|
||
</Card.Body>
|
||
</Card.Root>
|
||
) : null}
|
||
|
||
<SummaryTable
|
||
items={prediction.bet_summary || []}
|
||
marketLabels={marketLabels}
|
||
title={uiText("all-markets-title", "Tum Marketler")}
|
||
info={uiText("all-markets-info", "Butun secenekleri tek tabloda karsilastir.")}
|
||
/>
|
||
<ScoreCard prediction={prediction} sport={sport} />
|
||
<MarketBoardSection
|
||
marketBoard={prediction.market_board}
|
||
betSummary={prediction.bet_summary || []}
|
||
marketLabels={marketLabels}
|
||
title={t("market-board")}
|
||
info={uiText("market-board-info", "Modelin her markette gordugu olasilik dagilimi.")}
|
||
/>
|
||
|
||
{prediction.v27_engine ? (
|
||
<V28OddsBandPanel engine={prediction.v27_engine as V27EngineDto} />
|
||
) : null}
|
||
|
||
<Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
|
||
<Card.Body gap={4}>
|
||
<SectionTitle
|
||
icon={LuSparkles}
|
||
title={t("bet-advice")}
|
||
info={uiText("bet-advice-info", "Modelin nihai aksiyon onerisi.")}
|
||
/>
|
||
<HStack justify="space-between" align={{ base: "start", md: "center" }} flexDir={{ base: "column", md: "row" }} gap={3}>
|
||
<HStack gap={3}>
|
||
<Badge colorPalette={prediction.bet_advice.playable ? "green" : "red"} variant="solid" borderRadius="full" fontSize="sm" px={3} py={1}>
|
||
{prediction.bet_advice.playable ? "OYNA" : "OYNAMA"}
|
||
</Badge>
|
||
<Badge colorPalette={mainBandPalette} variant="subtle" borderRadius="full" fontSize="sm" px={3} py={1}>
|
||
{getConfidenceBandLabel(prediction.bet_advice.confidence_band)}
|
||
</Badge>
|
||
<Badge
|
||
colorPalette={getSignalTierPalette(prediction.bet_advice.signal_tier)}
|
||
variant="subtle"
|
||
borderRadius="full"
|
||
fontSize="sm"
|
||
px={3}
|
||
py={1}
|
||
>
|
||
{getSignalTierLabel(prediction.bet_advice.signal_tier)}
|
||
</Badge>
|
||
<Text color="fg.muted">{resolveReason(prediction.bet_advice.reason)}</Text>
|
||
</HStack>
|
||
<Badge variant="surface" fontSize="sm" px={3} py={1}>
|
||
{uiText("recommended-stake-inline", "Onerilen miktar")}: {formatUnits(prediction.bet_advice.suggested_stake_units)}
|
||
</Badge>
|
||
</HStack>
|
||
<Separator />
|
||
<SectionTitle icon={LuBrain} title={t("reasoning")} info="Modelin bu maci neden bu sekilde okudugunun ust seviye ozeti." />
|
||
<ReasonList items={prediction.reasoning_factors} resolveReason={resolveReason} />
|
||
</Card.Body>
|
||
</Card.Root>
|
||
</VStack>
|
||
);
|
||
}
|