import {
    fireEvent,
    render,
    screen,
    waitFor,
} from '@testing-library/svelte';
import { createRawSnippet } from 'svelte';
import { comparisonStore } from '../../model';
import Sidebar from './Sidebar.svelte';

function textSnippet(text: string) {
    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
}

describe('Sidebar', () => {
    afterEach(() => {
        comparisonStore.side = 'A';
    });

    describe('Rendering', () => {
        it('renders the "Configuration" title', () => {
            render(Sidebar);
            expect(screen.getByText('Configuration')).toBeInTheDocument();
        });

        it('renders Left Font and Right Font toggle buttons', () => {
            render(Sidebar);
            expect(screen.getByText('Left Font')).toBeInTheDocument();
            expect(screen.getByText('Right Font')).toBeInTheDocument();
        });

        it('renders main snippet when provided', () => {
            render(Sidebar, { props: { main: textSnippet('main-content') } });
            expect(screen.getByText('main-content')).toBeInTheDocument();
        });

        it('renders controls snippet when provided', () => {
            render(Sidebar, { props: { controls: textSnippet('controls-content') } });
            expect(screen.getByText('controls-content')).toBeInTheDocument();
        });

        it('renders nothing in main area when no main snippet', () => {
            const { container } = render(Sidebar);
            expect(container.querySelector('[data-main]')).toBeNull();
        });
    });

    describe('A/B toggle', () => {
        it('Left Font button is active in side A mode', () => {
            comparisonStore.side = 'A';
            render(Sidebar);
            const leftBtn = screen.getByText('Left Font').closest('button');
            expect(leftBtn).toHaveClass('shadow-sm');
        });

        it('Right Font button is not active in side A mode', () => {
            comparisonStore.side = 'A';
            render(Sidebar);
            const rightBtn = screen.getByText('Right Font').closest('button');
            expect(rightBtn).not.toHaveClass('shadow-sm');
        });

        it('Right Font button is active in side B mode', () => {
            comparisonStore.side = 'B';
            render(Sidebar);
            const rightBtn = screen.getByText('Right Font').closest('button');
            expect(rightBtn).toHaveClass('shadow-sm');
        });

        it('clicking Right Font switches to side B', async () => {
            render(Sidebar);
            expect(comparisonStore.side).toBe('A');
            await fireEvent.click(screen.getByText('Right Font'));
            expect(comparisonStore.side).toBe('B');
        });

        it('clicking Left Font switches back to side A from B', async () => {
            comparisonStore.side = 'B';
            render(Sidebar);
            await fireEvent.click(screen.getByText('Left Font'));
            expect(comparisonStore.side).toBe('A');
        });

        it('UI updates reactively after side switch', async () => {
            render(Sidebar);
            await fireEvent.click(screen.getByText('Right Font'));
            const rightBtn = screen.getByText('Right Font').closest('button');
            await waitFor(() => expect(rightBtn).toHaveClass('shadow-sm'));
        });
    });
});