/**
 * audit3-followup (2026-05-29) — component-test scaffold proof point #1.
 *
 * KpiCard is the smallest leaf component in the dashboard. Testing it
 * validates the harness: tsx transform, jsdom environment, jest-dom
 * matchers, user-event interactions. Once this passes, larger
 * components (KpiGrid, SystemStatus, NOC) can extend the pattern.
 */
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { KpiCard } from '../KpiCard';

describe('<KpiCard>', () => {
    it('renders title and value', () => {
        render(
            <KpiCard
                title="Total Monitors"
                value="42"
                icon={<svg data-testid="icon" />}
            />,
        );
        expect(screen.getByText('Total Monitors')).toBeInTheDocument();
        expect(screen.getByText('42')).toBeInTheDocument();
        expect(screen.getByTestId('icon')).toBeInTheDocument();
    });

    it('renders subtext when supplied', () => {
        render(
            <KpiCard
                title="Online"
                value="100"
                icon={<span />}
                subtext="99.9% Uptime"
            />,
        );
        expect(screen.getByText('99.9% Uptime')).toBeInTheDocument();
    });

    it('omits subtext block when not supplied', () => {
        render(
            <KpiCard
                title="X"
                value="0"
                icon={<span />}
            />,
        );
        // No `99.9% Uptime` text in this render; subtext block conditional.
        expect(screen.queryByText(/Uptime/)).not.toBeInTheDocument();
    });

    it('fires onClick when clicked', async () => {
        const user = userEvent.setup();
        const handleClick = jest.fn();
        render(
            <KpiCard
                title="Online"
                value="100"
                icon={<span />}
                onClick={handleClick}
            />,
        );
        await user.click(screen.getByText('Online'));
        expect(handleClick).toHaveBeenCalledTimes(1);
    });

    it('shows the alert decoration when alert=true', () => {
        const { container } = render(
            <KpiCard
                title="Offline"
                value="3"
                icon={<span />}
                alert
            />,
        );
        // Alert path adds a rose-tinted decorative div with a specific class
        // hint. We assert on the container's class rather than a brittle
        // exact match — the test is about behaviour, not styling.
        expect(container.firstChild).toHaveClass(/border-rose/);
    });
});