import { describe, it, afterEach, expect, $, click, pressKey, sleep, closeAll } from './runner.js?v=4';

describe('Detail View', () => {
    afterEach(() => closeAll());

    it('has structural elements', () => {
        for (const id of ['detail', 'detail-title', 'detail-body', 'detail-meta', 'detail-tags']) {
            expect($(`#${id}`)).toExist();
        }
    });

    it('has control buttons', () => {
        for (const id of ['detail-edit', 'detail-delete', 'detail-done', 'detail-zen', 'detail-close']) {
            expect($(`#${id}`)).toExist();
        }
    });

    it('opens on card click (non-split)', async () => {
        if (!$('#board-preview')?.classList.contains('hidden')) {
            click('#board-split-toggle');
            await sleep(100);
        }
        const card = $('#board [data-id]');
        if (!card) return;
        click(card);
        await sleep(300);
        expect($('#detail')).toBeVisible();
    });

    it('shows card title', async () => {
        if (!$('#board-preview')?.classList.contains('hidden')) {
            click('#board-split-toggle');
            await sleep(100);
        }
        const card = $('#board [data-id]');
        if (!card) return;
        click(card);
        await sleep(300);
        expect($('#detail-title').textContent.length).toBeGreaterThan(0);
    });

    it('closes on ESC', async () => {
        if (!$('#board-preview')?.classList.contains('hidden')) {
            click('#board-split-toggle');
            await sleep(100);
        }
        const card = $('#board [data-id]');
        if (!card) return;
        click(card);
        await sleep(300);
        if (!$('#detail')?.classList.contains('open')) return;
        pressKey('Escape');
        for (let i = 0; i < 20; i++) {
            if (!$('#detail')?.classList.contains('open')) break;
            await sleep(50);
        }
        expect($('#detail')).toBeHidden();
    });

    it('closes on close button', async () => {
        if (!$('#board-preview')?.classList.contains('hidden')) {
            click('#board-split-toggle');
            await sleep(100);
        }
        const card = $('#board [data-id]');
        if (!card) return;
        click(card);
        await sleep(300);
        click('#detail-close');
        await sleep(150);
        expect($('#detail')).toBeHidden();
    });
});