/**
 * AutoFormGenerator 组件测试
 * 测试自动表单生成功能的核心逻辑
 */

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import AutoFormGenerator from '../../components/AutoFormGenerator';
import type { WorkflowInputs } from '../../types/comfyui';

// Mock file upload service
vi.mock('../../services/fileUploadService', () => ({
  default: {
    uploadFileToCloud: vi.fn().mockResolvedValue({
      success: true,
      url: 'https://example.com/uploaded-file.jpg',
      fileName: 'test-file.jpg',
    }),
  },
}));

// Mock Tauri invoke
vi.mock('@tauri-apps/api/tauri', () => ({
  invoke: vi.fn(),
}));

describe('AutoFormGenerator', () => {
  const mockWorkflowInputs: WorkflowInputs = {
    '模特图_image': {
      node_id: '1',
      type: 'image',
      widget_name: 'image',
    },
    '模特图_upload': {
      node_id: '1',
      type: 'upload',
      widget_name: 'upload',
    },
    '模特描述_value': {
      node_id: '2',
      type: 'string',
      widget_name: 'text',
    },
    '穿搭图_image': {
      node_id: '3',
      type: 'image',
      widget_name: 'image',
    },
    '穿搭图_upload': {
      node_id: '3',
      type: 'upload',
      widget_name: 'upload',
    },
  };

  const mockOnFormDataChange = vi.fn();
  const mockOnSubmit = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('应该正确解析工作流输入并生成表单字段', () => {
    render(
      <AutoFormGenerator
        workflowInputs={mockWorkflowInputs}
        onFormDataChange={mockOnFormDataChange}
      />
    );

    // 应该显示图片上传字段
    expect(screen.getByText('模特图')).toBeInTheDocument();
    expect(screen.getByText('穿搭图')).toBeInTheDocument();
    
    // 应该显示文本输入字段
    expect(screen.getByText('模特描述')).toBeInTheDocument();
    
    // 不应该显示upload类型的字段
    expect(screen.queryByText('模特图_upload')).not.toBeInTheDocument();
    expect(screen.queryByText('穿搭图_upload')).not.toBeInTheDocument();
  });

  it('应该处理文本输入字段的变化', async () => {
    render(
      <AutoFormGenerator
        workflowInputs={mockWorkflowInputs}
        onFormDataChange={mockOnFormDataChange}
      />
    );

    const textInput = screen.getByPlaceholderText('请输入模特描述');
    fireEvent.change(textInput, { target: { value: '测试描述' } });

    await waitFor(() => {
      expect(mockOnFormDataChange).toHaveBeenCalledWith(
        expect.objectContaining({
          '模特描述_value': '测试描述',
        })
      );
    });
  });

  it('应该在没有输入字段时显示空状态', () => {
    render(
      <AutoFormGenerator
        workflowInputs={{}}
        onFormDataChange={mockOnFormDataChange}
      />
    );

    expect(screen.getByText('暂无可配置的表单字段')).toBeInTheDocument();
  });

  it('应该在禁用状态下禁用所有输入', () => {
    render(
      <AutoFormGenerator
        workflowInputs={mockWorkflowInputs}
        onFormDataChange={mockOnFormDataChange}
        disabled={true}
      />
    );

    const textInput = screen.getByPlaceholderText('请输入模特描述');
    expect(textInput).toBeDisabled();
  });

  it('应该在有提交回调时显示提交按钮', () => {
    render(
      <AutoFormGenerator
        workflowInputs={mockWorkflowInputs}
        onFormDataChange={mockOnFormDataChange}
        onSubmit={mockOnSubmit}
      />
    );

    expect(screen.getByText('提交配置')).toBeInTheDocument();
  });

  it('应该正确处理表单提交', async () => {
    render(
      <AutoFormGenerator
        workflowInputs={mockWorkflowInputs}
        onFormDataChange={mockOnFormDataChange}
        onSubmit={mockOnSubmit}
      />
    );

    // 填写文本字段
    const textInput = screen.getByPlaceholderText('请输入模特描述');
    fireEvent.change(textInput, { target: { value: '测试描述' } });

    // 等待表单数据更新
    await waitFor(() => {
      expect(mockOnFormDataChange).toHaveBeenCalledWith(
        expect.objectContaining({
          '模特描述_value': '测试描述',
        })
      );
    });

    // 提交表单
    const submitButton = screen.getByText('提交配置');
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith(
        expect.objectContaining({
          '模特描述_value': '测试描述',
        })
      );
    });
  });
});
