import { jsx as _jsx } from "react/jsx-runtime";
// @vitest-environment happy-dom
import { describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen, within } from '@testing-library/react';
import { MediaSeoAudit } from '../../views/MediaSeoAudit.js';
// Scores mirror what cms-core's `calculateMediaSeoScore()` would return for
// each row — the component never re-scores, it renders `seoScore` as-is.
const ITEMS = [
    {
        id: 'complete',
        name: 'seattle-team.webp',
        type: 'image/webp',
        size: '120 KB',
        url: 'https://cdn.example.com/seattle-team.webp',
        format: 'webp',
        altTag: 'Team collaborating in the Seattle office',
        title: 'Seattle Team',
        description: 'The team collaborating in the Seattle office.',
        seoScore: 100,
    },
    {
        id: 'no-alt',
        name: 'hero-banner.jpg',
        type: 'image/jpeg',
        size: '342 KB',
        url: 'https://cdn.example.com/hero-banner.jpg',
        format: 'jpeg',
        altTag: '',
        title: 'Hero Banner',
        description: 'Homepage hero banner.',
        seoScore: 70,
    },
    {
        id: 'bare',
        name: 'IMG_4892.jpg',
        type: 'image/jpeg',
        size: '1.8 MB',
        url: 'https://cdn.example.com/IMG_4892.jpg',
        format: 'jpeg',
        altTag: '',
        title: '',
        description: '',
        seoScore: 0,
    },
];
describe('MediaSeoAudit', () => {
    it('renders the four summary stat cards from item metadata', () => {
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: vi.fn() }));
        // Avg = round((100 + 70 + 0) / 3) = 57 → "Fair"
        expect(screen.getByText('57/100')).toBeTruthy();
        expect(screen.getByText('Avg SEO Score')).toBeTruthy();
        expect(screen.getByText('Fair')).toBeTruthy();
        expect(screen.getByText('Missing Alt Text')).toBeTruthy();
        expect(screen.getByText('1 have alt text')).toBeTruthy();
        expect(screen.getByText('Missing Titles')).toBeTruthy();
        expect(screen.getByText('2 have titles')).toBeTruthy();
        expect(screen.getByText('Missing Descriptions')).toBeTruthy();
        expect(screen.getByText('2 have descriptions')).toBeTruthy();
    });
    it('shows all items by default with a right-aligned count', () => {
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: vi.fn() }));
        const table = screen.getByRole('table', { name: 'Media SEO audit' });
        expect(within(table).getAllByRole('row')).toHaveLength(4); // header + 3 items
        expect(screen.getByText('3 items')).toBeTruthy();
    });
    it('filters to items missing alt text', () => {
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: vi.fn() }));
        fireEvent.click(screen.getByRole('button', { name: 'Missing Alt' }));
        const table = screen.getByRole('table', { name: 'Media SEO audit' });
        expect(within(table).getAllByRole('row')).toHaveLength(3); // header + 2 items
        expect(within(table).queryByText('seattle-team.webp')).toBeNull();
        expect(screen.getByText('2 items')).toBeTruthy();
    });
    it('filters to poor scores (score < 40)', () => {
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: vi.fn() }));
        fireEvent.click(screen.getByRole('button', { name: 'Poor score' }));
        const table = screen.getByRole('table', { name: 'Media SEO audit' });
        expect(within(table).getAllByRole('row')).toHaveLength(2); // header + 1 item
        expect(within(table).getByText('IMG_4892.jpg')).toBeTruthy();
        expect(screen.getByText('1 item')).toBeTruthy();
    });
    it('fires onEdit with the row item from the Edit button', () => {
        const onEdit = vi.fn();
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: onEdit }));
        const buttons = screen.getAllByRole('button', { name: 'Edit' });
        expect(buttons).toHaveLength(3);
        fireEvent.click(buttons[1]);
        expect(onEdit).toHaveBeenCalledTimes(1);
        expect(onEdit.mock.calls[0][0].id).toBe('no-alt');
    });
    it('shows an empty state when there is nothing to audit', () => {
        render(_jsx(MediaSeoAudit, { items: [], onEdit: vi.fn() }));
        expect(screen.getByText('No media to audit')).toBeTruthy();
        expect(screen.queryByRole('table')).toBeNull();
    });
    it('shows a filter-specific empty state when a filter matches nothing', () => {
        render(_jsx(MediaSeoAudit, { items: [ITEMS[0]], onEdit: vi.fn() }));
        fireEvent.click(screen.getByRole('button', { name: 'Missing Alt' }));
        expect(screen.getByText('No items match this filter')).toBeTruthy();
    });
    it('renders a retryable error state instead of an empty audit when the fetch failed', () => {
        const onRetry = vi.fn();
        render(_jsx(MediaSeoAudit, { items: [], onEdit: vi.fn(), error: "Network error", onRetry: onRetry }));
        expect(screen.getByRole('alert')).toBeTruthy();
        expect(screen.getByText("Couldn't load media")).toBeTruthy();
        expect(screen.getByText('Network error')).toBeTruthy();
        expect(screen.queryByText('No media to audit')).toBeNull();
        fireEvent.click(screen.getByRole('button', { name: 'Retry' }));
        expect(onRetry).toHaveBeenCalledTimes(1);
    });
    it('still renders loaded items when an error arrives after data (stale-but-usable)', () => {
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: vi.fn(), error: "Refresh failed" }));
        expect(screen.getByRole('table', { name: 'Media SEO audit' })).toBeTruthy();
        expect(screen.queryByRole('alert')).toBeNull();
    });
    it('activates a row with the keyboard (Enter and Space)', () => {
        const onEdit = vi.fn();
        render(_jsx(MediaSeoAudit, { items: ITEMS, onEdit: onEdit }));
        const row = screen.getByRole('row', { name: 'Edit SEO metadata for hero-banner.jpg' });
        expect(row.getAttribute('tabindex')).toBe('0');
        fireEvent.keyDown(row, { key: 'Enter' });
        expect(onEdit).toHaveBeenCalledTimes(1);
        expect(onEdit.mock.calls[0][0].id).toBe('no-alt');
        fireEvent.keyDown(row, { key: ' ' });
        expect(onEdit).toHaveBeenCalledTimes(2);
    });
});
//# sourceMappingURL=media-seo-audit.render.test.js.map