import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import Home from '@lucide/svelte/icons/house';
import Search from '@lucide/svelte/icons/search';
import BookOpen from '@lucide/svelte/icons/book-open';
import User from '@lucide/svelte/icons/user';
import BottomNav, { type BottomNavTab } from './BottomNav.svelte';

afterEach(() => cleanup());

const tabs: BottomNavTab[] = [
    { label: 'Home', href: '/', icon: Home, match: [] },
    { label: 'Browse', href: '/browse', icon: Search, match: [] },
    {
        label: 'Library',
        href: '/library',
        icon: BookOpen,
        match: ['/bookmarks', '/collections', '/profile/bookmarks', '/profile/collections', '/profile/history']
    },
    {
        label: 'Account',
        href: '/profile/account',
        icon: User,
        match: ['/profile', '/profile/preferences']
    }
];

describe('BottomNav', () => {
    it('renders all tabs as links with correct hrefs', () => {
        render(BottomNav, { props: { tabs, currentPath: '/' } });
        for (const tab of tabs) {
            const link = screen.getByRole('link', { name: new RegExp(tab.label) });
            expect((link as HTMLAnchorElement).getAttribute('href')).toBe(tab.href);
        }
    });

    it('marks Home as aria-current on the root path', () => {
        render(BottomNav, { props: { tabs, currentPath: '/' } });
        const home = screen.getByRole('link', { name: /Home/ });
        expect(home.getAttribute('aria-current')).toBe('page');
        const library = screen.getByRole('link', { name: /Library/ });
        expect(library.getAttribute('aria-current')).toBeNull();
    });

    it('marks Library as active when on /bookmarks', () => {
        render(BottomNav, { props: { tabs, currentPath: '/bookmarks' } });
        const library = screen.getByRole('link', { name: /Library/ });
        expect(library.getAttribute('aria-current')).toBe('page');
    });

    it('marks Library as active on nested /profile/collections', () => {
        render(BottomNav, { props: { tabs, currentPath: '/profile/collections' } });
        const library = screen.getByRole('link', { name: /Library/ });
        expect(library.getAttribute('aria-current')).toBe('page');
    });

    it('prefers the longer prefix when matches overlap (Account beats Library on /profile/account)', () => {
        render(BottomNav, { props: { tabs, currentPath: '/profile/account' } });
        const account = screen.getByRole('link', { name: /Account/ });
        const library = screen.getByRole('link', { name: /Library/ });
        expect(account.getAttribute('aria-current')).toBe('page');
        expect(library.getAttribute('aria-current')).toBeNull();
    });

    it('leaves all tabs inactive on an unknown route', () => {
        render(BottomNav, { props: { tabs, currentPath: '/unknown' } });
        for (const tab of tabs) {
            const link = screen.getByRole('link', { name: new RegExp(tab.label) });
            expect(link.getAttribute('aria-current')).toBeNull();
        }
    });
});
