import { useEffect, useState } from 'react';
import { getReviewHistory } from '../../../api';

export default function PurchaseTrendChart() {
    const [reviews, setReviews] = useState([]);
    useEffect(() => {
        getReviewHistory(4).then(rs => setReviews(rs.reverse())); // asc
    }, []);

    if (reviews.length === 0) return null;

    const maxAvg = Math.max(
        ...reviews.flatMap(r => [r.curator_avg_match || 0, r.user_avg_match || 0]),
        2.5
    );
    const w = 320, h = 80, pad = 16;
    const xs = (i) => pad + (i / Math.max(reviews.length - 1, 1)) * (w - 2 * pad);
    const ys = (v) => v == null ? null : h - pad - (v / maxAvg) * (h - 2 * pad);

    const line = (key) => reviews
        .map((r, i) => ({ x: xs(i), y: ys(r[key]) }))
        .filter(p => p.y != null)
        .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`)
        .join(' ');

    return (
        <section className="lotto-panel">
            <div className="lotto-panel__head">
                <div>
                    <p className="lotto-panel__eyebrow">Trend (last 4 weeks)</p>
                    <h3>너 vs 큐레이터 평균 일치 수</h3>
                </div>
            </div>
            <svg width={w} height={h} className="trend-chart">
                <path d={line('curator_avg_match')} stroke="#b8a8ff" strokeWidth="2" fill="none" />
                <path d={line('user_avg_match')}    stroke="#76e09a" strokeWidth="2" fill="none" />
            </svg>
            <div className="trend-legend">
                <span><span className="dot dot--curator" /> 큐레이터</span>
                <span><span className="dot dot--user" /> 너</span>
            </div>
        </section>
    );
}