import { flushPromises, mount } from '@vue/test-utils';

import { beforeEach, describe, expect, it, vi } from 'vitest';

import StabilityAnalysisPage from '../../index.vue';
import pageSource from '../../index.vue?raw';

const apiMocks = vi.hoisted(() => ({
  getData: vi.fn(),
  getOptions: vi.fn(),
}));
const exportMocks = vi.hoisted(() => ({ download: vi.fn() }));

vi.mock('#/api/x/lims/wendingxing', () => ({
  getStabilityAnalysisData: apiMocks.getData,
  getStabilityAnalysisOptions: apiMocks.getOptions,
}));

vi.mock('../../helpers/stabilityExport', () => ({
  downloadStabilityExport: exportMocks.download,
}));

vi.mock('@jnpf/hooks', () => ({
  useMessage: () => ({ createMessage: { error: vi.fn(), warning: vi.fn() } }),
}));

vi.mock('@vben/plugins/echarts', () => ({
  EchartsUI: { name: 'EchartsUI', template: '<div />' },
  useEcharts: () => ({ renderEcharts: vi.fn() }),
}));

const PopupStub = {
  name: 'AnalysisOptionPopup',
  props: ['columns', 'disabled', 'mode', 'options', 'popupTitle', 'value'],
  template: '<div class="popup-stub" />',
};

function mountPage() {
  return mount(StabilityAnalysisPage, {
    global: {
      stubs: {
        'a-alert': { template: '<div class="alert-stub"><slot /></div>' },
        'a-button': { props: ['disabled'], template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>' },
        ASpin: { template: '<div><slot /></div>' },
        'a-empty': { props: ['description'], template: '<div class="empty-stub">{{ description }}</div>' },
        'a-table': {
          name: 'ATable',
          props: ['bordered', 'columns', 'dataSource', 'pagination', 'scroll', 'tableLayout'],
          template: '<div class="analysis-table" />',
        },
        AnalysisOptionPopup: PopupStub,
      },
    },
  });
}

async function selectFilters(wrapper: ReturnType<typeof mountPage>) {
  await flushPromises();
  const popup = (title: string) => wrapper.findAllComponents(PopupStub).find((item) => item.props('popupTitle') === title)!;

  popup('选择分类').vm.$emit('update:value', 'CJ');
  popup('选择分类').vm.$emit('change', 'CJ');
  await flushPromises();
  popup('选择品名').vm.$emit('update:value', 'product-1');
  popup('选择品名').vm.$emit('change', 'product-1');
  await flushPromises();
  popup('选择检验项目').vm.$emit('update:value', ['item-ph']);
  popup('选择检验项目').vm.$emit('change', ['item-ph']);
  await flushPromises();
  popup('选择稳定性考察编号').vm.$emit('update:value', ['plan-1']);
  popup('选择稳定性考察编号').vm.$emit('change', ['plan-1']);
  await flushPromises();
  popup('选择批号').vm.$emit('update:value', ['plan-1::250102']);
  popup('选择批号').vm.$emit('change', ['plan-1::250102']);
  await wrapper.vm.$nextTick();
}

describe('stability analysis page', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    apiMocks.getOptions.mockResolvedValue({
      data: {
        fenlei_list: [{ code: 'CJ', id: 'category-1', key: 'CJ', name: '成品' }],
        jihua_list: [{ code: 'STP-1', id: 'plan-1', key: 'plan-1', name: 'STP-1' }],
        pihao_list: [
          {
            fangan_mingcheng: '长期稳定性方案',
            jihua_bianhao: 'STP-1',
            jihua_id: 'plan-1',
            key: 'plan-1::250102',
            name: '250102',
            pihao: '250102',
          },
        ],
        xiangmu_list: [{ code: 'XM1899', id: 'item-ph', key: 'item-ph', name: 'pH值', shuju_leixing: '数值' }],
        yangpin_list: [{ code: 'YP001', id: 'product-1', key: 'product-1', name: '脉络宁口服液' }],
      },
    });
    apiMocks.getData.mockResolvedValue({
      data: {
        completeness: { audited_count: 1, expected_count: 3, missing_count: 1, pending_count: 1 },
        expected_periods: [{ xiangmu_id: 'item-ph', zhouqi: '0', zhouqi_danwei: '/', zhouqi_order: 0 }],
        rows: [
          {
            batch_key: 'plan-1::250102',
            biaozhun_id: 'standard-1',
            exception_type: '',
            jieguo_luru_riqi: '2026-07-23',
            jihua_bianhao: 'STP-1',
            jihua_id: 'plan-1',
            numeric_result: 6.7,
            pihao: '250102',
            raw_result: '6.7',
            shangxian: '7',
            shangxian_value: 7,
            shuju_leixing: '数值',
            unit: '/',
            xiaxian: '5',
            xiaxian_value: 5,
            xiangmu_bianma: 'XM1899',
            xiangmu_id: 'item-ph',
            xiangmu_mingcheng: 'pH值',
            yangpin_mingcheng: '脉络宁口服液',
            zhouqi: '0',
            zhouqi_danwei: '/',
            zhouqi_order: 0,
          },
        ],
      },
    });
  });

  it('uses a compact report layout with a dedicated result scroller', async () => {
    const wrapper = mountPage();
    await flushPromises();

    expect(wrapper.find('.page-heading').exists()).toBe(false);
    expect(wrapper.find('[data-scroll-container="true"]').exists()).toBe(true);
    expect(wrapper.find('.filter-toolbar').exists()).toBe(true);
    expect(wrapper.find('.table-section').exists()).toBe(true);
    expect(wrapper.find('.table-section h2').text()).toBe('稳定性数据分析表');
    expect(wrapper.find('.analysis-table').exists()).toBe(true);
    expect(wrapper.findComponent({ name: 'ATable' }).props('dataSource')).toEqual([]);
    expect(wrapper.find('.completeness-band').exists()).toBe(false);
    expect(wrapper.find('.empty-stub').exists()).toBe(false);
  });

  it('keeps five equal filters and fixed-width actions on one row', () => {
    expect(pageSource).toContain('grid-template-columns: repeat(5, minmax(0, 1fr)) 188px;');
    expect(pageSource).toContain('width: 96px;');
    expect(pageSource).toContain('width: 84px;');
    expect(pageSource).not.toContain('.filter-toolbar {\n  display: flex;');
  });

  it('shows only project identity and data type columns in the project popup', async () => {
    const wrapper = mountPage();
    await flushPromises();
    const itemPopup = wrapper.findAllComponents(PopupStub).find((item) => item.props('popupTitle') === '选择检验项目')!;
    const columnKeys = (itemPopup.props('columns') as Array<{ dataIndex: string }>).map((column) => column.dataIndex);

    expect(columnKeys).toEqual(['sequence', 'code', 'name', 'shuju_leixing']);
    expect(columnKeys).not.toContain('unit');
  });

  it('renders the full result table without pagination or horizontal scrolling', async () => {
    const wrapper = mountPage();
    await selectFilters(wrapper);
    await wrapper.find('[data-action="search"]').trigger('click');
    await flushPromises();

    const table = wrapper.findComponent({ name: 'ATable' });
    expect(table.props('bordered')).not.toBeUndefined();
    expect(table.props('pagination')).toBe(false);
    expect(table.props('scroll')).toBeUndefined();
    expect(table.props('tableLayout')).toBe('fixed');
    expect(wrapper.find('.export-implementation-note').exists()).toBe(false);
  });

  it('closes the bottom border of the empty table placeholder', () => {
    expect(pageSource).toContain(':deep(.ant-table-tbody > .ant-table-placeholder > td)');
    expect(pageSource).toContain('border-bottom: 1px solid #b9c2ce !important;');
  });

  it('renders the raw result without compliance annotations', async () => {
    const defaultResponse = await apiMocks.getData();
    apiMocks.getData.mockResolvedValueOnce({
      data: {
        completeness: { audited_count: 1, expected_count: 1, missing_count: 0, pending_count: 0 },
        expected_periods: [],
        rows: [
          {
            ...defaultResponse.data.rows[0],
            exception_type: 'non_compliant',
            raw_result: '6.7',
          },
        ],
      },
    });
    const wrapper = mountPage();
    await selectFilters(wrapper);
    await wrapper.find('[data-action="search"]').trigger('click');
    await flushPromises();

    const table = wrapper.findComponent({ name: 'ATable' });
    const resultColumn = (table.props('columns') as Array<Record<string, any>>).find((column) => column.dataIndex === 'raw_result');
    const resultRow = (table.props('dataSource') as Array<Record<string, any>>)[0];
    expect(resultColumn?.customRender({ record: resultRow })).toBe('6.7');
  });

  it('queries audited rows and exports the displayed rows in the browser', async () => {
    const wrapper = mountPage();
    await selectFilters(wrapper);

    await wrapper.find('[data-action="search"]').trigger('click');
    await flushPromises();

    const expectedQuery = {
      fenlei_bianma: 'CJ',
      jihua_ids: ['plan-1'],
      pihao_keys: [{ jihua_id: 'plan-1', pihao: '250102' }],
      xiangmu_ids: ['item-ph'],
      yangpin_id: 'product-1',
    };
    expect(apiMocks.getData).toHaveBeenCalledWith(expectedQuery);
    expect(wrapper.find('.completeness-band').exists()).toBe(false);
    expect(wrapper.find('.analysis-table').exists()).toBe(true);
    expect(wrapper.find('.chart-block').exists()).toBe(true);

    await wrapper.find('[data-action="export"]').trigger('click');
    await flushPromises();
    const queriedResponse = await apiMocks.getData.mock.results[0]?.value;
    expect(exportMocks.download).toHaveBeenCalledWith(queriedResponse.data.rows);
  });

  it('keeps the last result and does not query automatically when the category changes', async () => {
    const wrapper = mountPage();
    await selectFilters(wrapper);
    await wrapper.find('[data-action="search"]').trigger('click');
    await flushPromises();
    const queryCount = apiMocks.getData.mock.calls.length;
    const popup = (title: string) => wrapper.findAllComponents(PopupStub).find((item) => item.props('popupTitle') === title)!;

    popup('选择分类').vm.$emit('update:value', 'YL');
    popup('选择分类').vm.$emit('change', 'YL');
    await flushPromises();

    expect(popup('选择品名').props('value')).toBeUndefined();
    expect(popup('选择检验项目').props('value')).toEqual([]);
    expect(popup('选择稳定性考察编号').props('value')).toEqual([]);
    expect(popup('选择批号').props('value')).toEqual([]);
    expect(apiMocks.getData).toHaveBeenCalledTimes(queryCount);
    expect(wrapper.find('.analysis-table').exists()).toBe(true);
    expect(wrapper.find('.completeness-band').exists()).toBe(false);
    expect(wrapper.find<HTMLButtonElement>('[data-action="export"]').element.disabled).toBe(false);

    await wrapper.find('[data-action="export"]').trigger('click');
    await flushPromises();
    const queriedResponse = await apiMocks.getData.mock.results[0]?.value;
    expect(exportMocks.download).toHaveBeenLastCalledWith(queriedResponse.data.rows);
    expect(apiMocks.getData).toHaveBeenCalledTimes(queryCount);
  });
});