/**
 * 混剪配置模态框组件
 * 允许用户自定义混剪参数
 */

import React, { useState, useEffect } from 'react'
import { X, Clock, Zap, Music, Type, Image, Shuffle } from 'lucide-react'
import { Project } from '../services/projectService'
import { VideoSegment } from '../services/mediaService'
import { Model } from '../services/modelService'
import { MixEditService, MixEditConfig } from '../services/mixEditService'

interface MixEditConfigModalProps {
  project: Project
  materials: VideoSegment[]
  models: Model[]
  onConfirm: (config: MixEditConfig) => void
  onCancel: () => void
}

const MixEditConfigModal: React.FC<MixEditConfigModalProps> = ({
  project,
  materials,
  models,
  onConfirm,
  onCancel
}) => {
  const [config, setConfig] = useState<MixEditConfig>(MixEditService.getDefaultConfig())
  const [estimatedTime, setEstimatedTime] = useState(0)
  const [errors, setErrors] = useState<string[]>([])

  // 预设配置
  const presets = MixEditService.getMixEditPresets()

  // 更新配置
  const updateConfig = (updates: Partial<MixEditConfig>) => {
    const newConfig = { ...config, ...updates }
    setConfig(newConfig)
    
    // 验证配置
    const validationErrors = MixEditService.validateConfig(newConfig, materials, models)
    setErrors(validationErrors)
    
    // 估算时间
    const materialCount = newConfig.useAllMaterials 
      ? materials.length 
      : newConfig.selectedMaterialIds.length
    const time = MixEditService.estimateMixEditTime(newConfig, materialCount)
    setEstimatedTime(time)
  }

  // 应用预设
  const applyPreset = (presetConfig: Partial<MixEditConfig>) => {
    updateConfig(presetConfig)
  }

  // 初始化估算时间
  useEffect(() => {
    updateConfig({})
  }, [])

  // 确认配置
  const handleConfirm = () => {
    if (errors.length === 0) {
      onConfirm(config)
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        {/* 标题栏 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div>
            <h2 className="text-xl font-semibold text-gray-900">混剪配置</h2>
            <p className="text-sm text-gray-600">为项目 "{project.name}" 配置混剪参数</p>
          </div>
          <button
            onClick={onCancel}
            className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
          >
            <X size={24} />
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* 预设配置 */}
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-3">快速预设</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {presets.map((preset, index) => (
                <button
                  key={index}
                  onClick={() => applyPreset(preset.config)}
                  className="p-3 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors text-left"
                >
                  <div className="font-medium text-gray-900">{preset.name}</div>
                  <div className="text-xs text-gray-500 mt-1">
                    {preset.config.duration}秒 · {preset.config.style}
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* 基础配置 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 左列 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium text-gray-900">基础设置</h3>
              
              {/* 目标时长 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  <Clock className="w-4 h-4 inline mr-1" />
                  目标时长（秒）
                </label>
                <input
                  type="number"
                  min="10"
                  max="300"
                  value={config.duration}
                  onChange={(e) => updateConfig({ duration: parseInt(e.target.value) || 60 })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              {/* 剪辑风格 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  <Zap className="w-4 h-4 inline mr-1" />
                  剪辑风格
                </label>
                <select
                  value={config.style}
                  onChange={(e) => updateConfig({ style: e.target.value as any })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="auto">自动</option>
                  <option value="fast">快速</option>
                  <option value="smooth">平滑</option>
                  <option value="dynamic">动感</option>
                </select>
              </div>

              {/* 转场类型 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  <Shuffle className="w-4 h-4 inline mr-1" />
                  转场类型
                </label>
                <select
                  value={config.transitionType}
                  onChange={(e) => updateConfig({ transitionType: e.target.value as any })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="cut">直切</option>
                  <option value="fade">淡入淡出</option>
                  <option value="slide">滑动</option>
                  <option value="zoom">缩放</option>
                </select>
              </div>
            </div>

            {/* 右列 */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium text-gray-900">特效设置</h3>
              
              {/* 特效选项 */}
              <div className="space-y-3">
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={config.music}
                    onChange={(e) => updateConfig({ music: e.target.checked })}
                    className="mr-3 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <Music className="w-4 h-4 mr-2 text-gray-600" />
                  <span className="text-sm font-medium text-gray-700">添加背景音乐</span>
                </label>

                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={config.textOverlay}
                    onChange={(e) => updateConfig({ textOverlay: e.target.checked })}
                    className="mr-3 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <Type className="w-4 h-4 mr-2 text-gray-600" />
                  <span className="text-sm font-medium text-gray-700">添加文字叠加</span>
                </label>

                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={config.logoWatermark}
                    onChange={(e) => updateConfig({ logoWatermark: e.target.checked })}
                    className="mr-3 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <Image className="w-4 h-4 mr-2 text-gray-600" />
                  <span className="text-sm font-medium text-gray-700">添加Logo水印</span>
                </label>
              </div>

              {/* 素材选择 */}
              <div>
                <label className="flex items-center mb-2">
                  <input
                    type="checkbox"
                    checked={config.useAllMaterials}
                    onChange={(e) => updateConfig({ useAllMaterials: e.target.checked })}
                    className="mr-3 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span className="text-sm font-medium text-gray-700">使用所有素材 ({materials.length}个)</span>
                </label>
                {!config.useAllMaterials && (
                  <div className="text-xs text-gray-500">
                    已选择 {config.selectedMaterialIds.length} 个素材
                  </div>
                )}
              </div>

              {/* 模特选择 */}
              <div>
                <label className="flex items-center mb-2">
                  <input
                    type="checkbox"
                    checked={config.useAllModels}
                    onChange={(e) => updateConfig({ useAllModels: e.target.checked })}
                    className="mr-3 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span className="text-sm font-medium text-gray-700">使用所有模特 ({models.length}个)</span>
                </label>
                {!config.useAllModels && (
                  <div className="text-xs text-gray-500">
                    已选择 {config.selectedModelIds.length} 个模特
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* 估算信息 */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="font-medium text-blue-900">预估处理时间</h4>
                <p className="text-sm text-blue-700">约 {estimatedTime} 秒</p>
              </div>
              <div className="text-right">
                <div className="text-sm text-blue-700">
                  素材: {config.useAllMaterials ? materials.length : config.selectedMaterialIds.length} 个
                </div>
                <div className="text-sm text-blue-700">
                  模特: {config.useAllModels ? models.length : config.selectedModelIds.length} 个
                </div>
              </div>
            </div>
          </div>

          {/* 错误提示 */}
          {errors.length > 0 && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <h4 className="font-medium text-red-900 mb-2">配置错误</h4>
              <ul className="text-sm text-red-700 space-y-1">
                {errors.map((error, index) => (
                  <li key={index}>• {error}</li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* 底部按钮 */}
        <div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            取消
          </button>
          <button
            onClick={handleConfirm}
            disabled={errors.length > 0}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            开始混剪
          </button>
        </div>
      </div>
    </div>
  )
}

export default MixEditConfigModal
