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

describe('Settings: Open/Close', () => {
    afterEach(() => closeAll());

    it('opens on button click', async () => {
        click('#settings-btn');
        await sleep(150);
        expect($('#settings-overlay')).toBeVisible();
    });

    it('has all core settings tabs', async () => {
        click('#settings-btn');
        await sleep(100);
        const names = $$('.settings-tab').map(t => t.dataset.tab);
        // Plugins may add their own tabs, so we don't hardcode a count;
        // we just verify every core tab is present.
        for (const tab of ['branding', 'account', 'theme', 'caldav', 'relay', 'behavior', 'notifications', 'plugins']) {
            expect(names).toContain(tab);
        }
    });

    it('tab switching shows correct panels', async () => {
        click('#settings-btn');
        await sleep(100);
        for (const tab of ['theme', 'account', 'caldav', 'relay', 'behavior', 'notifications']) {
            click($$('.settings-tab').find(t => t.dataset.tab === tab));
            await sleep(50);
            expect($(`#settings-panel-${tab}`).classList.contains('hidden')).toBe(false);
        }
    });

    it('closes on X button', async () => {
        click('#settings-btn');
        await sleep(100);
        click('#settings-close');
        await sleep(150);
        expect($('#settings-overlay')).toBeHidden();
    });

    it('closes on overlay click', async () => {
        click('#settings-btn');
        await sleep(100);
        $('#settings-overlay').dispatchEvent(new MouseEvent('click', { bubbles: true }));
        await sleep(150);
        expect($('#settings-overlay')).toBeHidden();
    });
});

describe('Settings: Account', () => {
    afterEach(() => closeAll());

    it('password fields exist and are masked', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'account'));
        await sleep(50);
        for (const id of ['settings-pw-current', 'settings-pw-new', 'settings-pw-confirm', 'settings-pw-save']) {
            expect($(`#${id}`)).toExist();
        }
        expect($('#settings-pw-current').type).toBe('password');
    });

    it('vault key field exists', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'account'));
        await sleep(50);
        expect($('#settings-vault-key')).toExist();
        expect($('#settings-vault-save')).toExist();
    });
});

describe('Settings: Behavior', () => {
    afterEach(() => closeAll());

    it('has all selects', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'behavior'));
        await sleep(100);
        for (const id of ['setting-current-days', 'setting-card-height', 'setting-card-width', 'setting-body-lines', 'setting-click-action']) {
            expect($(`#${id}`)).toExist();
        }
    });

    it('has all toggles', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'behavior'));
        await sleep(100);
        for (const id of ['setting-show-tags', 'setting-show-thumbnails', 'setting-show-done-badge', 'setting-confirm-delete', 'setting-auto-save']) {
            expect($(`#${id}`)).toExist();
        }
    });
});

describe('Settings: CalDAV', () => {
    afterEach(() => closeAll());

    it('has connection fields', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'caldav'));
        await sleep(50);
        for (const id of ['caldav-url', 'caldav-user', 'caldav-pass', 'caldav-test', 'caldav-save', 'caldav-sync-now']) {
            expect($(`#${id}`)).toExist();
        }
    });
});

describe('Settings: Relay', () => {
    afterEach(() => closeAll());

    it('has relay fields', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'relay'));
        await sleep(50);
        for (const id of ['relay-url', 'relay-key', 'relay-save', 'relay-test']) {
            expect($(`#${id}`)).toExist();
        }
    });
});

describe('Settings: Notifications', () => {
    afterEach(() => closeAll());

    it('has notification controls', async () => {
        click('#settings-btn');
        await sleep(100);
        click($$('.settings-tab').find(t => t.dataset.tab === 'notifications'));
        await sleep(100);
        expect($('#notif-lookahead')).toExist();
        expect($('#notif-time')).toExist();
    });
});