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

export default function WinnerAnalysisCard({ analysis }) {
    if (!analysis) return null;

    const data = [
        { k: '빈도',     v: analysis.score_frequency   ?? 0 },
        { k: '지문',     v: analysis.score_fingerprint ?? 0 },
        { k: '갭',       v: analysis.score_gap         ?? 0 },
        { k: '공동출현', v: analysis.score_cooccur     ?? 0 },
        { k: '다양성',   v: analysis.score_diversity   ?? 0 },
    ];

    const pct = analysis.percentile != null
        ? `${(analysis.percentile * 100).toFixed(0)}%`
        : '—';

    return (
        <div className="evolver-card backtest-winner-analysis">
            <h2>
                이번 당첨조합 분석치
                <span className="badge">무작위 상위 {pct}</span>
            </h2>
            <div className="backtest-winner-chart">
                <ResponsiveContainer width="100%" height={240}>
                    <RadarChart data={data}>
                        <PolarGrid stroke="rgba(255,255,255,0.12)" />
                        <PolarAngleAxis dataKey="k" tick={{ fill: '#cbd5e1', fontSize: 12 }} />
                        <PolarRadiusAxis angle={90} domain={[0, 1]} tick={{ fill: '#64748b', fontSize: 10 }} />
                        <Radar
                            name="분석치"
                            dataKey="v"
                            stroke="#60a5fa"
                            fill="#60a5fa"
                            fillOpacity={0.4}
                        />
                    </RadarChart>
                </ResponsiveContainer>
            </div>
            <p className="backtest-note">
                종합 점수: <strong>{(analysis.score_total ?? 0).toFixed(3)}</strong>
            </p>
        </div>
    );
}