import { render } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { StylePanel } from './StylePanel';
import type { InspectorElement } from '@/types/inspector';

vi.mock('@/contexts/LanguageContext', () => ({
    useTranslation: () => ({ t: (s: string) => s }),
}));

const stubElement: InspectorElement = {
    tagName: 'h1',
    classNames: ['text-5xl'],
    id: '',
    text: 'Hero',
    selector: 'h1',
    rect: { top: 0, left: 0, width: 0, height: 0 } as DOMRect,
    attributes: {},
    computedStyles: {},
};

function renderPanel() {
    return render(
        <StylePanel
            element={stubElement}
            classes={['text-5xl', 'font-bold']}
            onUpdateClasses={vi.fn()}
            onApply={vi.fn()}
            onReset={vi.fn()}
            onClose={vi.fn()}
        />,
    );
}

describe('StylePanel layout', () => {
    it('non-scrollable chrome rows do not shrink (flex-shrink-0)', () => {
        const { container } = renderPanel();
        const panel = container.querySelector('div.fixed');
        expect(panel).toBeTruthy();

        // Gather direct children: header, tab bar, breakpoint bar wrapper,
        // scroll area, separator wrapper, footer.
        const children = panel ? Array.from(panel.children) : [];
        const nonScroll = children.filter(el => !el.className.includes('flex-1'));
        for (const el of nonScroll) {
            expect(el.className).toMatch(/flex-shrink-0/);
        }
    });

    it('ScrollArea wrapper grows and allows min-height:0 so siblings stay visible', () => {
        const { container } = renderPanel();
        const panel = container.querySelector('div.fixed');
        expect(panel).toBeTruthy();

        const directChildren = panel ? Array.from(panel.children) : [];
        const scrollAreaWrapper = directChildren.find(
            el => el.className.includes('flex-1') && !el.className.includes('flex-shrink-0'),
        );
        expect(scrollAreaWrapper).toBeTruthy();
        expect(scrollAreaWrapper?.className).toMatch(/min-h-0/);
    });

    it('Reset and Apply buttons render inside the panel', () => {
        const { container, getByRole } = renderPanel();
        const panel = container.querySelector('div.fixed');
        const apply = getByRole('button', { name: /apply/i });
        const reset = getByRole('button', { name: /reset/i });
        expect(panel?.contains(apply)).toBe(true);
        expect(panel?.contains(reset)).toBe(true);
    });
});