import { act } from 'react';
import { createRoot } from 'react-dom/client';
import { Bubble } from '@ant-design/x';
import { afterEach, describe, expect, it } from 'vitest';
import { aiBubbleRoles, conversationStatusMeta } from './AiChatDrawer';
import { AiMessageContent } from './AiMessageContent';
import { DynamicChart } from './DynamicChart';
import { DynamicForm } from './DynamicForm';
import { DynamicReview } from './DynamicReview';
import type { AiChatMessage, AiChartSchema, AiReviewSchema } from './types';

let container: HTMLDivElement | null = null;
let root: ReturnType<typeof createRoot> | null = null;

afterEach(async () => {
  if (root) await act(async () => root?.unmount());
  container?.remove();
  root = null;
  container = null;
});

describe('AI chat bubble rendering', () => {
  it('maps conversation run statuses to list labels', () => {
    expect(conversationStatusMeta('running')).toEqual({ label: '生成中', color: 'processing' });
    expect(conversationStatusMeta('done')).toEqual({ label: '已完成', color: 'success' });
    expect(conversationStatusMeta('error')).toEqual({ label: '失败', color: 'error' });
    expect(conversationStatusMeta('stopped')).toEqual({ label: '已停止', color: 'default' });
  });

  it('renders a structured user message instead of passing the object to React', async () => {
    const message: AiChatMessage = {
      role: 'user',
      content: '查询今天的系统概览',
      reasoningContent: '',
      toolRuns: [],
      attachments: [],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <Bubble.List
          role={aiBubbleRoles}
          items={[
            {
              key: 'user-1',
              role: 'user',
              status: 'local',
              content: message,
              contentRender: (content: AiChatMessage) => <div>{content.content}</div>,
            },
          ]}
        />,
      );
    });

    expect(container.textContent).toContain('查询今天的系统概览');
  });

  it('renders an A2UI form and submits normalized values', async () => {
    let submitted: Record<string, unknown> | null = null;
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <DynamicForm
          form={{
            id: 'form-1',
            title: '新增学生',
            submitLabel: '提交创建',
            fields: [
              { name: 'name', label: '姓名', type: 'input', required: true },
              { name: 'studentNo', label: '学号', type: 'input' },
            ],
          }}
          onSubmit={(values) => {
            submitted = values;
          }}
        />,
      );
    });

    expect(container.textContent).toContain('新增学生');
    const input = container.querySelector('input#name') as HTMLInputElement | null;
    expect(input).not.toBeNull();
    if (input) {
      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
      setter?.call(input, '张三');
      input.dispatchEvent(new Event('input', { bubbles: true }));
    }
    const submitButton = container.querySelector('button[type="submit"]') as HTMLButtonElement | null;
    expect(submitButton).not.toBeNull();
    await act(async () => {
      submitButton?.click();
    });

    expect(submitted).toEqual({ name: '张三' });
    expect(container.textContent).toContain('已提交');
  });

  it('renders an A2UI review card and submits via the confirm button', async () => {
    let submittedId: string | null = null;
    const review: AiReviewSchema = {
      id: 'review-1',
      title: '开学导入',
      summary: '来自报名 Excel',
      status: 'pending',
      sections: [
        {
          key: 'students',
          type: 'students',
          title: '学生',
          kind: 'table',
          columns: [
            { key: 'name', title: '姓名' },
            { key: 'phone', title: '手机号' },
          ],
          rows: [
            { name: '张三', phone: '13800138000' },
            { name: '李四', phone: '13900139000' },
          ],
          issues: [],
        },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <DynamicReview
          review={review}
          onSubmit={(reviewId) => {
            submittedId = reviewId;
          }}
        />,
      );
    });

    expect(container.textContent).toContain('开学导入');
    expect(container.textContent).toContain('确认导入本步');
    expect(container.textContent).toContain('全部确认并入库');
    const button = Array.from(container.querySelectorAll('button')).find((item) =>
      item.textContent?.includes('全部确认并入库'),
    ) as HTMLButtonElement | undefined;
    expect(button).not.toBeNull();
    await act(async () => {
      button?.click();
    });
    const confirmButton = Array.from(document.body.querySelectorAll('button')).find(
      (item) => item.textContent?.trim() === '确认导入',
    ) as HTMLButtonElement | undefined;
    expect(confirmButton).toBeDefined();
    await act(async () => {
      confirmButton?.click();
      await new Promise((resolve) => setTimeout(resolve, 50));
    });
    expect(submittedId).toBe('review-1');
  });

  it('renders grouped sheets and confirms one type group via Popconfirm', async () => {
    let submittedGroup: { reviewId: string; type: string } | null = null;
    const review: AiReviewSchema = {
      id: 'review-2',
      title: '入住分表',
      status: 'pending',
      sections: [
        {
          key: 'checkins_girls_4',
          type: 'checkins',
          title: '四人间女',
          kind: 'table',
          columns: [
            { key: 'name', title: '姓名' },
            { key: 'roomNumber', title: '宿舍号' },
          ],
          rows: [{ name: '张三', roomNumber: '4-401' }],
          issues: [],
        },
        {
          key: 'checkins_boys_4',
          type: 'checkins',
          title: '四人间男',
          kind: 'table',
          columns: [
            { key: 'name', title: '姓名' },
            { key: 'roomNumber', title: '宿舍号' },
          ],
          rows: [{ name: '李四', roomNumber: '4-402' }],
          issues: [],
        },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <DynamicReview
          review={review}
          onSubmit={() => undefined}
          onConfirmGroup={(_, reviewId, type) => {
            submittedGroup = { reviewId, type };
          }}
        />,
      );
    });

    expect(container.textContent).toContain('入住记录 · 共 2 张表');
    expect(container.textContent).toContain('确认本组 2 张表');
    const groupButton = Array.from(container.querySelectorAll('button')).find((item) =>
      item.textContent?.includes('确认本组 2 张表'),
    ) as HTMLButtonElement | undefined;
    expect(groupButton).not.toBeNull();
    await act(async () => {
      groupButton?.click();
    });
    const confirmButton = Array.from(document.body.querySelectorAll('button')).find(
      (item) => item.textContent?.trim() === '确认导入',
    ) as HTMLButtonElement | undefined;
    expect(confirmButton).toBeDefined();
    await act(async () => {
      confirmButton?.click();
      await new Promise((resolve) => setTimeout(resolve, 50));
    });
    expect(submittedGroup).toEqual({ reviewId: 'review-2', type: 'checkins' });
  });

  it('renders legacy review sections missing type by inferring from key', async () => {
    const review: AiReviewSchema = {
      id: 'review-3',
      title: '旧数据预览',
      status: 'pending',
      sections: [
        {
          key: 'checkins_legacy',
          title: '旧入住表',
          kind: 'table',
          columns: [{ key: 'name', title: '姓名' }],
          rows: [{ name: '张三' }],
          issues: [],
        },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);
    await act(async () => {
      root?.render(<DynamicReview review={review} onSubmit={() => undefined} />);
    });
    expect(container.textContent).toContain('入住记录 · 共 1 张表');
    expect(container.textContent).toContain('旧入住表');
  });

  it('renders an expired review card with table content but disabled actions', async () => {
    let confirmed = false;
    const review: AiReviewSchema = {
      id: 'review-4',
      title: '已被替代的预览',
      status: 'expired',
      sections: [
        {
          key: 'checkins_old',
          type: 'checkins',
          title: '旧入住表',
          kind: 'table',
          columns: [{ key: 'name', title: '姓名' }],
          rows: [{ name: '张三' }],
          issues: [],
        },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);
    await act(async () => {
      root?.render(
        <DynamicReview
          review={review}
          onSubmit={() => {
            confirmed = true;
          }}
          onConfirmStep={() => {
            confirmed = true;
          }}
        />,
      );
    });
    expect(container.textContent).toContain('已失效');
    expect(container.textContent).toContain('已被新的预览替代');
    expect(container.textContent).toContain('张三');
    expect(container.textContent).not.toContain('全部确认并入库');
    const disabledButton = Array.from(container.querySelectorAll('button')).find(
      (item) => item.textContent?.trim() === '已失效',
    ) as HTMLButtonElement | undefined;
    expect(disabledButton).toBeDefined();
    expect(disabledButton?.disabled).toBe(true);
    await act(async () => {
      disabledButton?.click();
    });
    expect(confirmed).toBe(false);
  });

  it('renders an A2UI chart card with title and chart container', async () => {
    const chart: AiChartSchema = {
      id: 'chart-1',
      title: '各班级人数',
      chartType: 'bar',
      columns: [
        { key: 'className', title: '班级' },
        { key: 'count', title: '人数' },
      ],
      rows: [
        { className: '一班', count: 20 },
        { className: '二班', count: 15 },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(<DynamicChart chart={chart} />);
    });

    expect(container.textContent).toContain('各班级人数');
    expect(container.textContent).toContain('柱状图');
    expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
    expect(container.querySelector('.ai-chat-chart-card__download')).not.toBeNull();
  });

  it('renders charts persisted on an assistant message', async () => {
    const message: AiChatMessage = {
      role: 'assistant',
      content: '这是学生性别比例图',
      reasoningContent: '',
      toolRuns: [],
      attachments: [],
      charts: [
        {
          id: 'chart-9',
          title: '学生性别比例',
          chartType: 'pie',
          columns: [
            { key: 'gender', title: '性别' },
            { key: 'count', title: '人数' },
          ],
          rows: [
            { gender: '男', count: 2 },
            { gender: '女', count: 0 },
            { gender: '未填写', count: 61 },
          ],
        },
      ],
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(<AiMessageContent message={message} />);
    });

    expect(container.textContent).toContain('学生性别比例');
    expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
  });

  it('renders source references from assistant message metadata', async () => {
    const message: AiChatMessage = {
      role: 'assistant',
      content: '这是基于你上传的名单整理的入住统计。',
      reasoningContent: '',
      toolRuns: [],
      attachments: [],
      metadata: {
        a2uiSources: [
          { title: '26暑期文化课宿舍.xlsx', url: '/api/ai/chat/attachments/7', description: 'excel' },
        ],
      },
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(<AiMessageContent message={message} />);
    });

    expect(container.textContent).toContain('引用来源');
    expect(container.textContent).toContain('26暑期文化课宿舍.xlsx');
  });

  it('renders model retrying hint while waiting for the upstream retry', async () => {
    const message: AiChatMessage = {
      role: 'assistant',
      content: '',
      reasoningContent: '',
      toolRuns: [],
      attachments: [],
      retrying: { attempt: 2, maxRetries: 3, reason: '上游返回 503' },
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(<AiMessageContent message={message} />);
    });

    expect(container.textContent).toContain('正在自动重试（第 2 / 3 次）');
    expect(container.textContent).toContain('上游返回 503');
  });

  it.each([
    ['area', '面积图', [{ key: 'month', title: '月份' }, { key: 'amount', title: '金额' }], [
      { month: '1月', amount: 100 },
      { month: '2月', amount: 150 },
    ]],
    ['scatter', '散点图', [
      { key: 'room', title: '宿舍' },
      { key: 'capacity', title: '容量' },
      { key: 'occupied', title: '入住人数' },
    ], [
      { room: '1-101', capacity: 4, occupied: 3 },
      { room: '1-102', capacity: 6, occupied: 5 },
    ]],
    ['radar', '雷达图', [
      { key: 'className', title: '班级' },
      { key: 'attendance', title: '考勤' },
      { key: 'score', title: '成绩' },
    ], [
      { className: '一班', attendance: 90, score: 85 },
      { className: '二班', attendance: 80, score: 92 },
    ]],
    ['gauge', '仪表盘', [
      { key: 'metric', title: '指标' },
      { key: 'value', title: '数值' },
      { key: 'max', title: '最大值' },
    ], [
      { metric: '入住率', value: 82, max: 100 },
    ]],
    ['funnel', '漏斗图', [
      { key: 'stage', title: '阶段' },
      { key: 'count', title: '人数' },
    ], [
      { stage: '咨询', count: 100 },
      { stage: '报名', count: 60 },
    ]],
  ])('渲染 %s 图表卡片', async (chartType, label, columns, rows) => {
    const chart: AiChartSchema = {
      id: `chart-${chartType}`,
      title: `${label}示例`,
      chartType: chartType as AiChartSchema['chartType'],
      columns,
      rows,
    };
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);

    await act(async () => {
      root?.render(<DynamicChart chart={chart} />);
    });

    expect(container.textContent).toContain(`${label}示例`);
    expect(container.textContent).toContain(label);
    expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
  });
});