import React, { useState, useEffect } from 'react';

interface BasicInfoProps {
  onChange?: (data: Record<string, unknown>) => void;
  initialData?: FormDataType;
  evaluationPointGroups?: Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>;
}

// 定义表单数据类型
interface FormDataType {
  name: string;
  code: string;
  risk: string;
  is_enabled: boolean;
  description: string;
  references_laws: {
    name: string;
    articles: string[];
    content: string;
  };
  evaluation_point_groups_id: number | null;
  evaluation_point_groups_pid: number | null;
  type: string;
  id?: number;
}

export function BasicInfo({ onChange, initialData, evaluationPointGroups = [] }: BasicInfoProps) {
  const [formData, setFormData] = useState<FormDataType>({
    name: '',
    code: '',
    risk: 'medium',
    is_enabled: true,
    description: '',
    references_laws: {
      name: '',
      articles: [],
      content: ''
    },
    evaluation_point_groups_id: null,
    evaluation_point_groups_pid: null,
    type: ''
  });

  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const [lawArticlesInput, setLawArticlesInput] = useState('');
  const [filteredRuleGroups, setFilteredRuleGroups] = useState<Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>>([]);

  // 当initialData变化时更新表单数据
  useEffect(() => {
    if (initialData) {
      const newFormData = {
        name: initialData.name || '',
        code: initialData.code || '',
        risk: initialData.risk || 'medium',
        is_enabled: initialData.is_enabled !== undefined ? initialData.is_enabled : true,
        description: initialData.description || '',
        references_laws: initialData.references_laws || {
          name: '',
          articles: [],
          content: ''
        },
        evaluation_point_groups_id: initialData.evaluation_point_groups_id || null,
        evaluation_point_groups_pid: initialData.evaluation_point_groups_pid || null,
        type: initialData.type || ''
      };
      
      setFormData(newFormData);
      
      // 更新法律条款输入框
      if (initialData.references_laws && Array.isArray(initialData.references_laws.articles)) {
        setLawArticlesInput(initialData.references_laws.articles.join(','));
      }
      
      // 如果有描述或法律依据，默认展开详细信息
      if (initialData.description || 
          (initialData.references_laws && 
           (initialData.references_laws.name || 
            initialData.references_laws.content || 
            (initialData.references_laws.articles && initialData.references_laws.articles.length > 0)))) {
        setIsDescExpanded(true);
      }
    }
  }, [initialData]);

  // 当评查点类型或评查点组数据变化时，过滤规则组列表
  useEffect(() => {
    if (evaluationPointGroups && evaluationPointGroups.length > 0) {
      console.log("评查点组数据更新，当前类型:", formData.type);
      console.log("评查点组数据:", evaluationPointGroups);
      
      if (formData.type) {
        // 获取所选评查点类型的组ID
        const typeGroup = evaluationPointGroups.find(group => 
          group.pid === 0 && 
          group.code === formData.type
        );
        
        console.log("找到的类型组:", typeGroup);
        
        if (typeGroup) {
          // 更新评查点类型组ID
          if (formData.evaluation_point_groups_pid !== typeGroup.id) {
            const newData = { 
              ...formData, 
              evaluation_point_groups_pid: typeGroup.id 
            };
            setFormData(newData);
            if (onChange) onChange(newData);
          }
          
          // 过滤出属于该类型的规则组（pid等于类型组ID的项）
          const groups = evaluationPointGroups.filter(group => 
            group.pid === typeGroup.id && 
            group.is_enabled
          );
          console.log("过滤后的规则组:", groups);
          setFilteredRuleGroups(groups);
          
          // 如果当前选择的规则组不在过滤结果中，重置选择
          if (formData.evaluation_point_groups_id && 
              !groups.some(group => group.id === formData.evaluation_point_groups_id)) {
            console.log("当前选择的规则组不在过滤结果中，重置选择");
            const newData = { 
              ...formData, 
              evaluation_point_groups_id: null 
            };
            setFormData(newData);
            if (onChange) onChange(newData);
          }
        } else {
          console.log("未找到对应的类型组");
          setFilteredRuleGroups([]);
          
          // 重置评查点类型组ID
          if (formData.evaluation_point_groups_pid !== null) {
            const newData = { 
              ...formData, 
              evaluation_point_groups_pid: null 
            };
            setFormData(newData);
            if (onChange) onChange(newData);
          }
        }
      } else {
        console.log("未选择评查点类型");
        setFilteredRuleGroups([]);
        
        // 重置评查点类型组ID
        if (formData.evaluation_point_groups_pid !== null) {
          const newData = { 
            ...formData, 
            evaluation_point_groups_pid: null 
          };
          setFormData(newData);
          if (onChange) onChange(newData);
        }
      }
    }
  }, [formData.type, evaluationPointGroups, formData.evaluation_point_groups_id, formData.evaluation_point_groups_pid, onChange]);

  // 获取评查点类型选项（pid=0的数据）
  const getCheckpointTypeOptions = () => {
    if (!evaluationPointGroups || evaluationPointGroups.length === 0) {
      console.log("无评查点组数据，使用默认类型选项");
      return (
        <>
          <option value="">请选择评查点类型</option>
          <option value="essential">基本要素类</option>
          <option value="content">内容合规类</option>
          <option value="format">格式规范类</option>
          <option value="legal">法律风险类</option>
          <option value="business">业务专项类</option>
        </>
      );
    }
    
    const typeGroups = evaluationPointGroups.filter(group => group.pid === 0 && group.is_enabled);
    console.log("可用的评查点类型:", typeGroups);
    
    return (
      <>
        <option value="">请选择评查点类型</option>
        {typeGroups.map(group => (
          <option key={group.id} value={group.code}>
            {group.name}
          </option>
        ))}
      </>
    );
  };

  const handleToggleDescription = () => {
    setIsDescExpanded(!isDescExpanded);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { id, value } = e.target;
    const newData = { ...formData };
    
    // 映射id到表单字段名
    switch(id) {
      case 'rule-name': 
        newData.name = value;
        break;
      case 'rule-code': 
        newData.code = value;
        break;
      case 'risk-level': 
        newData.risk = value;
        break;
      case 'is-enabled': 
        newData.is_enabled = value === 'true';
        break;
      case 'rule-description': 
        newData.description = value;
        break;
      case 'law-name': 
        newData.references_laws.name = value;
        break;
      case 'law-content': 
        newData.references_laws.content = value;
        break;
      case 'law-articles':
        setLawArticlesInput(value);
        break;
      case 'evaluation-point-group':
        newData.evaluation_point_groups_id = value ? parseInt(value) : null;
        break;
      case 'checkpoint-type':
        newData.type = value;
        // 重置规则组选择
        newData.evaluation_point_groups_id = null;
        
        // 设置评查点类型组ID
        if (value) {
          const typeGroup = evaluationPointGroups.find(group => 
            group.pid === 0 && 
            group.code === value
          );
          newData.evaluation_point_groups_pid = typeGroup ? typeGroup.id : null;
        } else {
          newData.evaluation_point_groups_pid = null;
        }
        break;
    }
    
    setFormData(newData);
    
    if (onChange) {
      onChange(newData);
    }
  };

  const handleLawArticlesChange = (value: string) => {
    setLawArticlesInput(value);
    const articles = value.split(',')
      .map(article => article.trim())
      .filter(article => article !== '');
      
    const newData = {
      ...formData,
      references_laws: {
        ...formData.references_laws,
        articles
      }
    };
    
    setFormData(newData);
    
    if (onChange) {
      onChange(newData);
    }
  };

  return (
    <div className="ant-card">
      <div className="ant-card-header">
        <h3>基本信息</h3>
      </div>
      <div className="ant-card-body">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label className="form-label" htmlFor="rule-name">
              评查点名称 <span className="required-mark">*</span>
            </label>
            <input
              type="text"
              id="rule-name"
              className="form-input"
              placeholder="请输入评查点名称，简洁明了"
              value={formData.name}
              onChange={handleInputChange}
            />
            <div className="form-tip">请使用简洁明了的名称，不超过30个字符</div>
          </div>
          <div>
            <label className="form-label" htmlFor="rule-code">
              评查点编码 <span className="required-mark">*</span>
            </label>
            <input
              type="text"
              id="rule-code"
              className="form-input"
              placeholder="请输入评查点编码"
              value={formData.code}
              onChange={handleInputChange}
            />
            <div className="form-tip">用于系统标识的唯一编码</div>
          </div>
          <div>
            <label className="form-label" htmlFor="risk-level">
              风险等级： <span className="required-mark">*</span>
            </label>
            <select 
              id="risk-level" 
              className="form-select"
              value={formData.risk}
              onChange={handleInputChange}
            >
              <option value="high">高风险</option>
              <option value="medium">中风险</option>
              <option value="low">低风险</option>
            </select>
            <div className="form-tip">请定义评查点的风险等级</div>
          </div>
          <div>
            <label className="form-label" htmlFor="checkpoint-type">
              评查点类型 <span className="required-mark">*</span>
            </label>
            <select 
              id="checkpoint-type" 
              className="form-select"
              value={formData.type}
              onChange={handleInputChange}
            >
              {getCheckpointTypeOptions()}
            </select>
            <div className="form-tip">评查点类型用于分类管理，便于规则统一调用</div>
          </div>
          <div>
            <label className="form-label" htmlFor="evaluation-point-group">
              所属规则组 <span className="required-mark">*</span>
            </label>
            <select 
              id="evaluation-point-group" 
              className={`form-select ${!formData.type || filteredRuleGroups.length === 0 ? 'bg-gray-100 cursor-not-allowed' : ''}`}
              value={formData.evaluation_point_groups_id?.toString() || ""}
              onChange={handleInputChange}
              disabled={!formData.type || filteredRuleGroups.length === 0}
            >
              <option value="">
                {!formData.type ? "请先选择评查点类型" : 
                 filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" : 
                 "请选择规则组"}
              </option>
              {filteredRuleGroups.map(group => (
                <option key={group.id} value={group.id.toString()}>
                  {group.name}
                </option>
              ))}
            </select>
            <div className="form-tip">
              {!formData.type ? "请先选择评查点类型" : 
               filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" : 
               "选择评查点所属的规则组"}
            </div>
          </div>
          <div>
            <label className="form-label" htmlFor="is-enabled">是否启用</label>
            <select 
              id="is-enabled" 
              className="form-select"
              value={formData.is_enabled ? 'true' : 'false'}
              onChange={handleInputChange}
            >
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
            <div className="form-tip">创建后是否立即启用此评查点</div>
          </div>
        </div>
        
        <div className="mt-8">
          <div 
            className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
            onClick={handleToggleDescription}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                handleToggleDescription();
              }
            }}
            tabIndex={0}
            role="button"
          >
            <label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
            <i className={`ri-arrow-${isDescExpanded ? 'up' : 'down'}-s-line text-lg expand-icon`}></i>
          </div>
          
          <div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
            <div className="mb-4">
              <textarea
                id="rule-description"
                className="form-textarea"
                placeholder="请输入评查点的详细描述"
                style={{ minHeight: '80px' }}
                value={formData.description}
                onChange={handleInputChange}
              ></textarea>
              <div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
            </div>

            {/* 引用法典输入区域 */}
            <div className="mb-4">
              <label className="form-label" htmlFor="law-section">引用法典</label>
              
              <div className="mb-3" id="law-section">
                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
                <input 
                  type="text" 
                  className="form-input" 
                  placeholder="例如：《中华人民共和国民法典》" 
                  id="law-name" 
                  value={formData.references_laws.name}
                  onChange={handleInputChange}
                />
              </div>
              
              <div className="mb-3">
                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
                <input 
                  type="text" 
                  className="form-input" 
                  placeholder="例如：第五百八十五条,第五百八十六条" 
                  id="law-articles" 
                  value={lawArticlesInput}
                  onChange={(e) => handleLawArticlesChange(e.target.value)}
                />
                <div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
              </div>
              
              <div className="mb-4">
                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
                <textarea 
                  className="form-textarea" 
                  style={{ minHeight: '60px' }} 
                  placeholder="例如：当事人应当按照约定全面履行自己的义务。" 
                  id="law-content"
                  value={formData.references_laws.content}
                  onChange={handleInputChange}
                ></textarea>
              </div>
              
              <div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
                <i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
              </div>
              
              {/* 预览区域 */}
              <div className="mt-3">
                <div className="text-sm font-medium mb-2">预览效果</div>
                <div className="law-reference">
                  <div className="law-reference-title" id="preview-law-name">
                    {formData.references_laws.name || '《中华人民共和国民法典》'}
                  </div>
                  <div className="law-reference-articles" id="preview-law-articles">
                    {formData.references_laws.articles.length > 0 ? 
                      formData.references_laws.articles.map((article, index) => (
                        <span key={index} className="law-article">{article}</span>
                      )) : (
                      <>
                        <span className="law-article">第五百八十五条</span>
                        <span className="law-article">第五百八十六条</span>
                      </>
                    )}
                  </div>
                  <div className="law-reference-content" id="preview-law-content">
                    {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}