import React from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts';

const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
const COLORS = ['#34d399', '#60a5fa', '#fbbf24', '#f43f5e', '#c084fc'];

export default function BaseHistory({ history }) {
    if (!history || history.length === 0) {
        return (
            <div className="evolver-card base-history empty">
                <h2>12주 Base 변화</h2>
                <p className="muted">학습 이력이 부족합니다.</p>
            </div>
        );
    }

    const data = history
        .slice()
        .reverse()
        .map(h => {
            const w = h.weight || [0, 0, 0, 0, 0];
            return {
                date: (h.effective_from || '').slice(5),
                freq: w[0], finger: w[1], gap: w[2], cooccur: w[3], divers: w[4],
                reason: h.update_reason,
            };
        });

    return (
        <div className="evolver-card base-history">
            <h2>Base 변화 (최근 {history.length}주)</h2>
            <ResponsiveContainer width="100%" height={280}>
                <LineChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis domain={[0, 0.5]} />
                    <Tooltip />
                    <Legend />
                    {METRIC_NAMES.map((name, i) => (
                        <Line key={name} type="monotone" dataKey={name} stroke={COLORS[i]} dot />
                    ))}
                </LineChart>
            </ResponsiveContainer>
        </div>
    );
}