// @vitest-environment jsdom
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import { PriceChart } from './PriceChart';

describe('PriceChart DOM behavior', () => {
    it('renders empty message when no data', () => {
        render(<PriceChart data={[]} currentPrice={100} />);
        expect(screen.getByText('Collecting price data...')).toBeInTheDocument();
    });

    it('renders positive price change correctly', () => {
        const data = [
            { timestamp: Date.now() - 1000, price: 100 },
            { timestamp: Date.now(), price: 105 }
        ];
        render(<PriceChart data={data} currentPrice={105} />);

        expect(screen.getByText('+5.00%')).toBeInTheDocument();
        const changeSpan = screen.getByText('+5.00%');
        expect(changeSpan).toHaveClass('positive');
    });

    it('renders negative price change correctly', () => {
        const data = [
            { timestamp: Date.now() - 1000, price: 100 },
            { timestamp: Date.now(), price: 95 }
        ];
        render(<PriceChart data={data} currentPrice={95} />);

        expect(screen.getByText('-5.00%')).toBeInTheDocument();
        const changeSpan = screen.getByText('-5.00%');
        expect(changeSpan).toHaveClass('negative');
    });

    it('handles firstPrice fallback when data[0] is missing', () => {
        // This hits line 19: const firstPrice = data[0]?.price || currentPrice;
        // If data exists but data[0] is somehow undefined (shouldn't happen with .length check but good to test)
        // Actually the current data[0]?.price || currentPrice is only reached if data.length > 0.
        // If data is [undefined], priceChange would be 0.
        const data: any[] = [{}];
        render(<PriceChart data={data} currentPrice={100} />);
        expect(screen.getByText('+0.00%')).toBeInTheDocument();
    });
});
