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

const useGatewayStoreMock = vi.fn();
const useChatStoreMock = vi.fn();
const getStoredGatewayTokenMock = vi.fn(() => 'stored-token');
const setStoredGatewayTokenMock = vi.fn();

vi.mock('../../desktop/src/store/gatewayStore', () => ({
  useGatewayStore: () => useGatewayStoreMock(),
}));

vi.mock('../../desktop/src/store/chatStore', () => ({
  useChatStore: () => useChatStoreMock(),
}));

vi.mock('../../desktop/src/lib/gateway-client', () => ({
  getStoredGatewayToken: () => getStoredGatewayTokenMock(),
  setStoredGatewayToken: (token: string) => setStoredGatewayTokenMock(token),
}));

describe('General settings gateway connection', () => {
  let connectMock: ReturnType<typeof vi.fn>;
  let disconnectMock: ReturnType<typeof vi.fn>;
  let saveQuickConfigMock: ReturnType<typeof vi.fn>;

  beforeEach(() => {
    vi.clearAllMocks();
    connectMock = vi.fn(async () => {});
    disconnectMock = vi.fn();
    saveQuickConfigMock = vi.fn(async () => {});

    useGatewayStoreMock.mockReturnValue({
      connectionState: 'connected',
      gatewayVersion: '2026.3.11',
      error: null,
      quickConfig: {
        gatewayUrl: 'ws://127.0.0.1:50051',
        gatewayToken: '',
        theme: 'light',
        autoStart: false,
        showToolCalls: false,
      },
      connect: connectMock,
      disconnect: disconnectMock,
      saveQuickConfig: saveQuickConfigMock,
    });

    useChatStoreMock.mockReturnValue({
      currentModel: 'glm-5',
    });
  });

  it('renders gateway connection settings and displays connection status', async () => {
    const reactModule = 'react';
    const reactDomClientModule = 'react-dom/client';
    const [{ act, createElement }, { createRoot }, { General }] = await Promise.all([
      import(reactModule),
      import(reactDomClientModule),
      import('../../desktop/src/components/Settings/General'),
    ]);

    const container = document.createElement('div');
    document.body.appendChild(container);
    const root = createRoot(container);
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

    await act(async () => {
      root.render(createElement(General));
    });

    // Verify basic UI elements
    expect(container.textContent).toContain('通用设置');
    expect(container.textContent).toContain('Gateway 连接');
    expect(container.textContent).toContain('已连接');
    expect(container.textContent).toContain('ws://127.0.0.1:50051');
    expect(container.textContent).toContain('2026.3.11');
    expect(container.textContent).toContain('glm-5');
    expect(container.textContent).toContain('断开连接');

    // Verify appearance settings
    expect(container.textContent).toContain('外观与行为');
    expect(container.textContent).toContain('主题模式');
    expect(container.textContent).toContain('开机自启');
    expect(container.textContent).toContain('显示工具调用');

    await act(async () => {
      root.unmount();
    });
    container.remove();
  });

  it('displays disconnected state when not connected', async () => {
    useGatewayStoreMock.mockReturnValue({
      connectionState: 'disconnected',
      gatewayVersion: null,
      error: null,
      quickConfig: {
        gatewayUrl: 'ws://127.0.0.1:50051',
        gatewayToken: '',
        theme: 'light',
        autoStart: false,
        showToolCalls: false,
      },
      connect: connectMock,
      disconnect: disconnectMock,
      saveQuickConfig: saveQuickConfigMock,
    });

    const [{ act, createElement }, { createRoot }, { General }] = await Promise.all([
      import('react'),
      import('react-dom/client'),
      import('../../desktop/src/components/Settings/General'),
    ]);

    const container = document.createElement('div');
    document.body.appendChild(container);
    const root = createRoot(container);
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

    await act(async () => {
      root.render(createElement(General));
    });

    expect(container.textContent).toContain('未连接');
    expect(container.textContent).toContain('连接 Gateway');

    await act(async () => {
      root.unmount();
    });
    container.remove();
  });
});