/**
 * FormDesigner 组件使用示例页面
 * 
 * 展示如何使用 @/components/FormDesigner 中的组件：
 * - FormDesigner: 表单设计器（设计时）
 * - FormRenderer: 表单渲染器（运行时）
 */

import React, { useState } from 'react';
import { message, Tabs, Card, Button, Modal, Space, Divider, Alert } from 'antd';
import { FormDesigner, FormRenderer, type FormSchema } from '@/components/FormDesigner';
import { WORKFLOW_COMPONENTS } from '@/components/FormDesigner/extensions/workflow';

const FormDesignerExamplesPage: React.FC = () => {
  // ==================== 示例 1: 普通表单设计器 ====================
  const [designerSchema, setDesignerSchema] = useState<FormSchema>();

  const handleDesignerSave = async (schema: FormSchema) => {
    console.log('💾 保存的表单 Schema:', JSON.stringify(schema, null, 2));
    message.success('表单设计已保存！请查看控制台');
    setPreviewSchema(schema); // 保存后更新预览
    // 实际项目中这里会调用后端 API 保存
    // await formSchemaService.save(schema);
  };

  // ==================== 示例 1.5: 工作流表单设计器（带审批字段） ====================
  const [workflowDesignerSchema, setWorkflowDesignerSchema] = useState<FormSchema>();

  const handleWorkflowDesignerSave = async (schema: FormSchema) => {
    console.log('🔄 保存的工作流表单 Schema:', JSON.stringify(schema, null, 2));
    message.success('工作流表单设计已保存！请查看控制台');
    setWorkflowPreviewSchema(schema);
    // 实际项目中这里会调用后端 API 保存
    // await workflowFormService.save(schema);
  };

  const [workflowPreviewSchema, setWorkflowPreviewSchema] = useState<FormSchema>();

  // ==================== 示例 2: 表单渲染器（静态） ====================
  const [previewSchema, setPreviewSchema] = useState<FormSchema>();

  const handleStaticFormSubmit = async (data: Record<string, any>) => {
    console.log('📤 静态表单提交数据:', data);
    message.success('表单提交成功！请查看控制台');
  };

  // ==================== 示例 3: 工作流表单（弹窗） ====================
  const [workflowModalVisible, setWorkflowModalVisible] = useState(false);

  const workflowFormSchema: FormSchema = {
    version: '1.0',
    formConfig: { 
      labelAlign: 'right', 
      size: 'middle', 
      formWidth: 600 
    },
    fields: [
      { 
        id: 'wf_field_1', 
        type: 'input', 
        label: '工作流名称', 
        name: 'workflowName', 
        placeholder: '请输入工作流名称', 
        required: true 
      },
      { 
        id: 'wf_field_2', 
        type: 'select', 
        label: '目标环境', 
        name: 'environment', 
        placeholder: '请选择环境', 
        required: true,
        dataSourceType: 'static',
        options: [
          { label: '开发环境', value: 'dev' }, 
          { label: '测试环境', value: 'test' },
          { label: '生产环境', value: 'prod' }
        ]
      },
      { 
        id: 'wf_field_3', 
        type: 'textarea', 
        label: '执行说明', 
        name: 'description', 
        placeholder: '请输入执行说明',
        rows: 4
      },
    ],
  };

  const handleWorkflowSubmit = async (data: Record<string, any>) => {
    console.log('🚀 工作流启动参数:', data);
    message.success('工作流已启动！');
    setWorkflowModalVisible(false);
  };

  // ==================== 示例 4: 只读模式 ====================
  const readonlySchema: FormSchema = {
    version: '1.0',
    formConfig: { 
      labelAlign: 'right', 
      size: 'middle', 
      formWidth: 600 
    },
    fields: [
      { 
        id: 'ro_field_1', 
        type: 'input', 
        label: '申请人', 
        name: 'applicant'
      },
      { 
        id: 'ro_field_2', 
        type: 'date', 
        label: '申请日期', 
        name: 'applyDate'
      },
      { 
        id: 'ro_field_3', 
        type: 'select', 
        label: '审批状态', 
        name: 'approvalStatus',
        dataSourceType: 'static',
        options: [
          { label: '待审批', value: 'pending' },
          { label: '已通过', value: 'approved' }, 
          { label: '已拒绝', value: 'rejected' }
        ]
      },
      { 
        id: 'ro_field_4', 
        type: 'textarea', 
        label: '审批意见', 
        name: 'approvalComment'
      },
    ],
  };

  const readonlyData = {
    applicant: '张三',
    applyDate: '2024-07-20',
    approvalStatus: 'approved',
    approvalComment: '同意申请，准予执行。',
  };

  // ==================== 示例 5: 复杂表单（带栅格布局） ====================
  
  const complexFormSchema: FormSchema = {
    version: '1.0',
    formConfig: { 
      labelAlign: 'right', 
      size: 'middle', 
      formWidth: 800,
      title: '用户信息登记表'
    },
    fields: [
      {
        id: 'grid_1',
        type: 'grid',
        label: '基本信息',
        name: 'grid_basic',
        columns: 2,
        columnSpans: [12, 12],
        gutter: 16,
        children: [
          [
            { id: 'f1', type: 'input', label: '姓名', name: 'name', placeholder: '请输入姓名', required: true },
            { id: 'f2', type: 'number', label: '年龄', name: 'age', placeholder: '请输入年龄', min: 1, max: 150 },
          ],
          [
            { id: 'f3', type: 'radio', label: '性别', name: 'gender', dataSourceType: 'static', options: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }] },
            { id: 'f4', type: 'date', label: '出生日期', name: 'birthday', placeholder: '请选择日期' },
          ],
        ],
      },
      {
        id: 'grid_2',
        type: 'grid',
        label: '联系方式',
        name: 'grid_contact',
        columns: 2,
        columnSpans: [12, 12],
        gutter: 16,
        children: [
          [
            { id: 'f5', type: 'input', label: '手机号', name: 'phone', placeholder: '请输入手机号' },
            { id: 'f6', type: 'input', label: '邮箱', name: 'email', placeholder: '请输入邮箱' },
          ],
          [
            { id: 'f7', type: 'input', label: '微信', name: 'wechat', placeholder: '请输入微信号' },
            { id: 'f8', type: 'input', label: 'QQ', name: 'qq', placeholder: '请输入QQ号' },
          ],
        ],
      },
      {
        id: 'f9',
        type: 'textarea',
        label: '个人简介',
        name: 'bio',
        placeholder: '请输入个人简介',
        rows: 4,
      },
    ],
  };

  const handleComplexFormSubmit = async (data: Record<string, any>) => {
    console.log('📋 复杂表单提交数据:', data);
    message.success('表单提交成功！');
  };

  // ==================== 示例 6: 带生命周期钩子的表单 ====================
  const lifecycleFormSchema: FormSchema = {
    version: '1.0',
    formConfig: { 
      labelAlign: 'right', 
      size: 'middle', 
      formWidth: 600 
    },
    fields: [
      { 
        id: 'lc_field_1', 
        type: 'input', 
        label: '用户名', 
        name: 'username', 
        placeholder: '请输入用户名', 
        required: true 
      },
      { 
        id: 'lc_field_2', 
        type: 'input', 
        label: '邮箱', 
        name: 'email', 
        placeholder: '请输入邮箱', 
        required: true,
        validationRules: [
          { type: 'email', message: '请输入有效的邮箱地址' }
        ]
      },
      { 
        id: 'lc_field_3', 
        type: 'select', 
        label: '用户角色', 
        name: 'role', 
        placeholder: '请选择角色', 
        required: true,
        dataSourceType: 'static',
        options: [
          { label: '管理员', value: 'admin' }, 
          { label: '普通用户', value: 'user' },
          { label: '访客', value: 'guest' }
        ]
      },
    ],
  };

  const handleLifecycleBeforeSubmit = async (values: Record<string, any>) => {
    console.log('🎣 beforeSubmit 钩子被调用:', values);
    
    // 模拟数据处理
    const processedValues = {
      ...values,
      email: values.email?.toLowerCase(), // 邮箱转小写
      submitTime: new Date().toISOString(), // 添加提交时间
    };
    
    message.info('正在处理表单数据...');
    await new Promise(resolve => setTimeout(resolve, 500));
    
    console.log('✅ beforeSubmit 处理完成，返回修改后的数据:', processedValues);
    return processedValues;
  };

  const handleLifecycleSubmit = async (data: Record<string, any>) => {
    console.log('📤 提交到服务器:', data);
    
    // 模拟 API 调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    const response = { id: Math.random(), success: true, data };
    console.log('✅ 服务器响应:', response);
    message.success('用户创建成功！');
    
    return response;
  };

  const handleLifecycleAfterSubmit = async (response: any) => {
    console.log('🎣 afterSubmit 钩子被调用，服务器响应:', response);
    
    // 模拟后续操作（如跳转、刷新列表等）
    await new Promise(resolve => setTimeout(resolve, 300));
    
    message.success(`用户 ID: ${response.id.toFixed(0)} 已成功创建`);
    console.log('✅ afterSubmit 完成，可以执行跳转或刷新操作');
  };

  const handleLifecycleError = async (error: any) => {
    console.error('🎣 onError 钩子被调用:', error);
    
    // 可以在这里做错误上报、记录等
    message.error(`操作失败: ${error.message || '未知错误'}`);
  };

  // ==================== Tab 配置 ====================
  const tabItems = [
    {
      key: '1',
      label: '📝 示例 1: 普通表单设计器',
      children: (
        <Card>
          <h2>普通表单设计器（FormDesigner）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            可视化拖拽设计表单，支持导入/导出 JSON Schema，支持字段属性配置、验证规则、联动规则等。
          </p>
          <Alert
            message="核心组件列表"
            description="此设计器仅包含核心表单组件（输入框、下拉框、日期等），不包含工作流扩展字段。"
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <Divider />
          <FormDesigner
            value={designerSchema}
            onChange={setDesignerSchema}
            onSave={handleDesignerSave}
          />
        </Card>
      ),
    },
    {
      key: '1.5',
      label: '🔄 示例 1.5: 工作流表单设计器',
      children: (
        <Card>
          <h2>工作流表单设计器（带审批字段）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            通过 <code>extraComponents</code> 参数注入工作流扩展字段（审批人选择器等），实现插件式扩展。
          </p>
          <Alert
            message="🔌 插件式架构展示"
            description={
              <div>
                <p>✅ 核心组件 + 工作流扩展组件（审批人选择器）</p>
                <p>✅ 左侧"高级字段"分类中可以看到"审批人"组件</p>
                <p>✅ 拖拽到画布后，右侧显示完整的审批配置（9项）</p>
                <p>✅ 支持审批模式、审批人类型、超时设置等</p>
              </div>
            }
            type="success"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <div style={{ 
            padding: 12, 
            background: '#f5f5f5', 
            borderRadius: 4, 
            marginBottom: 16,
            fontFamily: 'monospace',
            fontSize: 12 
          }}>
            <strong>使用方式:</strong><br />
            {`<FormDesigner`}<br />
            {`  value={schema}`}<br />
            {`  onChange={setSchema}`}<br />
            {`  extraComponents={WORKFLOW_COMPONENTS}`}<br />
            {`/>`}
          </div>
          <Divider />
          <FormDesigner
            value={workflowDesignerSchema}
            onChange={setWorkflowDesignerSchema}
            onSave={handleWorkflowDesignerSave}
            extraComponents={WORKFLOW_COMPONENTS}
          />
        </Card>
      ),
    },
    {
      key: '2',
      label: '🎨 示例 2: 普通表单渲染',
      children: (
        <Card>
          <h2>表单渲染器（普通表单）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            根据设计器保存的 Schema 渲染表单，支持数据收集、验证和提交。
          </p>
          <Divider />
          <Alert
            message="✅ 正确用法"
            description="FormRenderer 现在是非受控组件，不需要传递 value 和 onChange。表单内部自动管理状态，onSubmit 会返回完整数据。"
            type="success"
            showIcon
            style={{ marginBottom: 16 }}
          />
          {previewSchema ? (
            <FormRenderer
              schema={previewSchema}
              onSubmit={handleStaticFormSubmit}
              showSubmit
              showCancel
            />
          ) : (
            <div style={{ padding: 40, textAlign: 'center', color: '#999' }}>
              请先在"示例 1"中设计表单并保存
            </div>
          )}
        </Card>
      ),
    },
    {
      key: '2.5',
      label: '🔄 示例 2.5: 工作流表单渲染',
      children: (
        <Card>
          <h2>工作流表单渲染（带审批字段）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            渲染包含审批字段的表单，必须传递 <code>extraComponents</code> 参数以支持扩展组件。
          </p>
          <Alert
            message="重要提示"
            description="使用 FormRenderer 渲染包含扩展字段的表单时，必须传递 extraComponents={WORKFLOW_COMPONENTS}，否则扩展字段无法正确渲染。"
            type="warning"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <Alert
            message="✅ 下拉框可选中"
            description="FormRenderer 现已修复，下拉框可以正常选中。不需要传递 value 和 onChange，表单内部自动管理状态。"
            type="success"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <Divider />
          {workflowPreviewSchema ? (
            <FormRenderer
              schema={workflowPreviewSchema}
              extraComponents={WORKFLOW_COMPONENTS}
              onSubmit={async (data) => {
                console.log('🔄 工作流表单提交数据:', data);
                message.success('工作流表单提交成功！');
              }}
              showSubmit
              showCancel
            />
          ) : (
            <div style={{ padding: 40, textAlign: 'center', color: '#999' }}>
              请先在"示例 1.5"中设计工作流表单并保存
            </div>
          )}
        </Card>
      ),
    },
    {
      key: '3',
      label: '🚀 示例 3: 工作流表单',
      children: (
        <Card>
          <h2>工作流表单（弹窗模式）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            模拟工作流启动场景，在 Modal 中使用表单渲染器收集参数。
          </p>
          <Divider />
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <div>
              <h3>使用场景</h3>
              <ul>
                <li>工作流启动参数收集</li>
                <li>任务审批表单</li>
                <li>快捷操作弹窗</li>
              </ul>
            </div>
            <Button type="primary" size="large" onClick={() => setWorkflowModalVisible(true)}>
              启动工作流
            </Button>
          </Space>
          <Modal
            title="启动工作流"
            open={workflowModalVisible}
            onCancel={() => setWorkflowModalVisible(false)}
            footer={null}
            width={workflowFormSchema.formConfig.formWidth || 600}
          >
            <FormRenderer
              schema={workflowFormSchema}
              onSubmit={handleWorkflowSubmit}
              onCancel={() => setWorkflowModalVisible(false)}
              showCancel
              submitText="启动"
              cancelText="取消"
            />
          </Modal>
        </Card>
      ),
    },
    {
      key: '4',
      label: '👁️ 示例 4: 只读模式',
      children: (
        <Card>
          <h2>只读模式</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            查看已提交的表单数据，所有字段禁用编辑，不显示提交按钮。
          </p>
          <Divider />
          <div>
            <h3>使用场景</h3>
            <ul>
              <li>审批流程详情查看</li>
              <li>历史数据展示</li>
              <li>表单归档查看</li>
            </ul>
          </div>
          <Divider />
          <FormRenderer
            schema={readonlySchema}
            value={readonlyData}
            readonly={true}
          />
        </Card>
      ),
    },
    {
      key: '5',
      label: '📋 示例 5: 复杂表单',
      children: (
        <Card>
          <h2>复杂表单（带栅格布局）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            展示包含栅格布局的复杂表单，支持多列排版。
          </p>
          <Divider />
          <FormRenderer
            schema={complexFormSchema}
            onSubmit={handleComplexFormSubmit}
            showSubmit
            showCancel
          />
        </Card>
      ),
    },
    {
      key: '6',
      label: '🎣 示例 6: 生命周期钩子',
      children: (
        <Card>
          <h2>生命周期钩子（beforeSubmit / afterSubmit / onError）</h2>
          <p style={{ marginBottom: 16, color: '#666' }}>
            演示表单提交的完整生命周期钩子，支持数据预处理、提交后处理和错误处理。
          </p>
          <Alert
            message="🎣 生命周期钩子"
            description={
              <div>
                <p><strong>beforeSubmit</strong>: 提交前处理，可修改数据或取消提交（返回 false）</p>
                <p><strong>onSubmit</strong>: 执行实际提交操作</p>
                <p><strong>afterSubmit</strong>: 提交成功后的处理（跳转、刷新等）</p>
                <p><strong>onError</strong>: 错误处理（验证失败、提交失败等）</p>
              </div>
            }
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <div style={{ 
            padding: 12, 
            background: '#f5f5f5', 
            borderRadius: 4, 
            marginBottom: 16,
            fontFamily: 'monospace',
            fontSize: 12 
          }}>
            <strong>使用方式:</strong><br />
            {`<FormRenderer`}<br />
            {`  schema={schema}`}<br />
            {`  beforeSubmit={async (values) => {`}<br />
            {`    // 数据预处理`}<br />
            {`    return modifiedValues;`}<br />
            {`  }}`}<br />
            {`  onSubmit={async (data) => {`}<br />
            {`    // 提交到服务器`}<br />
            {`    return response;`}<br />
            {`  }}`}<br />
            {`  afterSubmit={async (response) => {`}<br />
            {`    // 提交后处理`}<br />
            {`  }}`}<br />
            {`  onError={async (error) => {`}<br />
            {`    // 错误处理`}<br />
            {`  }}`}<br />
            {`/>`}
          </div>
          <Divider />
          <FormRenderer
            schema={lifecycleFormSchema}
            beforeSubmit={handleLifecycleBeforeSubmit}
            onSubmit={handleLifecycleSubmit}
            afterSubmit={handleLifecycleAfterSubmit}
            onError={handleLifecycleError}
            showSubmit
            showCancel
          />
          <Alert
            message="📝 提示"
            description="打开浏览器控制台查看完整的钩子执行流程，包括 beforeSubmit、onSubmit、afterSubmit 的详细日志输出。"
            type="success"
            showIcon
            style={{ marginTop: 16 }}
          />
        </Card>
      ),
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <h1>FormDesigner 组件使用示例</h1>
        <p style={{ color: '#666', fontSize: 14 }}>
          本页面展示如何使用 <code>@/components/FormDesigner</code> 中的 <strong>FormDesigner</strong> 和 <strong>FormRenderer</strong> 组件。
        </p>
      </div>
      <Tabs defaultActiveKey="1" items={tabItems} />
    </div>
  );
};

export default FormDesignerExamplesPage;