import React, { useState, useEffect } from 'react';
import { PencilIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { SegmentMatchingRule, SegmentMatchingRuleHelper } from '../../types/template';
import { AiClassification } from '../../types/aiClassification';
import { useTemplateStore } from '../../stores/templateStore';
import { CustomSelect } from '../CustomSelect';
import { AiClassificationService } from '../../services/aiClassificationService';
import { TemplateSegmentWeightService } from '../../services/templateSegmentWeightService';

interface SegmentMatchingRuleEditorProps {
  segmentId: string;
  currentRule: SegmentMatchingRule;
  templateId?: string; // 添加模板ID用于权重配置
  onRuleUpdated?: (newRule: SegmentMatchingRule) => void;
}

/**
 * 片段匹配规则编辑器组件
 * 遵循前端开发规范的组件设计，支持固定素材和AI分类规则的设置
 */
export const SegmentMatchingRuleEditor: React.FC<SegmentMatchingRuleEditorProps> = ({
  segmentId,
  currentRule,
  templateId,
  onRuleUpdated,
}) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editingRule, setEditingRule] = useState<SegmentMatchingRule>(currentRule);
  const [aiClassifications, setAiClassifications] = useState<AiClassification[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 权重配置相关状态
  const [editingWeights, setEditingWeights] = useState<Record<string, number>>({});

  const { updateSegmentMatchingRule } = useTemplateStore();

  // 加载AI分类列表
  useEffect(() => {
    const loadClassifications = async () => {
      try {
        const classifications = await AiClassificationService.getActiveClassifications();
        setAiClassifications(classifications);
      } catch (error) {
        console.error('加载AI分类失败:', error);
      }
    };

    if (isEditing) {
      loadClassifications();
    }
  }, [isEditing]);

  // 加载权重数据
  useEffect(() => {
    const loadWeightData = async () => {
      if (!templateId) return;

      try {
        if (SegmentMatchingRuleHelper.isPriorityOrder(editingRule)) {
          const selectedCategoryIds = typeof editingRule === 'object' && 'PriorityOrder' in editingRule
            ? editingRule.PriorityOrder.category_ids
            : [];

          if (selectedCategoryIds.length > 0) {
            // 只加载选中分类的权重
            const weights = await TemplateSegmentWeightService.getSegmentWeightsForCategories(
              templateId,
              segmentId,
              selectedCategoryIds
            );
            setEditingWeights({ ...weights });
          } else {
            setEditingWeights({});
          }
        }
      } catch (error) {
        console.error('Failed to load weight data:', error);
      }
    };

    if (isEditing && templateId && SegmentMatchingRuleHelper.isPriorityOrder(editingRule)) {
      loadWeightData();
    }
  }, [isEditing, templateId, segmentId, editingRule]);

  // 重置编辑状态
  useEffect(() => {
    setEditingRule(currentRule);
    setError(null);
  }, [currentRule, isEditing]);

  const handleStartEdit = () => {
    setIsEditing(true);
    setEditingRule(currentRule);
    setError(null);
  };

  const handleCancelEdit = () => {
    setIsEditing(false);
    setEditingRule(currentRule);
    setError(null);
  };

  const handleSaveRule = async () => {
    try {
      setLoading(true);
      setError(null);

      // 保存匹配规则
      await updateSegmentMatchingRule(segmentId, editingRule);

      // 如果是按顺序匹配规则且有模板ID，同时保存权重配置
      if (SegmentMatchingRuleHelper.isPriorityOrder(editingRule) && templateId) {
        try {
          // 获取当前选中的分类ID
          const selectedCategoryIds = typeof editingRule === 'object' && 'PriorityOrder' in editingRule
            ? editingRule.PriorityOrder.category_ids
            : [];

          // 只保存选中分类的权重，过滤掉未选中的分类
          const selectedWeights = Object.fromEntries(
            Object.entries(editingWeights).filter(([classificationId]) =>
              selectedCategoryIds.includes(classificationId)
            )
          );

          await TemplateSegmentWeightService.setSegmentWeights(
            templateId,
            segmentId,
            selectedWeights
          );
        } catch (weightError) {
          console.error('保存权重配置失败:', weightError);
          // 权重保存失败不阻止规则保存
        }
      }

      setIsEditing(false);
      onRuleUpdated?.(editingRule);
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '保存匹配规则失败';
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  const handleRuleTypeChange = (ruleType: string) => {
    if (ruleType === 'fixed') {
      setEditingRule(SegmentMatchingRuleHelper.createFixedMaterial());
    } else if (ruleType === 'ai_classification') {
      // 如果有可用的AI分类，选择第一个作为默认值
      if (aiClassifications.length > 0) {
        const firstClassification = aiClassifications[0];
        setEditingRule(SegmentMatchingRuleHelper.createAiClassification(
          firstClassification.id,
          firstClassification.name
        ));
      }
    } else if (ruleType === 'random') {
      setEditingRule(SegmentMatchingRuleHelper.createRandomMatch());
    } else if (ruleType === 'priority_order') {
      // 默认选择所有激活的AI分类
      const categoryIds = aiClassifications.map(c => c.id);
      setEditingRule(SegmentMatchingRuleHelper.createPriorityOrder(categoryIds));
    }
  };

  const handleAiClassificationChange = (classificationId: string) => {
    const classification = aiClassifications.find(c => c.id === classificationId);
    if (classification) {
      setEditingRule(SegmentMatchingRuleHelper.createAiClassification(
        classification.id,
        classification.name
      ));
    }
  };

  const handlePriorityOrderChange = (categoryId: string, isSelected: boolean) => {
    if (typeof editingRule === 'object' && 'PriorityOrder' in editingRule) {
      const currentCategoryIds = editingRule.PriorityOrder.category_ids;
      let newCategoryIds: string[];

      if (isSelected) {
        // 添加分类ID
        newCategoryIds = [...currentCategoryIds, categoryId];
        // 为新选中的分类设置默认权重（如果还没有的话）
        if (!editingWeights[categoryId]) {
          const classification = aiClassifications.find(c => c.id === categoryId);
          setEditingWeights(prev => ({
            ...prev,
            [categoryId]: classification?.weight || 50
          }));
        }
      } else {
        // 移除分类ID
        newCategoryIds = currentCategoryIds.filter(id => id !== categoryId);
        // 从权重配置中移除未选中的分类
        setEditingWeights(prev => {
          const newWeights = { ...prev };
          delete newWeights[categoryId];
          return newWeights;
        });
      }

      setEditingRule(SegmentMatchingRuleHelper.createPriorityOrder(newCategoryIds));
    }
  };

  // 权重编辑处理函数
  const handleWeightChange = (classificationId: string, weight: number) => {
    setEditingWeights(prev => ({
      ...prev,
      [classificationId]: weight,
    }));
  };

  const validateWeight = (weight: number): boolean => {
    return weight >= 0 && weight <= 100;
  };



  const getCurrentRuleType = (rule: SegmentMatchingRule): string => {
    if (SegmentMatchingRuleHelper.isFixedMaterial(rule)) {
      return 'fixed';
    } else if (SegmentMatchingRuleHelper.isAiClassification(rule)) {
      return 'ai_classification';
    } else if (SegmentMatchingRuleHelper.isRandomMatch(rule)) {
      return 'random';
    } else if (SegmentMatchingRuleHelper.isPriorityOrder(rule)) {
      return 'priority_order';
    }
    return 'fixed'; // 默认值
  };

  const ruleTypeOptions = [
    { value: 'fixed', label: '固定素材' },
    { value: 'ai_classification', label: 'AI分类素材' },
    { value: 'random', label: '随机匹配' },
    { value: 'priority_order', label: '按顺序匹配' },
  ];

  const classificationOptions = aiClassifications.map(classification => ({
    value: classification.id,
    label: classification.name,
  }));

  if (!isEditing) {
    return (
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <span className="text-xs font-medium text-gray-700">匹配规则:</span>
          <span className={`px-2 py-1 rounded text-xs ${
            SegmentMatchingRuleHelper.isFixedMaterial(currentRule)
              ? 'bg-gray-100 text-gray-800'
              : SegmentMatchingRuleHelper.isAiClassification(currentRule)
              ? 'bg-blue-100 text-blue-800'
              : SegmentMatchingRuleHelper.isRandomMatch(currentRule)
              ? 'bg-green-100 text-green-800'
              : SegmentMatchingRuleHelper.isPriorityOrder(currentRule)
              ? 'bg-purple-100 text-purple-800'
              : 'bg-gray-100 text-gray-800'
          }`}>
            {SegmentMatchingRuleHelper.getDisplayName(currentRule)}
          </span>
        </div>
        <button
          onClick={handleStartEdit}
          className="inline-flex items-center px-2 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-md hover:bg-blue-100 hover:text-blue-700 transition-all duration-200 border border-blue-200"
          title="编辑匹配规则"
        >
          <PencilIcon className="w-3 h-3 mr-1" />
          编辑
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-3 bg-blue-50 border border-blue-200 rounded-lg p-3">
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-blue-800">编辑匹配规则:</span>
        <div className="flex items-center space-x-2">
          <button
            onClick={handleSaveRule}
            disabled={loading}
            className="inline-flex items-center px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md"
            title="保存匹配规则"
          >
            <CheckIcon className="w-3 h-3 mr-1" />
            {loading ? '保存中...' : '保存'}
          </button>
          <button
            onClick={handleCancelEdit}
            disabled={loading}
            className="inline-flex items-center px-3 py-1.5 bg-gray-100 text-gray-700 text-xs font-medium rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
            title="取消编辑"
          >
            <XMarkIcon className="w-3 h-3 mr-1" />
            取消
          </button>
        </div>
      </div>

      <div className="space-y-2">
        <div>
          <label className="block text-xs font-medium text-blue-800 mb-1">
            规则类型
          </label>
          <CustomSelect
            value={getCurrentRuleType(editingRule)}
            onChange={handleRuleTypeChange}
            options={ruleTypeOptions}
            placeholder="选择规则类型"
            className="text-xs bg-white border-blue-200"
          />
        </div>

        {SegmentMatchingRuleHelper.isAiClassification(editingRule) && (
          <div>
            <label className="block text-xs font-medium text-blue-800 mb-1">
              AI分类
            </label>
            <CustomSelect
              value={SegmentMatchingRuleHelper.getAiClassificationInfo(editingRule)?.category_id || ''}
              onChange={handleAiClassificationChange}
              options={classificationOptions}
              placeholder="选择AI分类"
              className="text-xs bg-white border-blue-200"
            />
          </div>
        )}

        {SegmentMatchingRuleHelper.isPriorityOrder(editingRule) && (
          <div>
            <label className="block text-xs font-medium text-blue-800 mb-1">
              按权重顺序匹配的分类
            </label>
            <div className="text-xs text-gray-600 mb-2">
              系统将按照AI分类的权重顺序依次尝试匹配素材，权重高的分类优先匹配
            </div>
            <div className="space-y-1 max-h-32 overflow-y-auto border border-blue-200 rounded-md p-2 bg-white">
              {aiClassifications
                .sort((a, b) => (b.weight || 0) - (a.weight || 0)) // 按权重降序排列
                .map((classification) => {
                  const currentCategoryIds = typeof editingRule === 'object' && 'PriorityOrder' in editingRule
                    ? editingRule.PriorityOrder.category_ids
                    : [];
                  const isSelected = currentCategoryIds.includes(classification.id);

                  return (
                    <div key={classification.id} className="flex items-center space-x-2 hover:bg-blue-50 p-1 rounded">
                      <input
                        type="checkbox"
                        checked={isSelected}
                        onChange={(e) => handlePriorityOrderChange(classification.id, e.target.checked)}
                        className="w-3 h-3 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                      />
                      <span className="text-xs text-gray-700 flex-1">
                        {classification.name}
                      </span>

                      {/* 权重编辑区域 */}
                      <div className="flex items-center space-x-1">
                        {isSelected ? (
                          // 选中时显示可编辑的输入框
                          <div className="flex items-center space-x-1">
                            <span className="text-xs text-gray-500">权重:</span>
                            <input
                              type="number"
                              min="0"
                              max="100"
                              value={editingWeights[classification.id] || classification.weight || 0}
                              onChange={(e) => {
                                const value = parseInt(e.target.value) || 0;
                                if (validateWeight(value)) {
                                  handleWeightChange(classification.id, value);
                                }
                              }}
                              className="w-12 text-xs text-center border border-gray-300 rounded px-1 py-0.5 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                        ) : (
                          // 未选中时显示只读的权重值
                          <span className="text-xs text-gray-500 bg-gray-100 px-1 rounded">
                            权重: {classification.weight || 0}
                          </span>
                        )}
                      </div>
                    </div>
                  );
                })}
            </div>
            {typeof editingRule === 'object' && 'PriorityOrder' in editingRule && editingRule.PriorityOrder.category_ids.length === 0 && (
              <div className="text-xs text-amber-700 bg-amber-100 border border-amber-200 p-2 rounded-md mt-2">
                ⚠️ 请至少选择一个AI分类
              </div>
            )}

            {/* 权重配置说明 */}
            {templateId && typeof editingRule === 'object' && 'PriorityOrder' in editingRule && editingRule.PriorityOrder.category_ids.length > 0 && (
              <div className="mt-3 text-xs text-gray-500 bg-blue-50 border border-blue-200 p-2 rounded-md">
                💡 选中分类后可直接在右侧编辑权重值（0-100），权重越高优先级越高。保存时会同时保存权重配置。
              </div>
            )}
          </div>
        )}
      </div>

      {error && (
        <div className="text-xs text-red-700 bg-red-100 border border-red-200 p-2 rounded-md">
          ⚠️ {error}
        </div>
      )}

      {loading && (
        <div className="text-xs text-blue-700 bg-white border border-blue-300 p-2 rounded-md flex items-center">
          <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-blue-600 mr-2"></div>
          正在保存匹配规则...
        </div>
      )}
    </div>
  );
};