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

interface PriceHistoryChartProps {
    license: License;
}

const formatCurrency = (value: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(value);

const PriceHistoryChart: React.FC<PriceHistoryChartProps> = ({ license }) => {
    const data = [
        { date: new Date(license.purchaseDate), price: license.purchasePrice },
        ...(license.renewals || []).map(r => ({ date: new Date(r.renewalDate), price: r.renewalPrice }))
    ]
    .map(i => ({ ...i, time: i.date.getTime(), str: i.date.toLocaleDateString() }))
    .filter(i => !isNaN(i.time))
    .sort((a, b) => a.time - b.time);

    if (data.length < 2) {
        return <div className="flex items-center justify-center h-32 text-xs text-gray-500 bg-slate-900/30 rounded">No price history</div>;
    }

    return (
        <ResponsiveContainer width="100%" height={160}>
            <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                <XAxis dataKey="time" type="number" domain={['dataMin', 'dataMax']} tickFormatter={(t) => new Date(t).toLocaleDateString(undefined, {month:'short', year:'2-digit'})} stroke="#9ca3af" tick={{fontSize: 10}} />
                <YAxis stroke="#9ca3af" tick={{fontSize: 10}} tickFormatter={(v) => `$${v}`} width={40} />
                <Tooltip 
                    contentStyle={{ backgroundColor: '#1e293b', borderColor: '#475569', color: '#f1f5f9' }}
                    labelFormatter={(l) => new Date(l).toLocaleDateString()}
                    formatter={(val: number) => [formatCurrency(val), 'Price']}
                />
                <Line type="monotone" dataKey="price" stroke="#22d3ee" strokeWidth={2} dot={{r:3}} activeDot={{r:5}} />
            </LineChart>
        </ResponsiveContainer>
    );
};

export default PriceHistoryChart;