import { closeElectronApp, expect, getStableWindow, test } from './fixtures/electron';

test.describe('AI Design workspace', () => {
  test('keeps the conversation and generation task panes full height', async ({ launchElectronApp }) => {
    const app = await launchElectronApp({
      imageWorkspaceMode: 'local',
      skipSetup: true,
    });

    try {
      const page = await getStableWindow(app);
      await expect(page.getByTestId('ai-module-selection-page')).toBeVisible();
      await page.getByTestId('ai-module-option-painting').click();

      await page.getByTestId('sidebar-create-image-project').click();
      await page.getByLabel('项目名称').fill('多会话验收项目');
      await page.getByRole('button', { name: '创建项目' }).click();

      const projectCard = page.locator('[data-testid^="sidebar-image-project-"]').first();
      await expect(projectCard).not.toContainText('1 个会话');
      await expect(projectCard).not.toContainText('设计会话');
      await expect(page.getByRole('button', { name: '收起 多会话验收项目 的会话' })).toBeVisible();
      await expect(page.getByRole('button', { name: '重命名 多会话验收项目' })).toBeVisible();
      await expect(page.locator('[data-testid^="sidebar-image-conversations-"]').first())
        .not.toHaveClass(/border-t/);
      await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
      await expect(page.getByTestId('image-workspace-conversation-fade')).toBeVisible();
      await expect(page.getByTestId('design-task-list')).toBeVisible();
      await expect(page.getByTestId('design-task-fade')).toBeVisible();
      await expect(page.getByTestId('image-canvas-conversation-select')).toHaveCount(0);
      const emptyState = page.getByTestId('image-workspace-empty-state');
      await expect(emptyState).toContainText('今天一起描绘什么？');
      await expect(emptyState.getByRole('img', { name: 'Makelore' })).toHaveCount(1);

      const fileChooserPromise = page.waitForEvent('filechooser');
      await page.getByRole('button', { name: '上传参考图' }).click();
      await fileChooserPromise;
      await expect(page.getByRole('dialog', { name: '选择视频首帧' })).toHaveCount(0);

      const layoutBounds = await page.evaluate(() => {
        const readBounds = (testId: string) => {
          const element = document.querySelector(`[data-testid="${testId}"]`);
          if (!element) return null;
          const rect = element.getBoundingClientRect();
          const style = getComputedStyle(element);
          return {
            top: rect.top,
            bottom: rect.bottom,
            borderLeftWidth: style.borderLeftWidth,
            overflowY: style.overflowY,
          };
        };

        return {
          shell: readBounds('main-layout'),
          canvas: readBounds('image-canvas-page'),
          conversation: readBounds('image-workspace-conversation-pane'),
          tasks: readBounds('design-task-list'),
          taskScroll: readBounds('design-task-scroll'),
        };
      });

      expect(layoutBounds.shell).not.toBeNull();
      expect(layoutBounds.canvas).not.toBeNull();
      expect(layoutBounds.conversation).not.toBeNull();
      expect(layoutBounds.tasks).not.toBeNull();
      expect(layoutBounds.taskScroll).not.toBeNull();
      expect(Math.abs(layoutBounds.canvas!.top - layoutBounds.shell!.top)).toBeLessThanOrEqual(1);
      expect(Math.abs(layoutBounds.canvas!.bottom - layoutBounds.shell!.bottom)).toBeLessThanOrEqual(1);
      expect(Math.abs(layoutBounds.conversation!.top - layoutBounds.canvas!.top)).toBeLessThanOrEqual(1);
      expect(Math.abs(layoutBounds.conversation!.bottom - layoutBounds.canvas!.bottom)).toBeLessThanOrEqual(1);
      expect(Math.abs(layoutBounds.tasks!.top - layoutBounds.canvas!.top)).toBeLessThanOrEqual(1);
      expect(Math.abs(layoutBounds.tasks!.bottom - layoutBounds.canvas!.bottom)).toBeLessThanOrEqual(1);
      expect(layoutBounds.tasks!.borderLeftWidth).toBe('1px');
      expect(layoutBounds.taskScroll!.overflowY).toBe('auto');

      const firstPrompt = '为项目设计一张蓝色星空海报';
      await page.getByLabel('设计需求').fill(firstPrompt);
      await page.getByRole('button', { name: '发送给设计 Agent' }).click();
      await expect(page.getByTestId('image-workspace-conversation')).toContainText(firstPrompt);
      await expect(page.getByText('设计 Agent', { exact: true })).toHaveCount(0);
      await expect(page.getByText('你', { exact: true })).toHaveCount(0);
      await expect(page.getByTestId('image-workspace-message').first()).toHaveClass(/w-full/);
      await page.getByRole('button', { name: '确认并开始生成' }).click();
      await expect(page.getByRole('button', { name: '确认生成' })).toHaveCount(0);
      await expect(page.getByRole('button', { name: '继续调整' })).toHaveCount(0);

      const task = page.locator('[data-testid^="design-task-"]').first();
      await expect(task).toContainText(firstPrompt);
      await expect(task).toContainText(firstPrompt);
      const firstConversation = page.locator('[data-testid^="sidebar-image-conversation-"]').first();
      await expect(firstConversation).toContainText(firstPrompt);
      await expect(firstConversation).not.toContainText('新会话');

      const firstConversationTestId = await page
        .locator('[data-testid^="sidebar-image-conversation-"]')
        .first()
        .getAttribute('data-testid');
      expect(firstConversationTestId).toBeTruthy();

      await page.getByRole('button', { name: '新建设计会话' }).click();
      await expect(page.locator('[data-testid^="sidebar-image-conversation-"]')).toHaveCount(2);

      const secondPrompt = '这一条会话只讨论红色角色立绘';
      await page.getByLabel('设计需求').fill(secondPrompt);
      await page.getByRole('button', { name: '发送给设计 Agent' }).click();
      await expect(page.getByTestId('image-workspace-conversation')).toContainText(secondPrompt);

      await page.getByTestId(firstConversationTestId!).click();
      await expect(page.getByTestId('image-workspace-conversation')).toContainText(firstPrompt);
      await expect(page.getByTestId('image-workspace-conversation')).not.toContainText(secondPrompt);
    } finally {
      await closeElectronApp(app);
    }
  });
});