import React, { useState, useEffect } from 'react';
import { UploadCloud, Film, Settings2, MoreHorizontal } from 'lucide-react';

interface ProjectLibraryProps {
  onProjectSelect: () => void;
}

export function ProjectLibrary({ onProjectSelect }: ProjectLibraryProps) {
  const [projects, setProjects] = useState<any[]>([]);

  useEffect(() => {
    fetch('/api/projects')
      .then(res => res.json())
      .then(data => setProjects(data))
      .catch(console.error);
  }, []);

  return (
    <div className="p-8 w-full h-full overflow-y-auto bg-[#0a0a0a]">
      <div className="flex justify-between items-end mb-8 border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-medium tracking-tight text-white mb-2">视频与连续帧项目库</h1>
          <p className="text-gray-400 text-sm">上传源文件、按帧解析配置，并结构化管理多媒体资产实体。</p>
        </div>
        <button className="flex items-center gap-2 bg-cyan-600 hover:bg-cyan-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-colors border border-cyan-500 shadow-lg shadow-cyan-900/20">
          <UploadCloud size={18} />
          <span>导入多媒体资源</span>
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {projects.map((proj) => (
          <div 
            key={proj.id} 
            className="group flex flex-col bg-[#111] border border-white/5 rounded-xl overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all hover:shadow-[0_0_20px_rgba(6,182,212,0.15)]"
            onClick={onProjectSelect}
          >
            <div className={`w-full aspect-[16/9] ${proj.thumbnail} relative flex items-center justify-center overflow-hidden`}>
               {/* Stand-in for actual video frame thumbnail */}
               <Film className="w-12 h-12 text-[#2a2a2a] group-hover:text-[#333] transition-colors" />
               <div className="absolute top-2 right-2 flex gap-2">
                 <span className="backdrop-blur-md bg-black/40 text-gray-200 text-[10px] font-mono px-2 py-1 rounded border border-white/10 uppercase tracking-widest">
                   {proj.fps}
                 </span>
                 <span className="backdrop-blur-md bg-black/40 text-gray-200 text-[10px] px-2 py-1 rounded border border-white/10 flex items-center gap-1 uppercase tracking-widest">
                   {proj.status === 'Ready' ? (
                     <><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full" /> 已就绪</>
                   ) : (
                     <><div className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse" /> 解析拆帧中</>
                   )}
                 </span>
               </div>
            </div>
            <div className="p-4 flex flex-col gap-1">
              <div className="flex justify-between items-start">
                <h3 className="text-sm font-medium text-gray-200 truncate pr-4" title={proj.name}>{proj.name}</h3>
                <button className="text-gray-500 hover:text-gray-300"><MoreHorizontal size={16} /></button>
              </div>
              <div className="flex items-center gap-4 text-xs text-gray-500 font-mono mt-2">
                 <span className="flex items-center gap-1.5"><Settings2 size={12} /> {proj.frames} 帧节点</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
