import React from 'react';

const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];

function diffMarker(diff) {
    if (Math.abs(diff) < 0.005) return { mark: '=', cls: 'eq' };
    if (diff > 0) return diff < 0.05 ? { mark: '↑', cls: 'up' } : { mark: '↑↑', cls: 'up-big' };
    return diff > -0.05 ? { mark: '↓', cls: 'down' } : { mark: '↓↓', cls: 'down-big' };
}

export default function BaseDiff({ previousBase, newBase, updateReason }) {
    if (!previousBase || !newBase) {
        return (
            <div className="evolver-card base-diff empty">
                <h2>다음주 base 변경</h2>
                <p className="muted">아직 base 변경 이력 없음.</p>
            </div>
        );
    }
    return (
        <div className="evolver-card base-diff">
            <h2>다음주 base 변경 {updateReason && <span className="badge">{updateReason}</span>}</h2>
            <div className="diff-grid">
                {METRIC_NAMES.map((name, i) => {
                    const prev = previousBase[i] || 0;
                    const next = newBase[i] || 0;
                    const diff = next - prev;
                    const { mark, cls } = diffMarker(diff);
                    return (
                        <div key={name} className={`metric-card ${cls}`}>
                            <div className="metric-name">{name}</div>
                            <div className="metric-values">
                                {prev.toFixed(2)} → <strong>{next.toFixed(2)}</strong>
                            </div>
                            <div className="metric-diff">
                                {mark} {diff >= 0 ? '+' : ''}{(diff * 100).toFixed(0)}%p
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}