import { fireEvent, render, screen, within } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { WorkspaceMetricRail } from './WorkspaceMetricRail';

describe('WorkspaceMetricRail', () => {
  it('renders one primary outcome and supporting facts as accessible Semi cards', () => {
    const view = render(<WorkspaceMetricRail
      ariaLabel="查询统计"
      className="test-rail"
      cardClassName="test-card"
      secondaryClassName="test-secondary"
      primaryValueClassName="test-primary-value"
      primary={{ label: '结果行数', value: '1,024', note: '来自 20 辆车辆' }}
      secondary={[
        { label: '车辆数', value: '20', note: '当前授权范围', className: 'is-vehicles' },
        { label: '数据来源', value: 'GB32960', note: '全部协议来源', className: 'is-sources' }
      ]}
    />);

    expect(view.container.querySelector('.test-rail.semi-card')).toHaveAttribute('aria-label', '查询统计');
    expect(view.container.querySelector('.test-card.is-primary .test-primary-value')).toHaveTextContent('1,024');
    expect(view.container.querySelector('.test-secondary.semi-card-group')).toBeInTheDocument();
    expect(view.container.querySelectorAll('.test-card.semi-card')).toHaveLength(3);
    expect(screen.getByLabelText('车辆数：20；当前授权范围')).toHaveClass('is-vehicles');
  });

  it('renders a list-first queue variant inside one Semi card', () => {
    const view = render(<WorkspaceMetricRail
      variant="queue"
      ariaLabel="处置队列概览"
      className="queue-metrics"
      items={[
        { label: '待复核', value: '1,347', note: '活跃问题', tone: 'primary' },
        { label: 'SLA 超时', value: '1,206', note: '超过 24 小时', tone: 'danger' },
        { label: '已确认', value: '0', emphasis: 'secondary' },
        { label: '已恢复', value: '704', emphasis: 'secondary', tone: 'success' }
      ]}
      context={<span>当前筛选 <strong>1,347</strong> 条</span>}
    />);

    const rail = view.container.querySelector('.v2-workspace-metric-rail');
    expect(rail).toHaveClass('semi-card', 'is-queue', 'queue-metrics');
    const list = screen.getByRole('list', { name: '处置队列概览' });
    expect(within(list).getAllByRole('listitem')).toHaveLength(4);
    expect(within(list).getByText('待复核').closest('[role="listitem"]')).toHaveClass('is-primary');
    expect(within(list).getByText('SLA 超时').closest('[role="listitem"]')).toHaveClass('is-danger');
    expect(within(list).getByText('已恢复').closest('[role="listitem"]')).toHaveClass('is-secondary', 'is-success');
    expect(view.container.querySelector('.v2-workspace-metric-context')).toHaveTextContent('当前筛选 1,347 条');
    expect(view.container.querySelectorAll('.semi-card')).toHaveLength(1);
  });

  it('keeps interactive queue metrics inside accessible Semi buttons', () => {
    const onOpen = vi.fn();
    render(<WorkspaceMetricRail
      variant="queue"
      ariaLabel="告警队列概览"
      className="alert-metrics"
      items={[
        {
          label: '未处理',
          value: '687',
          note: '需要核验',
          tone: 'danger',
          active: true,
          ariaLabel: '筛选未处理，共 687 条',
          onClick: onOpen
        },
        { label: '全部事件', value: '2,848', note: '当前范围' }
      ]}
    />);

    const list = screen.getByRole('list', { name: '告警队列概览' });
    const action = within(list).getByRole('button', { name: '筛选未处理，共 687 条' });
    expect(action).toHaveClass('semi-button', 'v2-workspace-metric-action');
    expect(action).toHaveAttribute('aria-pressed', 'true');
    expect(action.closest('[role="listitem"]')).toHaveClass('is-action', 'is-active', 'is-danger');
    fireEvent.click(action);
    expect(onOpen).toHaveBeenCalledTimes(1);
  });
});
