import React, { useState, useEffect } from 'react';
import {
  FileVideo, FileAudio, FileImage, File, Clock, ExternalLink, ChevronDown, ChevronUp,
  Monitor, Volume2, Palette, Calendar, Hash, Zap, HardDrive, Film, Eye, Brain, Loader2, User, Edit2, Trash2, RefreshCw
} from 'lucide-react';
import { Material, MaterialSegment } from '../types/material';
import { useMaterialStore } from '../store/materialStore';
import { useVideoClassificationStore } from '../store/videoClassificationStore';
import { Model } from '../types/model';
import { invoke } from '@tauri-apps/api/core';
import { DeleteConfirmDialog } from './DeleteConfirmDialog';

interface MaterialCardProps {
  material: Material;
  onEdit?: (material: Material) => void;
  onDelete?: (materialId: string, materialName: string) => void;
  onReprocess?: (materialId: string) => void;
}

// 格式化时间（秒转为 mm:ss 格式）
const formatTime = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
};

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 格式化比特率
const formatBitrate = (bitrate: number): string => {
  if (bitrate >= 1000000) {
    return `${(bitrate / 1000000).toFixed(1)} Mbps`;
  } else if (bitrate >= 1000) {
    return `${(bitrate / 1000).toFixed(0)} Kbps`;
  }
  return `${bitrate} bps`;
};

// 格式化分辨率
const formatResolution = (width: number, height: number): string => {
  return `${width}×${height}`;
};

// 格式化日期
const formatDate = (dateString: string): string => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

/**
 * 素材卡片组件
 * 显示素材信息和切分片段
 */
export const MaterialCard: React.FC<MaterialCardProps> = ({ material, onEdit, onDelete, onReprocess }) => {
  const { getMaterialSegments } = useMaterialStore();
  const { startClassification, isLoading: classificationLoading } = useVideoClassificationStore();
  const [segments, setSegments] = useState<MaterialSegment[]>([]);
  const [showSegments, setShowSegments] = useState(false);
  const [loadingSegments, setLoadingSegments] = useState(false);
  const [isClassifying, setIsClassifying] = useState(false);
  const [associatedModel, setAssociatedModel] = useState<Model | null>(null);
  const [loadingModel, setLoadingModel] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isReprocessing, setIsReprocessing] = useState(false);

  // 获取素材类型图标
  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'Video':
        return <FileVideo className="w-4 h-4" />;
      case 'Audio':
        return <FileAudio className="w-4 h-4" />;
      case 'Image':
        return <FileImage className="w-4 h-4" />;
      default:
        return <File className="w-4 h-4" />;
    }
  };

  // 获取状态颜色
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Completed':
        return 'text-green-600 bg-green-50';
      case 'Processing':
        return 'text-blue-600 bg-blue-50';
      case 'Failed':
        return 'text-red-600 bg-red-50';
      case 'Pending':
        return 'text-yellow-600 bg-yellow-50';
      default:
        return 'text-gray-600 bg-gray-50';
    }
  };

  // 获取关联的模特信息
  useEffect(() => {
    const fetchAssociatedModel = async () => {
      if (!material.model_id) {
        setAssociatedModel(null);
        return;
      }

      setLoadingModel(true);
      try {
        const model = await invoke<Model>('get_model_by_id', { id: material.model_id });
        setAssociatedModel(model);
      } catch (error) {
        console.error('获取关联模特失败:', error);
        setAssociatedModel(null);
      } finally {
        setLoadingModel(false);
      }
    };

    fetchAssociatedModel();
  }, [material.model_id]);

  // 加载切分片段
  const loadSegments = async () => {
    if (segments.length > 0) {
      setShowSegments(!showSegments);
      return;
    }

    setLoadingSegments(true);
    try {
      const materialSegments = await getMaterialSegments(material.id);
      setSegments(materialSegments);
      setShowSegments(true);
    } catch (error) {
      console.error('加载切分片段失败:', error);
    } finally {
      setLoadingSegments(false);
    }
  };

  // 打开文件所在文件夹
  const openFileLocation = async (filePath: string) => {
    try {
      const { revealItemInDir } = await import('@tauri-apps/plugin-opener');

      // 处理 Windows 路径格式，移除 \\?\ 前缀
      let normalizedPath = filePath;
      if (normalizedPath.startsWith('\\\\?\\')) {
        normalizedPath = normalizedPath.substring(4);
      }

      console.log('打开文件位置:', normalizedPath);
      await revealItemInDir(normalizedPath);
    } catch (error) {
      console.error('打开文件位置失败:', error);

      // 如果 revealItemInDir 失败，尝试打开文件所在目录
      try {
        const { openPath } = await import('@tauri-apps/plugin-opener');

        // 获取文件所在目录
        const pathParts = filePath.split(/[/\\]/);
        pathParts.pop(); // 移除文件名
        const dirPath = pathParts.join('\\');

        let normalizedDirPath = dirPath;
        if (normalizedDirPath.startsWith('\\\\?\\')) {
          normalizedDirPath = normalizedDirPath.substring(4);
        }

        console.log('尝试打开目录:', normalizedDirPath);
        await openPath(normalizedDirPath);
      } catch (fallbackError) {
        console.error('备用方法也失败:', fallbackError);
        alert('无法打开文件位置，请检查文件是否存在');
      }
    }
  };

  // 启动AI分类
  const handleStartClassification = async () => {
    if (!material.project_id) {
      console.error('缺少项目ID');
      return;
    }

    setIsClassifying(true);
    try {
      const request = {
        material_id: material.id,
        project_id: material.project_id,
        overwrite_existing: false,
        priority: 1,
      };

      const taskIds = await startClassification(request);
      console.log(`已创建 ${taskIds.length} 个分类任务`);

      // 可以在这里显示成功消息或打开进度对话框
    } catch (error) {
      console.error('启动AI分类失败:', error);
      // 可以在这里显示错误消息
    } finally {
      setIsClassifying(false);
    }
  };

  // 处理删除素材
  const handleDeleteClick = () => {
    setShowDeleteConfirm(true);
  };

  const handleDeleteConfirm = async () => {
    if (!onDelete) return;

    setIsDeleting(true);
    try {
      await onDelete(material.id, material.name);
      setShowDeleteConfirm(false);
    } catch (error) {
      console.error('删除素材失败:', error);
    } finally {
      setIsDeleting(false);
    }
  };

  const handleDeleteCancel = () => {
    setShowDeleteConfirm(false);
  };

  // 处理重新处理素材
  const handleReprocessClick = async () => {
    if (!onReprocess) return;

    setIsReprocessing(true);
    try {
      await onReprocess(material.id);
    } catch (error) {
      console.error('重新处理素材失败:', error);
    } finally {
      setIsReprocessing(false);
    }
  };

  return (
    <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
      {/* 素材基本信息 */}
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center space-x-2 flex-1 min-w-0">
          {getTypeIcon(material.material_type)}
          <h4 className="font-medium text-gray-900 truncate">{material.name}</h4>
        </div>
        <div className="flex items-center space-x-2">
          {/* 重新处理按钮 - 仅在状态为 Pending 时显示 */}
          {material.processing_status === 'Pending' && onReprocess && (
            <button
              onClick={handleReprocessClick}
              disabled={isReprocessing}
              className="text-gray-400 hover:text-green-500 transition-colors disabled:opacity-50"
              title="重新处理"
            >
              {isReprocessing ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <RefreshCw className="w-4 h-4" />
              )}
            </button>
          )}

          {onEdit && (
            <button
              onClick={() => onEdit(material)}
              className="text-gray-400 hover:text-blue-500 transition-colors"
              title="编辑素材"
            >
              <Edit2 className="w-4 h-4" />
            </button>
          )}

          {onDelete && (
            <button
              onClick={handleDeleteClick}
              className="text-gray-400 hover:text-red-500 transition-colors"
              title="删除素材"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          )}

          <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(material.processing_status)}`}>
            {material.processing_status}
          </span>
        </div>
      </div>

      {/* 素材详细信息 */}
      <div className="space-y-3">
        {/* 基本信息 */}
        <div className="grid grid-cols-2 gap-2 text-sm">
          <div className="flex items-center space-x-1 text-gray-600">
            <HardDrive className="w-3 h-3" />
            <span>{formatFileSize(material.file_size)}</span>
          </div>
          <div className="flex items-center space-x-1 text-gray-600">
            <Calendar className="w-3 h-3" />
            <span>{formatDate(material.created_at)}</span>
          </div>
        </div>

        {/* 关联模特信息 */}
        {material.model_id && (
          <div className="bg-purple-50 rounded-lg p-3">
            <div className="flex items-center space-x-2">
              <User className="w-4 h-4 text-purple-600" />
              <span className="text-sm font-medium text-purple-700">关联模特</span>
            </div>
            {loadingModel ? (
              <div className="flex items-center space-x-2 mt-2">
                <Loader2 className="w-3 h-3 animate-spin text-purple-600" />
                <span className="text-xs text-purple-600">加载中...</span>
              </div>
            ) : associatedModel ? (
              <div className="mt-2 space-y-1">
                <p className="text-sm font-medium text-gray-900">{associatedModel.name}</p>
                {associatedModel.stage_name && (
                  <p className="text-xs text-gray-600">艺名: {associatedModel.stage_name}</p>
                )}
                {associatedModel.description && (
                  <p className="text-xs text-gray-600">{associatedModel.description}</p>
                )}
              </div>
            ) : (
              <p className="text-xs text-red-600 mt-2">模特信息加载失败</p>
            )}
          </div>
        )}

        {/* 元数据信息 */}
        {material.metadata !== 'None' && (
          <div className="space-y-2">
            {/* 视频元数据 */}
            {material.metadata && typeof material.metadata === 'object' && 'Video' in material.metadata && (
              <div className="bg-blue-50 rounded-lg p-3 space-y-2">
                <div className="flex items-center space-x-1 text-blue-700 font-medium text-sm">
                  <FileVideo className="w-4 h-4" />
                  <span>视频信息</span>
                </div>
                <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
                  <div className="flex items-center space-x-1">
                    <Clock className="w-3 h-3" />
                    <span>{formatTime(material.metadata.Video.duration)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Monitor className="w-3 h-3" />
                    <span>{formatResolution(material.metadata.Video.width, material.metadata.Video.height)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Zap className="w-3 h-3" />
                    <span>{formatBitrate(material.metadata.Video.bitrate)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Film className="w-3 h-3" />
                    <span>{material.metadata.Video.fps} fps</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Hash className="w-3 h-3" />
                    <span>{material.metadata.Video.codec}</span>
                  </div>
                  {material.metadata.Video.has_audio && (
                    <div className="flex items-center space-x-1">
                      <Volume2 className="w-3 h-3" />
                      <span>{material.metadata.Video.audio_codec || 'Audio'}</span>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* 音频元数据 */}
            {material.metadata && typeof material.metadata === 'object' && 'Audio' in material.metadata && (
              <div className="bg-green-50 rounded-lg p-3 space-y-2">
                <div className="flex items-center space-x-1 text-green-700 font-medium text-sm">
                  <FileAudio className="w-4 h-4" />
                  <span>音频信息</span>
                </div>
                <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
                  <div className="flex items-center space-x-1">
                    <Clock className="w-3 h-3" />
                    <span>{formatTime(material.metadata.Audio.duration)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Zap className="w-3 h-3" />
                    <span>{formatBitrate(material.metadata.Audio.bitrate)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Volume2 className="w-3 h-3" />
                    <span>{material.metadata.Audio.sample_rate} Hz</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Hash className="w-3 h-3" />
                    <span>{material.metadata.Audio.codec}</span>
                  </div>
                </div>
              </div>
            )}

            {/* 图片元数据 */}
            {material.metadata && typeof material.metadata === 'object' && 'Image' in material.metadata && (
              <div className="bg-purple-50 rounded-lg p-3 space-y-2">
                <div className="flex items-center space-x-1 text-purple-700 font-medium text-sm">
                  <FileImage className="w-4 h-4" />
                  <span>图片信息</span>
                </div>
                <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
                  <div className="flex items-center space-x-1">
                    <Monitor className="w-3 h-3" />
                    <span>{formatResolution(material.metadata.Image.width, material.metadata.Image.height)}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Palette className="w-3 h-3" />
                    <span>{material.metadata.Image.format}</span>
                  </div>
                  {material.metadata.Image.dpi && (
                    <div className="flex items-center space-x-1">
                      <Eye className="w-3 h-3" />
                      <span>{material.metadata.Image.dpi} DPI</span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        )}

        {/* 处理统计信息 */}
        {(material.scene_detection || material.segments.length > 0) && (
          <div className="bg-gray-50 rounded-lg p-3 space-y-2">
            <div className="flex items-center space-x-1 text-gray-700 font-medium text-sm">
              <Film className="w-4 h-4" />
              <span>处理统计</span>
            </div>
            <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
              {material.scene_detection && (
                <div className="flex items-center space-x-1">
                  <Eye className="w-3 h-3" />
                  <span>{material.scene_detection.total_scenes} 个场景</span>
                </div>
              )}
              {material.segments.length > 0 && (
                <div className="flex items-center space-x-1">
                  <Hash className="w-3 h-3" />
                  <span>{material.segments.length} 个片段</span>
                </div>
              )}
              {material.processed_at && (
                <div className="flex items-center space-x-1">
                  <Calendar className="w-3 h-3" />
                  <span>已处理</span>
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* 切分片段控制 */}
      {material.material_type === 'Video' && material.processing_status === 'Completed' && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <div className="flex items-center justify-between">
            <button
              onClick={loadSegments}
              disabled={loadingSegments}
              className="flex items-center space-x-2 text-sm text-blue-600 hover:text-blue-800 disabled:opacity-50"
            >
              {loadingSegments ? (
                <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
              ) : showSegments ? (
                <ChevronUp className="w-4 h-4" />
              ) : (
                <ChevronDown className="w-4 h-4" />
              )}
              <span>{loadingSegments ? '加载中...' : showSegments ? '隐藏片段' : '查看切分片段'}</span>
            </button>

            {/* AI智能分类按钮 */}
            <button
              onClick={handleStartClassification}
              disabled={isClassifying || classificationLoading}
              className="flex items-center space-x-1 px-3 py-1.5 text-xs font-medium text-white bg-gradient-to-r from-purple-500 to-pink-500 rounded-md hover:from-purple-600 hover:to-pink-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow-md"
              title="使用AI自动分类视频片段"
            >
              {isClassifying ? (
                <Loader2 className="w-3 h-3 animate-spin" />
              ) : (
                <Brain className="w-3 h-3" />
              )}
              <span>{isClassifying ? '分类中...' : 'AI分类'}</span>
            </button>
          </div>

          {/* 切分片段列表 */}
          {showSegments && segments.length > 0 && (
            <div className="mt-3 space-y-2">
              <h5 className="text-sm font-medium text-gray-900">切分片段 ({segments.length})</h5>
              <div className="space-y-1 max-h-40 overflow-y-auto">
                {segments.map((segment) => (
                  <div key={segment.id} className="flex items-center justify-between p-2 bg-gray-50 rounded text-xs">
                    <div className="flex items-center space-x-2">
                      <span className="font-medium">#{segment.segment_index + 1}</span>
                      <Clock className="w-3 h-3" />
                      <span>{formatTime(segment.start_time)} - {formatTime(segment.end_time)}</span>
                      <span className="text-gray-500">({formatTime(segment.duration)})</span>
                    </div>
                    <button
                      onClick={() => openFileLocation(segment.file_path)}
                      className="text-blue-600 hover:text-blue-800"
                      title="打开文件位置"
                    >
                      <ExternalLink className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {showSegments && segments.length === 0 && (
            <div className="mt-3 text-sm text-gray-500">
              暂无切分片段
            </div>
          )}
        </div>
      )}

      {/* 删除确认对话框 */}
      <DeleteConfirmDialog
        isOpen={showDeleteConfirm}
        title="删除素材"
        message="确定要删除这个素材吗？此操作不可撤销。"
        itemName={material.name}
        deleting={isDeleting}
        onConfirm={handleDeleteConfirm}
        onCancel={handleDeleteCancel}
      />
    </div>
  );
};