import React, { useState, useEffect, useCallback } from 'react';
import {
  Image,
  FolderOpen,
  Play,
  Settings,
  Clock,
  List,
  Grid,
  RefreshCw,
  Download,
  Eye,
  Trash2,
  CheckCircle,
  AlertCircle,
  Info
} from 'lucide-react';
import { invoke } from '@tauri-apps/api/core';
import { open } from '@tauri-apps/plugin-dialog';

import {
  FrameExtractionConfig,
  VideoFileInfo,
  FrameExtractionResult,
  FrameType,
  ImageFormat,
  ExtractionTaskStatus,
  DEFAULT_FRAME_EXTRACTION_CONFIG,
  SUPPORTED_VIDEO_FORMATS,
  FRAME_EXTRACTION_PRESETS
} from '../../types/frame-extractor';

import { FrameExtractionConfigPanel } from '../../components/frame-extractor/FrameExtractionConfigPanel';
import { VideoFileList } from '../../components/frame-extractor/VideoFileList';
import { ExtractionProgress } from '../../components/frame-extractor/ExtractionProgress';
import { FramePreview } from '../../components/frame-extractor/FramePreview';
import { ExtractionResults } from '../../components/frame-extractor/ExtractionResults';
import { VideoPlayer } from '../../components/frame-extractor/VideoPlayer';

/**
 * 视频关键帧提取工具主组件
 * 遵循 Tauri 开发规范和 UI/UX 设计标准
 */
const FrameExtractorTool: React.FC = () => {
  // 状态管理
  const [selectedVideos, setSelectedVideos] = useState<VideoFileInfo[]>([]);
  const [config, setConfig] = useState<FrameExtractionConfig>(DEFAULT_FRAME_EXTRACTION_CONFIG);
  const [isExtracting, setIsExtracting] = useState(false);
  const [isScanning, setIsScanning] = useState(false);
  const [extractionResults, setExtractionResults] = useState<FrameExtractionResult[]>([]);
  const [currentProgress, setCurrentProgress] = useState(0);
  const [currentFile, setCurrentFile] = useState<string>('');
  const [viewMode, setViewMode] = useState<'config' | 'progress' | 'results'>('config');
  const [selectedFolder, setSelectedFolder] = useState<string>('');
  const [ffmpegAvailable, setFfmpegAvailable] = useState<boolean | null>(null);
  const [selectedVideoForPreview, setSelectedVideoForPreview] = useState<VideoFileInfo | null>(null);
  const [currentPlayTime, setCurrentPlayTime] = useState<number>(0);
  const [recursiveScan, setRecursiveScan] = useState<boolean>(true);

  // 检查 FFmpeg 可用性
  useEffect(() => {
    checkFFmpegAvailability();
  }, []);

  const checkFFmpegAvailability = useCallback(async () => {
    try {
      const available = await invoke<boolean>('check_ffmpeg_availability');
      setFfmpegAvailable(available);
      if (!available) {
        console.warn('FFmpeg 不可用，某些功能可能无法正常工作');
      }
    } catch (error) {
      console.error('检查 FFmpeg 可用性失败:', error);
      setFfmpegAvailable(false);
    }
  }, []);

  // 选择单个视频文件
  const handleSelectFiles = useCallback(async () => {
    try {
      const selected = await open({
        multiple: true,
        filters: [{
          name: '视频文件',
          extensions: SUPPORTED_VIDEO_FORMATS
        }],
        title: '选择视频文件',
      });

      if (selected && Array.isArray(selected)) {
        await loadVideoFiles(selected);
      } else if (selected && typeof selected === 'string') {
        await loadVideoFiles([selected]);
      }
    } catch (error) {
      console.error('选择文件失败:', error);
    }
  }, []);

  // 选择文件夹
  const handleSelectFolder = useCallback(async () => {
    try {
      const selected = await open({
        directory: true,
        multiple: false,
        title: '选择视频文件夹',
      });

      if (selected && typeof selected === 'string') {
        setSelectedFolder(selected);
        await scanVideoFiles(selected, recursiveScan);
      }
    } catch (error) {
      console.error('选择文件夹失败:', error);
    }
  }, []);

  // 扫描视频文件
  const scanVideoFiles = useCallback(async (folderPath: string, recursive: boolean) => {
    setIsScanning(true);
    setCurrentFile(`正在扫描文件夹: ${folderPath}${recursive ? ' (递归)' : ''}`);

    try {
      const files = await invoke<VideoFileInfo[]>('scan_video_files', {
        request: {
          folder_path: folderPath,
          recursive,
          supported_formats: SUPPORTED_VIDEO_FORMATS,
        }
      });

      const validFiles = files.filter(f => f.is_valid);
      setSelectedVideos(validFiles);

      // 显示扫描结果
      const totalFiles = files.length;
      const validCount = validFiles.length;
      const invalidCount = totalFiles - validCount;

      console.log(`扫描完成: 找到 ${totalFiles} 个文件，其中 ${validCount} 个有效，${invalidCount} 个无效`);
      setCurrentFile(`扫描完成: 找到 ${validCount} 个有效视频文件`);

      // 2秒后清除状态信息
      setTimeout(() => {
        setCurrentFile('');
      }, 2000);

    } catch (error) {
      console.error('扫描视频文件失败:', error);
      setCurrentFile('扫描失败，请重试');
      setTimeout(() => {
        setCurrentFile('');
      }, 3000);
    } finally {
      setIsScanning(false);
    }
  }, []);

  // 加载视频文件信息
  const loadVideoFiles = useCallback(async (filePaths: string[]) => {
    setIsScanning(true);
    const videoInfos: VideoFileInfo[] = [];

    try {
      for (const filePath of filePaths) {
        try {
          const info = await invoke<VideoFileInfo>('get_video_info', {
            videoPath: filePath
          });
          videoInfos.push(info);
        } catch (error) {
          console.error(`获取视频信息失败 ${filePath}:`, error);
        }
      }

      setSelectedVideos(videoInfos.filter(info => info.is_valid));
    } finally {
      setIsScanning(false);
    }
  }, []);

  // 开始提取
  const handleStartExtraction = useCallback(async () => {
    if (selectedVideos.length === 0) {
      alert('请先选择视频文件');
      return;
    }

    if (!config.output_directory) {
      alert('请设置输出目录');
      return;
    }

    setIsExtracting(true);
    setViewMode('progress');
    setCurrentProgress(0);
    setExtractionResults([]);

    try {
      const videoPaths = selectedVideos.map(v => v.path);
      const results = await invoke<FrameExtractionResult[]>('extract_frames_batch', {
        request: {
          video_files: videoPaths,
          config: config,
        }
      });

      setExtractionResults(results);
      setViewMode('results');
      
      const successCount = results.filter(r => r.success).length;
      console.log(`提取完成: ${successCount}/${results.length} 成功`);
    } catch (error) {
      console.error('批量提取失败:', error);
      alert(`提取失败: ${error}`);
    } finally {
      setIsExtracting(false);
    }
  }, [selectedVideos, config]);

  // 清除选择
  const handleClearSelection = useCallback(() => {
    setSelectedVideos([]);
    setSelectedFolder('');
    setExtractionResults([]);
    setCurrentProgress(0);
    setCurrentFile('');
  }, []);

  // 应用预设配置
  const handleApplyPreset = useCallback((presetId: string) => {
    const preset = FRAME_EXTRACTION_PRESETS.find(p => p.id === presetId);
    if (preset) {
      setConfig({ ...preset.config });
    }
  }, []);

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="page-header flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-300">
            <Image className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-blue-600 bg-clip-text text-transparent">
              视频关键帧提取工具
            </h1>
            <p className="text-gray-600 text-lg">快速提取视频的第一帧、最后帧或自定义位置的帧</p>
          </div>
        </div>

        {/* FFmpeg 状态指示器 */}
        <div className="flex items-center gap-2">
          {ffmpegAvailable === null ? (
            <div className="flex items-center gap-2 text-gray-500">
              <RefreshCw className="w-4 h-4 animate-spin" />
              <span className="text-sm">检查中...</span>
            </div>
          ) : ffmpegAvailable ? (
            <div className="flex items-center gap-2 text-green-600">
              <CheckCircle className="w-4 h-4" />
              <span className="text-sm">FFmpeg 可用</span>
            </div>
          ) : (
            <div className="flex items-center gap-2 text-red-600">
              <AlertCircle className="w-4 h-4" />
              <span className="text-sm">FFmpeg 不可用</span>
            </div>
          )}
        </div>
      </div>

      {/* 工具栏 */}
      <div className="flex items-center justify-between bg-white rounded-lg p-4 shadow-sm border">
        <div className="flex items-center gap-3">
          <button
            onClick={handleSelectFiles}
            disabled={isScanning || isExtracting}
            className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <Image className="w-4 h-4" />
            选择文件
          </button>
          
          <button
            onClick={handleSelectFolder}
            disabled={isScanning || isExtracting}
            className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            title={recursiveScan ? "选择文件夹并递归扫描所有子文件夹中的视频文件" : "选择文件夹并扫描其中的视频文件"}
          >
            <FolderOpen className="w-4 h-4" />
            选择文件夹{recursiveScan ? ' (递归)' : ''}
          </button>

          <button
            onClick={handleClearSelection}
            disabled={isScanning || isExtracting}
            className="flex items-center gap-2 px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <Trash2 className="w-4 h-4" />
            清除选择
          </button>

          {/* 递归扫描选项 */}
          <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-200">
            <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
              <input
                type="checkbox"
                checked={recursiveScan}
                onChange={(e) => setRecursiveScan(e.target.checked)}
                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span>递归扫描子文件夹</span>
            </label>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="text-sm text-gray-600">
            已选择 {selectedVideos.length} 个视频文件
          </div>
          
          <button
            onClick={handleStartExtraction}
            disabled={selectedVideos.length === 0 || isExtracting || !ffmpegAvailable}
            className="flex items-center gap-2 px-6 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {isExtracting ? (
              <>
                <RefreshCw className="w-4 h-4 animate-spin" />
                提取中...
              </>
            ) : (
              <>
                <Play className="w-4 h-4" />
                开始提取
              </>
            )}
          </button>
        </div>
      </div>

      {/* 状态显示区域 */}
      {(isScanning || currentFile) && (
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
          <div className="flex items-center gap-2">
            {isScanning && <RefreshCw className="w-4 h-4 text-blue-600 animate-spin" />}
            <span className="text-sm text-blue-800">
              {currentFile || '正在处理...'}
            </span>
          </div>
        </div>
      )}

      {/* 视图切换 */}
      <div className="flex items-center gap-2 bg-white rounded-lg p-1 shadow-sm border w-fit">
        <button
          onClick={() => setViewMode('config')}
          className={`px-4 py-2 rounded-md transition-colors ${
            viewMode === 'config'
              ? 'bg-blue-100 text-blue-600'
              : 'text-gray-600 hover:text-gray-800'
          }`}
        >
          <Settings className="w-4 h-4 inline mr-2" />
          配置
        </button>
        <button
          onClick={() => setViewMode('progress')}
          className={`px-4 py-2 rounded-md transition-colors ${
            viewMode === 'progress'
              ? 'bg-blue-100 text-blue-600'
              : 'text-gray-600 hover:text-gray-800'
          }`}
        >
          <Clock className="w-4 h-4 inline mr-2" />
          进度
        </button>
        <button
          onClick={() => setViewMode('results')}
          className={`px-4 py-2 rounded-md transition-colors ${
            viewMode === 'results'
              ? 'bg-blue-100 text-blue-600'
              : 'text-gray-600 hover:text-gray-800'
          }`}
        >
          <List className="w-4 h-4 inline mr-2" />
          结果
        </button>
      </div>

      {/* 主要内容区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 左侧：视频文件列表 */}
        <div className="lg:col-span-1">
          <VideoFileList
            videos={selectedVideos}
            isScanning={isScanning}
            onRemoveVideo={(index: number) => {
              const newVideos = [...selectedVideos];
              newVideos.splice(index, 1);
              setSelectedVideos(newVideos);
              // 如果删除的是当前预览的视频，清除预览
              if (selectedVideoForPreview && selectedVideos[index]?.path === selectedVideoForPreview.path) {
                setSelectedVideoForPreview(null);
              }
            }}
            onPreviewVideo={(video: VideoFileInfo) => {
              setSelectedVideoForPreview(video);
              setViewMode('config'); // 切换到配置视图以显示预览
            }}
          />
        </div>

        {/* 右侧：主要内容 */}
        <div className="lg:col-span-2 space-y-6">
          {viewMode === 'config' && (
            <>
              {/* 视频预览播放器 */}
              {selectedVideoForPreview && (
                <div className="bg-white rounded-lg shadow-sm border p-4">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold text-gray-900">视频预览</h3>
                    <button
                      onClick={() => setSelectedVideoForPreview(null)}
                      className="text-gray-400 hover:text-gray-600"
                    >
                      <Eye className="w-5 h-5" />
                    </button>
                  </div>
                  <VideoPlayer
                    video={selectedVideoForPreview}
                    currentTime={currentPlayTime}
                    onTimeUpdate={setCurrentPlayTime}
                    className="w-full h-64"
                  />
                </div>
              )}

              {/* 配置面板 */}
              <FrameExtractionConfigPanel
                config={config}
                onConfigChange={setConfig}
                onApplyPreset={handleApplyPreset}
                presets={FRAME_EXTRACTION_PRESETS}
                currentVideo={selectedVideoForPreview || undefined}
                currentTime={currentPlayTime}
                onTimeChange={setCurrentPlayTime}
              />
            </>
          )}

          {viewMode === 'progress' && (
            <ExtractionProgress
              isExtracting={isExtracting}
              progress={currentProgress}
              currentFile={currentFile}
              totalFiles={selectedVideos.length}
            />
          )}

          {viewMode === 'results' && (
            <ExtractionResults
              results={extractionResults}
              onOpenResult={(result: FrameExtractionResult) => {
                // 打开结果文件所在目录
                invoke('open_file_directory', { path: result.output_path });
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default FrameExtractorTool;