import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, FolderOpen, Calendar, Settings, Upload, FileVideo, FileAudio, FileImage, HardDrive } from 'lucide-react';
import { useProjectStore } from '../store/projectStore';
import { useMaterialStore } from '../store/materialStore';
import { Project } from '../types/project';
import { MaterialImportResult } from '../types/material';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { ErrorMessage } from '../components/ErrorMessage';
import { MaterialImportDialog } from '../components/MaterialImportDialog';
import { FFmpegDebugPanel } from '../components/FFmpegDebugPanel';
import { MaterialCard } from '../components/MaterialCard';
import { VideoClassificationProgress } from '../components/VideoClassificationProgress';
import { AiAnalysisLogViewer } from '../components/AiAnalysisLogViewer';
import MaterialCardSkeleton from '../components/MaterialCardSkeleton';

/**
 * 项目详情页面组件
 * 遵循 Tauri 开发规范的页面组件设计模式
 */
export const ProjectDetails: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { projects, isLoading, error, loadProjects } = useProjectStore();
  const {
    materials,
    stats,
    loadMaterials,
    loadMaterialStats,
    isLoading: materialsLoading
  } = useMaterialStore();
  const [project, setProject] = useState<Project | null>(null);
  const [showImportDialog, setShowImportDialog] = useState(false);
  const [activeTab, setActiveTab] = useState<'materials' | 'debug' | 'ai-logs'>('materials');

  // 加载项目详情
  useEffect(() => {
    if (!projects.length) {
      loadProjects();
    }
  }, [projects.length, loadProjects]);

  // 根据ID查找项目
  useEffect(() => {
    if (id && projects.length > 0) {
      const foundProject = projects.find(p => p.id === id);
      setProject(foundProject || null);

      // 加载项目素材
      if (foundProject) {
        loadMaterials(foundProject.id);
        loadMaterialStats(foundProject.id);
      }
    }
  }, [id, projects, loadMaterials, loadMaterialStats]);

  // 返回项目列表
  const handleBack = () => {
    navigate('/');
  };

  // 打开项目文件夹
  const handleOpenFolder = async () => {
    if (project) {
      try {
        const { openPath } = await import('@tauri-apps/plugin-opener');

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

        console.log('尝试打开路径:', normalizedPath);
        await openPath(normalizedPath);
      } catch (error) {
        console.error('打开文件夹失败:', error);

        // 如果 openPath 失败，尝试使用 revealItemInDir
        try {
          const { revealItemInDir } = await import('@tauri-apps/plugin-opener');
          let normalizedPath = project.path;
          if (normalizedPath.startsWith('\\\\?\\')) {
            normalizedPath = normalizedPath.substring(4);
          }
          console.log('尝试使用 revealItemInDir 打开:', normalizedPath);
          await revealItemInDir(normalizedPath);
        } catch (fallbackError) {
          console.error('备用方法也失败:', fallbackError);
          // 可以在这里显示用户友好的错误提示
          alert('无法打开文件夹，请检查路径是否存在');
        }
      }
    }
  };

  // 素材导入处理
  const handleMaterialImport = () => {
    setShowImportDialog(true);
  };

  // 导入完成处理
  const handleImportComplete = (result: MaterialImportResult) => {
    setShowImportDialog(false);
    console.log('导入完成:', result);
    // 重新加载素材列表
    if (project) {
      loadMaterials(project.id);
      loadMaterialStats(project.id);
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <LoadingSpinner />
      </div>
    );
  }

  if (error) {
    return <ErrorMessage message={error} />;
  }

  if (!project) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold text-gray-900 mb-4">项目未找到</h2>
        <p className="text-gray-600 mb-6">请检查项目ID是否正确</p>
        <button
          onClick={handleBack}
          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          返回项目列表
        </button>
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto">
      {/* 页面头部 */}
      <div className="mb-8">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 mb-4">
          <button
            onClick={handleBack}
            className="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors self-start"
          >
            <ArrowLeft className="w-5 h-5 mr-2" />
            <span className="hidden sm:inline">返回项目列表</span>
            <span className="sm:hidden">返回</span>
          </button>

          <div className="flex flex-wrap items-center gap-2 sm:gap-3">
            <button
              onClick={handleOpenFolder}
              className="inline-flex items-center px-3 sm:px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm"
            >
              <FolderOpen className="w-4 h-4" />
              <span className="hidden sm:inline ml-2">打开文件夹</span>
            </button>

            <button
              onClick={handleMaterialImport}
              className="inline-flex items-center px-3 sm:px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
            >
              <Upload className="w-4 h-4" />
              <span className="hidden sm:inline ml-2">导入素材</span>
            </button>

            <button className="inline-flex items-center px-3 sm:px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm">
              <Settings className="w-4 h-4" />
              <span className="hidden sm:inline ml-2">项目设置</span>
            </button>
          </div>
        </div>
      </div>

      {/* 项目统计概览 */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-6">
        {/* 总素材数 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <div className="min-w-0 flex-1">
              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">总素材数</p>
              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.total_materials || 0}</p>
            </div>
            <div className="w-10 h-10 md:w-12 md:h-12 bg-blue-100 rounded-lg flex items-center justify-center ml-2">
              <FolderOpen className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
            </div>
          </div>
        </div>

        {/* 视频文件 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <div className="min-w-0 flex-1">
              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">视频文件</p>
              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.video_count || 0}</p>
            </div>
            <div className="w-10 h-10 md:w-12 md:h-12 bg-green-100 rounded-lg flex items-center justify-center ml-2">
              <FileVideo className="w-5 h-5 md:w-6 md:h-6 text-green-600" />
            </div>
          </div>
        </div>

        {/* 音频文件 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <div className="min-w-0 flex-1">
              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">音频文件</p>
              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.audio_count || 0}</p>
            </div>
            <div className="w-10 h-10 md:w-12 md:h-12 bg-purple-100 rounded-lg flex items-center justify-center ml-2">
              <FileAudio className="w-5 h-5 md:w-6 md:h-6 text-purple-600" />
            </div>
          </div>
        </div>

        {/* 图片文件 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <div className="min-w-0 flex-1">
              <p className="text-xs md:text-sm font-medium text-gray-600 truncate">图片文件</p>
              <p className="text-xl md:text-2xl font-bold text-gray-900">{stats?.image_count || 0}</p>
            </div>
            <div className="w-10 h-10 md:w-12 md:h-12 bg-orange-100 rounded-lg flex items-center justify-center ml-2">
              <FileImage className="w-5 h-5 md:w-6 md:h-6 text-orange-600" />
            </div>
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="space-y-6">
        {/* 选项卡导航 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          <div className="border-b border-gray-200">
            <nav className="flex space-x-4 md:space-x-8 px-4 md:px-6 overflow-x-auto" aria-label="Tabs">
              <button
                onClick={() => setActiveTab('materials')}
                className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${
                  activeTab === 'materials'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center space-x-2">
                  <FolderOpen className="w-4 h-4" />
                  <span className="hidden sm:inline">素材管理</span>
                  <span className="sm:hidden">素材</span>
                </div>
              </button>
              <button
                onClick={() => setActiveTab('debug')}
                className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${
                  activeTab === 'debug'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center space-x-2">
                  <Settings className="w-4 h-4" />
                  <span className="hidden sm:inline">调试工具</span>
                  <span className="sm:hidden">调试</span>
                </div>
              </button>
              <button
                onClick={() => setActiveTab('ai-logs')}
                className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${
                  activeTab === 'ai-logs'
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center space-x-2">
                  <HardDrive className="w-4 h-4" />
                  <span className="hidden sm:inline">AI分析日志</span>
                  <span className="sm:hidden">AI日志</span>
                </div>
              </button>
            </nav>
          </div>

          {/* 选项卡内容 */}
          <div className="p-4 md:p-6">
            {/* 素材管理选项卡 */}
            {activeTab === 'materials' && (
              <div className="space-y-6">
                {/* AI视频分类进度 */}
                {project && (
                  <VideoClassificationProgress
                    projectId={project.id}
                    autoRefresh={true}
                    refreshInterval={3000}
                  />
                )}

                {/* 素材列表 */}
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-medium text-gray-900">项目素材</h3>
                    <button
                      onClick={() => setShowImportDialog(true)}
                      className="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      <Upload className="w-4 h-4 mr-2" />
                      导入素材
                    </button>
                  </div>

                  {materialsLoading ? (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 md:gap-4">
                      <MaterialCardSkeleton count={8} />
                    </div>
                  ) : materials.length > 0 ? (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 md:gap-4">
                      {materials.map((material) => (
                        <MaterialCard key={material.id} material={material} />
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-16">
                      <div className="w-20 h-20 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                        <FolderOpen className="w-10 h-10 text-gray-400" />
                      </div>
                      <h4 className="text-xl font-medium text-gray-900 mb-2">暂无素材</h4>
                      <p className="text-gray-500 mb-6 max-w-sm mx-auto">
                        开始导入视频、音频或图片素材，让AI帮助您进行智能分类和管理
                      </p>
                      <button
                        onClick={() => setShowImportDialog(true)}
                        className="inline-flex items-center px-6 py-3 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
                      >
                        <Upload className="w-5 h-5 mr-2" />
                        导入第一个素材
                      </button>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* 调试工具选项卡 */}
            {activeTab === 'debug' && (
              <div>
                <div className="mb-4">
                  <h3 className="text-lg font-medium text-gray-900 mb-2">调试工具</h3>
                  <p className="text-sm text-gray-600">
                    用于开发和调试的工具集合，包括FFmpeg测试和系统诊断功能。
                  </p>
                </div>
                <FFmpegDebugPanel />
              </div>
            )}

            {/* AI分析日志选项卡 */}
            {activeTab === 'ai-logs' && project && (
              <div>
                <div className="mb-4">
                  <h3 className="text-lg font-medium text-gray-900 mb-2">AI分析日志</h3>
                  <p className="text-sm text-gray-600">
                    查看项目中所有AI视频分类的详细日志，包括分类记录和任务执行情况。
                  </p>
                </div>
                <AiAnalysisLogViewer projectId={project.id} />
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 素材导入对话框 */}
      {project && (
        <MaterialImportDialog
          isOpen={showImportDialog}
          projectId={project.id}
          onClose={() => setShowImportDialog(false)}
          onImportComplete={handleImportComplete}
        />
      )}
    </div>
  );
};