import React, { useState } from 'react';
import {
  FileVideo, FileAudio, FileImage, File, Clock, ExternalLink, ChevronDown, ChevronUp,
  Monitor, Volume2, Palette, Calendar, Hash, Zap, HardDrive, Film, Eye
} from 'lucide-react';
import { Material, MaterialSegment } from '../types/material';
import { useMaterialStore } from '../store/materialStore';

interface MaterialCardProps {
  material: Material;
}

// 格式化时间（秒转为 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 }) => {
  const { getMaterialSegments } = useMaterialStore();
  const [segments, setSegments] = useState<MaterialSegment[]>([]);
  const [showSegments, setShowSegments] = useState(false);
  const [loadingSegments, setLoadingSegments] = 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';
    }
  };



  // 加载切分片段
  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('无法打开文件位置，请检查文件是否存在');
      }
    }
  };

  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>
        <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(material.processing_status)}`}>
          {material.processing_status}
        </span>
      </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.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">
          <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>

          {/* 切分片段列表 */}
          {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>
      )}
    </div>
  );
};