import type { OnlyOfficeBridge } from '../src/onlyoffice/bridge';

import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

import { mount } from '@vue/test-utils';
import Antd, { ConfigProvider, Tooltip } from 'ant-design-vue';
import dayjs from 'dayjs';
import { createPinia } from 'pinia';
import { afterEach, describe, expect, it, vi } from 'vitest';

import App from '../src/App.vue';

const styles = readFileSync(resolve(process.cwd(), 'src/styles.css'), 'utf8');

function bridgeFixture(
  fields: Awaited<ReturnType<OnlyOfficeBridge['inspectFields']>>,
  runtimeOptions: ReturnType<OnlyOfficeBridge['getRuntimeOptions']> | undefined = undefined,
) {
  let ready = () => undefined;
  let changed = (_control: { InternalId?: unknown; Tag?: unknown }) => undefined;
  let focused = (_control: { InternalId?: unknown; Tag?: unknown }) => undefined;
  const bridge: OnlyOfficeBridge = {
    applyFields: vi.fn().mockResolvedValue([]),
    appendRepeatRow: vi.fn().mockResolvedValue([]),
    bindLifecycle: vi.fn((callbacks) => {
      changed = callbacks.onControlChanged;
      focused = callbacks.onControlFocused;
      ready = callbacks.onReady;
      return vi.fn();
    }),
    getRuntimeOptions: () =>
      runtimeOptions ?? {
        apiBaseUrl: 'http://localhost:30000',
        bizDataId: 'record-1',
        bizModule: 'eln.record',
        bizScene: 'eln.record.fill',
        canFill: true,
        documentId: 'file-1',
        pluginVersion: '0.1.0',
        scope: 'onlyoffice:eln-record-fill',
        ticket: 'ticket-1',
      },
    inspectFields: vi.fn().mockResolvedValue(fields),
    removeRepeatRow: vi.fn().mockResolvedValue([]),
    selectControl: vi.fn().mockResolvedValue(undefined),
    setFillOnlyMode: vi.fn().mockResolvedValue(undefined),
  };
  return {
    bridge,
    changed: (control: { InternalId?: unknown; Tag?: unknown }) => changed(control),
    focused: (control: { InternalId?: unknown; Tag?: unknown }) => focused(control),
    ready: () => ready(),
  };
}

describe('App step navigation', () => {
  afterEach(() => {
    vi.restoreAllMocks();
    vi.unstubAllGlobals();
  });

  it('provides Chinese locale to Ant Design and dayjs', () => {
    const wrapper = mount(App, { global: { plugins: [createPinia(), Antd] } });

    const provider = wrapper.getComponent(ConfigProvider);
    const trigger = document.createElement('button');
    wrapper.get('.plugin-shell').element.append(trigger);
    const getPopupContainer = provider.props('getPopupContainer');

    expect(provider.props('locale')).toMatchObject({ locale: 'zh-cn' });
    expect(getPopupContainer).toBeTypeOf('function');
    expect(getPopupContainer?.(trigger)).toBe(wrapper.get('.plugin-shell').element);
    expect(dayjs.locale()).toBe('zh-cn');
    wrapper.unmount();
  });

  it('reports unapplied record drafts to the host window', async () => {
    vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(JSON.stringify({ fields: {}, repeatGroups: [] }), { status: 200 })));
    const postMessage = vi.spyOn(window, 'postMessage');
    const runtime = {
      apiBaseUrl: 'http://localhost:30000',
      bizDataId: 'record-1',
      bizModule: 'eln.record' as const,
      bizScene: 'eln.record.fill' as const,
      canFill: true,
      documentId: 'file-1',
      pluginVersion: '0.1.0' as const,
      scope: 'onlyoffice:eln-record-fill' as const,
      ticket: 'ticket-1',
    };
    const fixture = bridgeFixture([{ alias: '检验结果', currentValue: '', internalId: '1', options: [], tag: 'eln.field.result', type: 'text' }], runtime);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: fixture.bridge } },
    });
    fixture.ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('检验结果'));

    await wrapper.get('.field-row input').setValue('合格');

    await vi.waitFor(() =>
      expect(postMessage).toHaveBeenCalledWith(
        {
          bizDataId: 'record-1',
          documentId: 'file-1',
          pendingCount: 1,
          type: 'jnpf:eln-record-fill-state',
          version: 1,
        },
        '*',
      ),
    );
    wrapper.unmount();
  });

  it('uses the annotator status bar and keeps fields in a bounded scroll region', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue(
        new Response(
          JSON.stringify({
            fields: {},
            repeatGroups: [],
            stepStructure: {
              configuration: {
                singleStep: true,
                steps: [{ id: 'step-only', name: '填写', order: 1 }],
              },
              controlSteps: { 'eln.field.sample': 'step-only' },
              repeatGroupSteps: {},
            },
          }),
          { status: 200 },
        ),
      ),
    );
    const { bridge, ready } = bridgeFixture([{ alias: '供试品名称', currentValue: '', internalId: '1', options: [], tag: 'eln.field.sample', type: 'text' }]);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: bridge } },
    });
    ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('供试品名称'));

    expect(wrapper.get('[data-test="connection-status"]').text()).toContain('已连接');
    expect(wrapper.find('[data-test="source-sync-button"]').exists()).toBe(true);
    expect(wrapper.find('.plugin-header .ant-tag').exists()).toBe(false);
    expect(wrapper.get('.plugin-shell').find('[data-test="plugin-scroll-region"]').exists()).toBe(true);
    const toolbar = wrapper.get('[data-test="field-toolbar"]');
    const scrollRegion = wrapper.get('[data-test="plugin-scroll-region"]');
    expect(toolbar.element.parentElement).toBe(wrapper.get('.plugin-shell').element);
    expect(toolbar.element.nextElementSibling).toBe(scrollRegion.element);
    expect(toolbar.get('[data-test="field-filter"]').classes()).not.toContain('ant-input-lg');
    expect(styles).toMatch(/\.plugin-shell\s*\{[^}]*display:\s*flex;/s);
    expect(styles).toMatch(/\.plugin-scroll-region\s*\{[^}]*overflow-y:\s*auto;/s);
    expect(styles).toMatch(/\.field-toolbar\s*\{[^}]*flex:\s*0 0 auto;/s);
    expect(styles).not.toMatch(/\.field-toolbar\s*\{[^}]*position:\s*sticky;/s);
    expect(styles).toMatch(/\.plugin-shell footer\s*\{[^}]*position:\s*static;/s);
  });

  it('locates a document field without scrolling the plugin content', async () => {
    vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(JSON.stringify({ fields: {}, repeatGroups: [] }), { status: 200 })));
    const scrollIntoView = vi.spyOn(HTMLElement.prototype, 'scrollIntoView').mockImplementation(() => undefined);
    const fixture = bridgeFixture([
      { alias: '检验结果', currentValue: '', internalId: 'field-1', options: [], tag: 'eln.field.result', type: 'text' },
      { alias: '来源', currentValue: '', internalId: 'field-2', options: [], tag: 'eln.field.source', type: 'text' },
    ]);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: fixture.bridge } },
    });
    fixture.ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('检验结果'));

    await wrapper.get('[aria-label="在文档中定位 检验结果"]').trigger('click');

    await vi.waitFor(() => expect(fixture.bridge.selectControl).toHaveBeenCalledWith('field-1'));
    expect(scrollIntoView).not.toHaveBeenCalled();

    fixture.focused({ InternalId: 'field-2', Tag: 'eln.field.source' });
    await vi.waitFor(() => expect(scrollIntoView).toHaveBeenCalledOnce());
    wrapper.unmount();
  });

  it('distinguishes task and cross-template differences and disables source sync when readonly', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockImplementation(async (url: string) => {
        if (url.endsWith('/sourceSync/preview'))
          return new Response(
            JSON.stringify({
              changedCount: 2,
              differences: [
                {
                  bindingId: 'binding-source',
                  changed: true,
                  currentValue: 'GYDW',
                  dataType: 'TEXT',
                  fieldCode: 'source',
                  fieldName: '来源',
                  previousValue: null,
                  sourceProperty: 'quality_standard.source',
                  sourceType: 'LIMS_TASK',
                },
                {
                  bindingId: 'binding-cross',
                  changed: true,
                  currentValue: '复测合格',
                  dataType: 'TEXT',
                  fieldCode: 'source_result',
                  fieldName: '源检验结果',
                  previousValue: '合格',
                  sourceFieldVersionId: 'source-field-version-2',
                  sourceFetchedAt: '2026-09-02T08:30:00Z',
                  sourceProperty: null,
                  sourceRecordId: 'source-record-1',
                  sourceRevisionId: 'source-revision-2',
                  sourceType: 'CROSS_TEMPLATE',
                  sourceValueId: 'source-value-2',
                },
              ],
              previewToken: 'preview-token',
              recordId: 'record-1',
              recordVersion: 4,
              revisionId: 'revision-1',
            }),
            { status: 200 },
          );
        return new Response(JSON.stringify({ fields: {}, repeatGroups: [] }), { status: 200 });
      }),
    );
    const runtime = {
      apiBaseUrl: 'http://localhost:30000',
      bizDataId: 'record-1',
      bizModule: 'eln.record' as const,
      bizScene: 'eln.record.fill' as const,
      canFill: true,
      documentId: 'file-1',
      pluginVersion: '0.1.0' as const,
      scope: 'onlyoffice:eln-record-fill' as const,
      ticket: 'ticket-1',
    };
    const fixture = bridgeFixture([{ alias: '来源', currentValue: 'GYDW', internalId: '1', options: [], tag: 'eln.field.source', type: 'text' }], runtime);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: fixture.bridge } },
    });
    fixture.ready();
    await vi.waitFor(() => expect(wrapper.get('[data-test="connection-status"]').text()).toContain('已连接'));

    expect(wrapper.get('[data-test="field-toolbar"]').find('[data-test="source-sync-button"]').exists()).toBe(true);
    expect(wrapper.find('.plugin-header [data-test="source-sync-button"]').exists()).toBe(false);
    expect(wrapper.get('[data-test="source-sync-button"]').attributes('disabled')).toBeUndefined();
    expect(wrapper.get('[data-test="source-sync-button"]').classes()).not.toContain('ant-btn-lg');
    expect(wrapper.findAllComponents(Tooltip).find((tooltip) => tooltip.props('title') === '重新同步来源快照')?.props('placement')).toBe('topRight');
    await wrapper.get('[aria-label="重新同步来源快照"]').trigger('click');

    await vi.waitFor(() => expect(document.body.textContent).toContain('quality_standard.source'));
    const differences = document.body.querySelector('[data-test="source-sync-differences"]')?.textContent;
    expect(differences).toContain('任务快照');
    expect(differences).toContain('跨模板字段值');
    expect(differences).toContain('source-record-1');
    expect(differences).toContain('source-revision-2');

    const readonlyFixture = bridgeFixture([], { ...runtime, canFill: false });
    const readonlyWrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: readonlyFixture.bridge } },
    });
    readonlyFixture.ready();
    await vi.waitFor(() => expect(readonlyWrapper.get('[data-test="connection-status"]').text()).toContain('当前记录仅可查看'));
    expect(readonlyWrapper.get('[data-test="source-sync-button"]').attributes('disabled')).toBeDefined();

    const emptyEditableFixture = bridgeFixture([], runtime);
    const emptyEditableWrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: emptyEditableFixture.bridge } },
    });
    emptyEditableFixture.ready();
    await vi.waitFor(() => expect(emptyEditableWrapper.get('[data-test="connection-status"]').text()).toContain('已连接'));
    expect(emptyEditableWrapper.find('[data-test="field-toolbar"]').exists()).toBe(false);
    expect(emptyEditableWrapper.get('.plugin-header').find('[data-test="source-sync-button"]').exists()).toBe(true);
  });

  it('navigates multi-step content and returns from the directory to the selected step', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue(
        new Response(
          JSON.stringify({
            fields: {},
            repeatGroups: [],
            stepStructure: {
              configuration: {
                singleStep: false,
                steps: [
                  { id: 'step-prepare', name: '准备', order: 1 },
                  { id: 'step-test', name: '检验', order: 2 },
                ],
              },
              controlSteps: { 'eln.field.sample': 'step-prepare', 'eln.field.result': 'step-test' },
              repeatGroupSteps: {},
            },
          }),
          { status: 200 },
        ),
      ),
    );
    const { bridge, ready } = bridgeFixture([
      { alias: '样品编号', currentValue: '', internalId: '1', options: [], tag: 'eln.field.sample', type: 'text' },
      { alias: '检验结果', currentValue: '', internalId: '2', options: [], tag: 'eln.field.result', type: 'text' },
    ]);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: bridge } },
    });
    ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('样品编号'));

    expect(wrapper.text()).not.toContain('检验结果');
    await wrapper.get('.field-row input').setValue('S-001');
    expect(wrapper.text()).toContain('应用到文档（1）');
    await wrapper.get('[aria-label="下一步骤"]').trigger('click');
    expect(wrapper.text()).toContain('检验结果');
    expect(wrapper.text()).not.toContain('样品编号');

    await wrapper.get('[aria-label="打开填写目录"]').trigger('click');
    expect(wrapper.find('[aria-label="填写目录"]').exists()).toBe(true);
    expect(wrapper.find('.field-row').exists()).toBe(false);
    await wrapper.get('[data-step-id="step-prepare"]').trigger('click');
    expect(wrapper.find('[aria-label="填写目录"]').exists()).toBe(false);
    expect(wrapper.text()).toContain('样品编号');
    expect(wrapper.get('.field-row input').element.getAttribute('value')).toBe('S-001');
    expect(bridge.selectControl).toHaveBeenCalledWith('1');
  });

  it('keeps the compact field layout and hides step terminology for a single-step template', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue(
        new Response(
          JSON.stringify({
            fields: {},
            repeatGroups: [],
            stepStructure: {
              configuration: {
                singleStep: true,
                steps: [{ id: 'step-only', name: '不应显示的唯一步骤', order: 1 }],
              },
              controlSteps: { 'eln.field.sample': 'step-only' },
              repeatGroupSteps: {},
            },
          }),
          { status: 200 },
        ),
      ),
    );
    const { bridge, ready } = bridgeFixture([{ alias: '样品编号', currentValue: '', internalId: '1', options: [], tag: 'eln.field.sample', type: 'text' }]);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: bridge } },
    });
    ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('样品编号'));

    expect(wrapper.find('[aria-label="步骤导航"]').exists()).toBe(false);
    expect(wrapper.find('[aria-label="打开填写目录"]').exists()).toBe(false);
    expect(wrapper.text()).not.toContain('不应显示的唯一步骤');
  });

  it('follows document focus and blocks apply until a cross-step conflict is resolved', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue(
        new Response(
          JSON.stringify({
            fields: {},
            repeatGroups: [],
            stepStructure: {
              configuration: {
                singleStep: false,
                steps: [
                  { id: 'step-first', name: '第一步', order: 1 },
                  { id: 'step-second', name: '第二步', order: 2 },
                ],
              },
              controlSteps: { 'eln.field.first': 'step-first', 'eln.field.second': 'step-second' },
              repeatGroupSteps: {},
            },
          }),
          { status: 200 },
        ),
      ),
    );
    const initial = [
      { alias: '第一项', currentValue: 'A', internalId: '1', options: [], tag: 'eln.field.first', type: 'text' as const },
      { alias: '第二项', currentValue: 'B', internalId: '2', options: [], tag: 'eln.field.second', type: 'text' as const },
    ];
    const fixture = bridgeFixture(initial);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: fixture.bridge } },
    });
    fixture.ready();
    await vi.waitFor(() => expect(wrapper.text()).toContain('第一项'));

    fixture.focused({ InternalId: '2', Tag: 'eln.field.second' });
    await vi.waitFor(() => expect(wrapper.text()).toContain('第二项'));
    expect(wrapper.get('[data-field-tag="eln.field.second"]').classes()).toContain('field-row-focused');
    await wrapper.get('.field-row input').setValue('侧栏值');
    vi.mocked(fixture.bridge.inspectFields).mockResolvedValue([initial[0]!, { ...initial[1]!, currentValue: '文档值' }]);
    fixture.changed({ InternalId: '2', Tag: 'eln.field.second' });

    await vi.waitFor(() => expect(wrapper.find('[aria-label="字段冲突"]').exists()).toBe(true));
    expect(wrapper.text()).toContain('1 个字段冲突');
    expect(wrapper.get('footer button').attributes('disabled')).toBeDefined();
    await wrapper.get('[data-conflict-tag="eln.field.second"]').trigger('click');
    expect(fixture.bridge.selectControl).toHaveBeenCalledWith('2');
    await wrapper.get('[data-resolution="draft"]').trigger('click');

    expect(wrapper.find('[aria-label="字段冲突"]').exists()).toBe(false);
    expect(wrapper.get('footer button').attributes('disabled')).toBeUndefined();
    expect(wrapper.text()).toContain('应用到文档（1）');
  });

  it('shows a grouped checkbox error and disables document apply', async () => {
    vi.stubGlobal(
      'fetch',
      vi.fn().mockResolvedValue(
        new Response(
          JSON.stringify({
            fields: {
              'eln.field.failed': { checkboxGroupCode: 'inspection_result', type: 'checkbox', value: true },
              'eln.field.passed': { checkboxGroupCode: 'inspection_result', type: 'checkbox', value: true },
            },
            repeatGroups: [],
            stepStructure: {
              configuration: {
                singleStep: true,
                steps: [{ id: 'step-1', name: '检验', order: 1 }],
              },
              controlSteps: {
                'eln.field.failed': 'step-1',
                'eln.field.passed': 'step-1',
              },
              repeatGroupSteps: {},
            },
          }),
          { status: 200 },
        ),
      ),
    );
    const fixture = bridgeFixture([
      { alias: '合格', currentValue: true, internalId: 'passed', options: [], tag: 'eln.field.passed', type: 'checkbox' },
      { alias: '不合格', currentValue: true, internalId: 'failed', options: [], tag: 'eln.field.failed', type: 'checkbox' },
    ]);
    const wrapper = mount(App, {
      global: { plugins: [createPinia(), Antd], provide: { onlyOfficeBridge: fixture.bridge } },
    });
    fixture.ready();

    await vi.waitFor(() => expect(wrapper.text()).toContain('选择组“inspection_result”最多选择 1 项'));
    expect(wrapper.get('footer button').attributes('disabled')).toBeDefined();
  });
});