import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import './PriceChart.css';

interface PriceChartProps {
    data: Array<{ timestamp: number; price: number }>;
    currentPrice: number;
}

export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
    if (!data || data.length === 0) {
        return (
            <div className="price-chart-empty">
                <span>Collecting price data...</span>
            </div>
        );
    }

    // Determine if price is trending up or down
    const firstPrice = data[0]?.price || currentPrice;
    const priceChange = ((currentPrice - firstPrice) / firstPrice) * 100;
    const lineColor = priceChange >= 0 ? '#00ff88' : '#ff3366';

    // Format data for chart
    const chartData = data.map(point => ({
        time: new Date(point.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        price: point.price
    }));

    return (
        <div className="price-chart">
            <div className="chart-header">
                <span className="chart-label">Price Trend</span>
                <span className={`chart-change ${priceChange >= 0 ? 'positive' : 'negative'}`}>
                    {priceChange >= 0 ? '+' : ''}{priceChange.toFixed(2)}%
                </span>
            </div>
            <ResponsiveContainer width="100%" height={120}>
                <LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
                    <XAxis
                        dataKey="time"
                        tick={{ fontSize: 10, fill: '#666' }}
                        tickLine={false}
                        axisLine={false}
                        hide
                    />
                    <YAxis
                        domain={['dataMin - 50', 'dataMax + 50']}
                        hide
                    />
                    <Tooltip
                        contentStyle={{
                            backgroundColor: 'rgba(30, 30, 46, 0.95)',
                            border: '1px solid rgba(255, 255, 255, 0.1)',
                            borderRadius: '8px',
                            fontSize: '12px'
                        }}
                        labelStyle={{ color: '#888' }}
                        itemStyle={{ color: lineColor }}
                    />
                    <Line
                        type="monotone"
                        dataKey="price"
                        stroke={lineColor}
                        strokeWidth={2}
                        dot={false}
                        activeDot={{ r: 4, fill: lineColor }}
                    />
                </LineChart>
            </ResponsiveContainer>
        </div>
    );
};