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

const mockConnectionState = { value: 'connected' as const };
const mockQuickConfig = {
  value: {
    gatewayUrl: 'ws://127.0.0.1:50051',
    gatewayToken: '',
    theme: 'light' as const,
    autoStart: false,
    showToolCalls: false,
  },
};

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

// Mock connectionStore with selector pattern
vi.mock('../../desktop/src/store/connectionStore', () => ({
  useConnectionStore: vi.fn((selector) => {
    const state = {
      connectionState: mockConnectionState.value,
      connect: connectMock,
      disconnect: disconnectMock,
    };
    return selector ? selector(state) : state;
  }),
}));

// Mock configStore with selector pattern
vi.mock('../../desktop/src/store/configStore', () => ({
  useConfigStore: vi.fn((selector) => {
    const state = {
      quickConfig: mockQuickConfig.value,
      saveQuickConfig: saveQuickConfigMock,
    };
    return selector ? selector(state) : state;
  }),
}));

// Mock chatStore with selector pattern
vi.mock('../../desktop/src/store/chatStore', () => ({
  useChatStore: vi.fn((selector) => {
    const state = {
      currentModel: 'glm-5',
    };
    return selector ? selector(state) : state;
  }),
}));

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

describe('General settings gateway connection', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    mockConnectionState.value = 'connected';
  });

  it('renders gateway connection settings and displays connection status', async () => {
    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));
    });

    // 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('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 () => {
    mockConnectionState.value = 'disconnected';

    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();
  });
});