/**
 * 表单预览组件
 * 独立的表单预览组件，支持完整的表单交互和验证
 * 
 * 特点：
 * - ✅ 完全独立，可在任何地方使用
 * - ✅ 支持所有表单字段类型
 * - ✅ 支持验证规则和联动规则
 * - ✅ 支持动态数据源（API、预定义）
 * - ✅ 非受控组件，内部管理状态
 * 
 * @example
 * ```tsx
 * // 使用示例
 * import { FormPreview, FormPreviewRef } from '@/components/FormDesigner';
 * 
 * const MyComponent = () => {
 *   const previewRef = useRef<FormPreviewRef>(null);
 *   
 *   // 从后端获取表单定义
 *   const formSchema = await getFormDefinitionById(id);
 *   
 *   return (
 *     <FormPreview 
 *       ref={previewRef}
 *       fields={formSchema.fields}
 *       formConfig={formSchema.formConfig}
 *     />
 *   );
 * };
 * ```
 */

import { useImperativeHandle, forwardRef } from 'react';
import { Form, message } from 'antd';
import type { FieldConfig, FormConfig } from './types';
import { useFormCore } from './hooks/useFormCore';
import { computeFormLayout } from './utils/formLayoutHelper';
import { transformToNestedObject } from './utils/pathHelper';
import FormFieldsRenderer from './components/FormFieldsRenderer';
import './styles.css';

/**
 * 表单预览组件的 Props
 */
export interface FormPreviewProps {
  /** 字段列表 */
  fields: FieldConfig[];
  /** 表单配置 */
  formConfig: FormConfig;
}

/**
 * 表单预览组件暴露的方法
 */
export interface FormPreviewRef {
  /** 提交表单（触发验证） */
  submit: () => Promise<void>;
  /** 重置表单 */
  reset: () => void;
}

const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, formConfig }, ref) => {
  const [form] = Form.useForm();
  
  // 使用核心 hook 管理表单状态
  const { formData, setFormData, fieldStates, handleValuesChange: coreHandleValuesChange } = useFormCore({ fields, form });

  // 🎯 自定义值变化处理：实时转换为嵌套对象
  const handleValuesChange = (changedValues: any, allValues: any) => {
    // 先调用核心的处理逻辑（联动规则等）
    coreHandleValuesChange(changedValues, allValues);
    
    // 实时转换为嵌套对象并更新显示
    const nestedValues = transformToNestedObject(allValues);
    setFormData(nestedValues);
  };

  const handleSubmit = async () => {
    try {
      const flatValues = await form.validateFields();
      console.log('📋 表单验证通过（扁平格式）:', flatValues);
      
      // 🎯 路径转换：将扁平数据转换为嵌套对象
      const nestedValues = transformToNestedObject(flatValues);
      console.log('🔄 转换为嵌套对象:', nestedValues);
      
      setFormData(nestedValues);
      message.success('表单提交成功！请查看控制台');
    } catch (error) {
      // ✅ 验证失败 - 不显示弹窗，让表单元素自己显示错误即可
      console.error('❌ 表单验证失败:', error);
    }
  };

  const handleReset = () => {
    form.resetFields();
    setFormData({});
    message.info('表单已重置');
  };

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    submit: handleSubmit,
    reset: handleReset,
  }));


  if (fields.length === 0) {
    return (
      <div className="form-empty-state">
        表单为空
      </div>
    );
  }

  const layoutConfig = computeFormLayout(formConfig);

  return (
    <div className="form-container-padding form-preview-compact">
      <Form
        form={form}
        layout={layoutConfig.layout}
        size={formConfig.size}
        colon={true}
        labelAlign={layoutConfig.labelAlign}
        labelCol={layoutConfig.labelCol}
        wrapperCol={layoutConfig.wrapperCol}
        onValuesChange={handleValuesChange}
      >
        {formConfig.title && (
          <h3 style={{ marginBottom: 24 }}>{formConfig.title}</h3>
        )}

        <FormFieldsRenderer
          fields={fields}
          formConfig={formConfig}
          fieldStates={fieldStates}
        />
      </Form>

      {Object.keys(formData).length > 0 && (
        <div className="form-data-display">
          <h4>表单数据：</h4>
          <pre>{JSON.stringify(formData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
});

FormPreview.displayName = 'FormPreview';

export default FormPreview;

