import React from 'react';
import {
    RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
    Radar, ResponsiveContainer, Legend,
} from 'recharts';

const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];

export default function WinnerCard({ winner, previousBase, updateReason, drawNo }) {
    if (!winner) {
        return (
            <div className="evolver-card winner-card empty">
                <h2>🏆 Winner</h2>
                <p className="muted">아직 회고 결과가 없습니다.</p>
            </div>
        );
    }

    const dayName = DAY_NAMES[winner.day_of_week] || '?';
    const W = winner.weight || [];
    const prev = previousBase || [0.2, 0.2, 0.2, 0.2, 0.2];

    const data = METRIC_NAMES.map((name, i) => ({
        metric: name,
        winner: W[i] || 0,
        previous: prev[i] || 0,
    }));

    return (
        <div className="evolver-card winner-card">
            <header>
                <h2>🏆 Winner: {dayName}요일</h2>
                {updateReason && <span className="badge">{updateReason}</span>}
            </header>
            <div className="winner-meta">
                <span>최고 적중 <strong>{winner.max_correct}개</strong></span>
                <span>평균 점수 <strong>{(winner.avg_score || 0).toFixed(2)}</strong></span>
                <span>{winner.n_picks}/5 picks</span>
                {drawNo && <span>{drawNo}회차</span>}
            </div>
            <div className="winner-chart">
                <ResponsiveContainer width="100%" height={300}>
                    <RadarChart data={data}>
                        <PolarGrid />
                        <PolarAngleAxis dataKey="metric" />
                        <PolarRadiusAxis angle={90} domain={[0, 0.5]} />
                        <Radar name="이번주 winner" dataKey="winner" stroke="#34d399" fill="#34d399" fillOpacity={0.4} />
                        <Radar name="이전 base" dataKey="previous" stroke="#999" fill="#999" fillOpacity={0.1} />
                        <Legend />
                    </RadarChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}
