import { describe, it, expect, afterEach, beforeEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import TagsListPanel from './TagsListPanel.svelte';

beforeEach(() => {
	localStorage.clear();
});

afterEach(cleanup);

const baseTree = [
	{ id: 't1', name: 'Personen', parentId: null, color: 'sage', children: [] },
	{ id: 't2', name: 'Orte', parentId: null, color: 'sienna', children: [] }
];

describe('TagsListPanel', () => {
	it('renders the expanded panel with tree and label', async () => {
		render(TagsListPanel, { props: { tree: baseTree } });

		await expect.element(page.getByRole('tree', { name: /schlagwörter/i })).toBeVisible();
	});

	it('renders the empty placeholder when tree is empty', async () => {
		render(TagsListPanel, { props: { tree: [] } });

		await expect.element(page.getByText('Keine Schlagworte vorhanden.')).toBeVisible();
	});

	it('renders one tree node per top-level tag', async () => {
		render(TagsListPanel, { props: { tree: baseTree } });

		await expect.element(page.getByText('Personen')).toBeVisible();
		await expect.element(page.getByText('Orte')).toBeVisible();
	});

	it('renders the collapse button in expanded view', async () => {
		render(TagsListPanel, { props: { tree: baseTree } });

		await expect.element(page.getByRole('button', { name: /liste einklappen/i })).toBeVisible();
	});

	it('renders collapsed view when autocollapse is true', async () => {
		render(TagsListPanel, { props: { tree: baseTree, autocollapse: true } });

		await expect.element(page.getByRole('button', { name: /liste ausklappen/i })).toBeVisible();
	});

	it('honours the localStorage manual-collapse preference', async () => {
		localStorage.setItem('admin_tags_list_collapsed', 'true');
		render(TagsListPanel, { props: { tree: baseTree } });

		await expect.element(page.getByRole('button', { name: /liste ausklappen/i })).toBeVisible();
	});

	it('expands the panel when the collapsed handle is clicked', async () => {
		localStorage.setItem('admin_tags_list_collapsed', 'true');
		render(TagsListPanel, { props: { tree: baseTree } });

		await page.getByRole('button', { name: /liste ausklappen/i }).click();

		await expect.element(page.getByRole('tree')).toBeVisible();
	});

	it('reads the collapse map from localStorage on mount', async () => {
		localStorage.setItem('admin_tags_tree_state', JSON.stringify({ t1: true }));
		render(TagsListPanel, { props: { tree: baseTree } });

		// Just verify it doesn't crash on JSON parse
		await expect.element(page.getByRole('tree')).toBeVisible();
	});

	it('handles malformed localStorage tree state gracefully', async () => {
		localStorage.setItem('admin_tags_tree_state', 'not-valid-json{');
		render(TagsListPanel, { props: { tree: baseTree } });

		await expect.element(page.getByRole('tree')).toBeVisible();
	});
});
