import { fireEvent, render, screen, within } from '@testing-library/react';
import { beforeEach, describe, expect, it } from 'vitest';
import { resetStore } from '../test/storeTestUtils';
import { useStore } from '../store/useStore';
import { OntologyInspector } from './OntologyInspector';

describe('OntologyInspector', () => {
  beforeEach(() => {
    resetStore();
    useStore.setState({
      templates: [
        {
          id: 't1',
          name: '腹腔镜模板',
          classes: [
            { id: 'c1', name: '胆囊', color: '#ff0000', zIndex: 20, category: '器官' },
            { id: 'c2', name: '肝脏', color: '#00ff00', zIndex: 10, category: '器官' },
          ],
          rules: [],
        },
      ],
    });
  });

  it('shows template classes and changes the active template', () => {
    render(<OntologyInspector />);

    fireEvent.change(screen.getByRole('combobox'), { target: { value: 't1' } });

    expect(useStore.getState().activeTemplateId).toBe('t1');
    expect(screen.getByText('胆囊')).toBeInTheDocument();
    expect(screen.getByText('肝脏')).toBeInTheDocument();
  });

  it('selects a concrete class for subsequent masks', () => {
    render(<OntologyInspector />);

    fireEvent.click(screen.getByText('胆囊'));

    expect(useStore.getState().activeClassId).toBe('c1');
    expect(useStore.getState().activeClass).toEqual(expect.objectContaining({
      id: 'c1',
      name: '胆囊',
      zIndex: 20,
    }));
  });

  it('applies the selected class to currently selected masks', () => {
    useStore.setState({
      selectedMaskIds: ['m1'],
      masks: [
        {
          id: 'm1',
          annotationId: '99',
          frameId: 'frame-1',
          pathData: 'M 0 0 Z',
          label: '旧标签',
          color: '#06b6d4',
          saveStatus: 'saved',
          saved: true,
        },
      ],
    });

    render(<OntologyInspector />);
    fireEvent.click(screen.getByText('肝脏'));

    expect(useStore.getState().activeClassId).toBe('c2');
    expect(useStore.getState().masks[0]).toEqual(expect.objectContaining({
      templateId: 't1',
      classId: 'c2',
      className: '肝脏',
      classZIndex: 10,
      label: '肝脏',
      color: '#00ff00',
      saveStatus: 'dirty',
      saved: false,
    }));
    expect(screen.getByText('当前选中区域:')).toBeInTheDocument();
    expect(screen.getByText('1')).toBeInTheDocument();
  });

  it('adds custom classes locally without backend persistence', () => {
    const { container } = render(<OntologyInspector />);
    const customSection = screen.getByText('自定义分类').parentElement!;
    fireEvent.click(within(customSection).getByRole('button'));
    fireEvent.change(screen.getByPlaceholderText('分类名称'), { target: { value: '新局部分类' } });
    fireEvent.keyDown(screen.getByPlaceholderText('分类名称'), { key: 'Enter' });

    expect(screen.getAllByText('新局部分类')).toHaveLength(2);
    expect(useStore.getState().activeClass).toEqual(expect.objectContaining({ name: '新局部分类' }));
    expect(useStore.getState().templates[0].classes).toHaveLength(2);
    expect(container).toHaveTextContent('2 个分类来自模板 + 1 个自定义');
  });
});