import React, { useState, useEffect, useRef } from 'react';
import { FolderOpen, Plus, Image, Video, Trash2, Edit2, Check, X, Download, Clock, Search, Grid, List, Loader2, AlertCircle, Play, RefreshCw, Layers, CheckSquare, Square, Upload, Wand2, Database, ArrowRightLeft, Maximize2, Minimize2, Copy } from 'lucide-react';
import useProjects from '../hooks/useProjects';
import useCustomPresets from '../hooks/useCustomPresets';
import VideoPlayer from './VideoPlayer';
import StoryboardEditor from './StoryboardEditor';

const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInImageGen }) => {
  // Helper function to download items (handles both base64 and URL data)
  const downloadItem = async (item) => {
    try {
      const isUrl = item.data && (item.data.startsWith('http') || item.data.startsWith('/'));
      let blob;
      let filename = `lux-studio-${item.id}.${(item.mimeType || 'image/png').split('/')[1]}`;

      if (isUrl) {
        // For URLs, fetch the file and download as blob
        const response = await fetch(item.data);
        blob = await response.blob();
      } else {
        // For base64 data, convert to Blob
        const base64Data = item.data.startsWith('data:')
          ? item.data.split(',')[1]
          : item.data;

        const byteCharacters = atob(base64Data);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        blob = new Blob([byteArray], { type: item.mimeType || 'image/png' });
      }

      // Create download link
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (err) {
      console.error('Download failed:', err);
      // Fallback to data URL method
      const link = document.createElement('a');
      link.href = item.data.startsWith('data:') ? item.data : `data:${item.mimeType};base64,${item.data}`;
      link.download = `lux-studio-${item.id}.${(item.mimeType || 'image/png').split('/')[1]}`;
      link.click();
    }
  };

  const {
    projects,
    isLoading,
    isReady,
    error: dbError,
    createProject,
    deleteProject,
    renameProject,
    getProjectItems,
    removeItemFromProject,
    moveItemToProject,
    addItemToProject,
    exportProject,
    createStoryboard,
    getStoryboards,
    getStoryboard,
    updateStoryboard,
    deleteStoryboard
  } = useProjects();

  const { presets: customPresets } = useCustomPresets();

  // Resolve preset display name (handles both built-in and custom:uuid values)
  const getPresetDisplayName = (applicationValue) => {
    if (!applicationValue) return null;
    if (applicationValue.startsWith('custom:')) {
      const preset = customPresets.find(p => p.value === applicationValue);
      return preset ? preset.name : 'Custom Preset';
    }
    return applicationValue;
  };

  const [selectedProject, setSelectedProject] = useState(null);

  // Sync selectedProject with activeProjectId when projects load
  useEffect(() => {
    if (activeProjectId && projects.length > 0 && !selectedProject) {
      const project = projects.find(p => p.id === activeProjectId);
      if (project) {
        setSelectedProject(project);
      }
    }
  }, [activeProjectId, projects]);

  // Handle project selection - notify parent
  const handleSelectProject = (project) => {
    setSelectedProject(project);
    if (onProjectSelect) {
      onProjectSelect(project.id, project.name);
    }
  };
  const [selectedProjectItems, setSelectedProjectItems] = useState([]);
  const [isCreating, setIsCreating] = useState(false);
  const [newProjectName, setNewProjectName] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [editName, setEditName] = useState('');
  const [viewMode, setViewMode] = useState('grid');
  const [searchQuery, setSearchQuery] = useState('');
  const [error, setError] = useState('');
  const [previewItem, setPreviewItem] = useState(null);
  const [movingItemId, setMovingItemId] = useState(null);
  const [previewExpanded, setPreviewExpanded] = useState(false);

  // Sub-tab state: 'library' or 'storyboards'
  const [activeSubTab, setActiveSubTab] = useState('library');

  // Selection mode for creating storyboards
  const [isSelecting, setIsSelecting] = useState(false);
  const [selectedImageIds, setSelectedImageIds] = useState([]);

  // Storyboards state
  const [storyboards, setStoryboards] = useState([]);
  const [isCreatingStoryboard, setIsCreatingStoryboard] = useState(false);
  const [newStoryboardName, setNewStoryboardName] = useState('');
  const [activeStoryboard, setActiveStoryboard] = useState(null);
  const [editingStoryboardId, setEditingStoryboardId] = useState(null); // For editing existing storyboard frames

  // File upload ref
  const fileInputRef = useRef(null);
  const [isUploading, setIsUploading] = useState(false);

  // Import from backend state
  const [copiedPrompt, setCopiedPrompt] = useState(false);
  const [showImportModal, setShowImportModal] = useState(false);
  const [availableSessions, setAvailableSessions] = useState([]);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [importing, setImporting] = useState(false);
  const [importProgress, setImportProgress] = useState({ current: 0, total: 0 });

  // Load items and storyboards when project is selected
  useEffect(() => {
    if (selectedProject) {
      loadProjectItems(selectedProject.id);
      loadStoryboards(selectedProject.id);
      // Clear selection and active storyboard when switching projects
      setSelectedImageIds([]);
      setIsSelecting(false);
      setActiveStoryboard(null);
    }
  }, [selectedProject]);

  const loadProjectItems = async (projectId) => {
    try {
      const items = await getProjectItems(projectId);
      setSelectedProjectItems(items);
    } catch (err) {
      console.error('Failed to load project items:', err);
      setSelectedProjectItems([]);
    }
  };

  const loadStoryboards = async (projectId) => {
    try {
      const boards = await getStoryboards(projectId);
      setStoryboards(boards);
    } catch (err) {
      console.error('Failed to load storyboards:', err);
      setStoryboards([]);
    }
  };

  // Handle image upload
  const handleImageUpload = async (event) => {
    const files = event.target.files;
    if (!files || files.length === 0 || !selectedProject) return;

    setIsUploading(true);
    setError('');

    try {
      for (const file of files) {
        // Only accept images
        if (!file.type.startsWith('image/')) {
          continue;
        }

        // Read file as base64
        const base64 = await new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => {
            const result = reader.result;
            // Remove data URL prefix to get pure base64
            const base64Data = result.split(',')[1];
            resolve(base64Data);
          };
          reader.onerror = reject;
          reader.readAsDataURL(file);
        });

        // Add to project
        await addItemToProject(selectedProject.id, {
          type: 'image',
          prompt: `Uploaded: ${file.name}`,
          data: base64,
          mimeType: file.type,
          thumbnail: base64
        });
      }

      // Reload items
      await loadProjectItems(selectedProject.id);
    } catch (err) {
      setError('Failed to upload image: ' + err.message);
      console.error('Upload error:', err);
    } finally {
      setIsUploading(false);
      // Reset file input
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  // API URL helper for import endpoints
  const getApiUrl = (endpoint) => {
    if (import.meta.env.DEV) {
      return `/api/${endpoint}`;
    }
    const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:5015';
    return `${apiUrl}/${endpoint}`;
  };

  // Fetch available backend session files
  const fetchAvailableSessions = async () => {
    try {
      const response = await fetch(getApiUrl('list_session_files.php'));
      const data = await response.json();

      if (data.success) {
        setAvailableSessions(data.sessions);
        return data.sessions;
      } else {
        throw new Error(data.error || 'Failed to fetch sessions');
      }
    } catch (err) {
      console.error('Error fetching sessions:', err);
      setError('Failed to load backend files: ' + err.message);
      return [];
    }
  };

  // Handle opening import modal
  const handleOpenImportModal = async () => {
    if (!selectedProject) {
      setError('Please select a project first');
      return;
    }

    setShowImportModal(true);
    setSelectedFiles([]);
    await fetchAvailableSessions();
  };

  // Toggle file selection
  const toggleFileSelection = (sessionId, fileType, filename) => {
    const fileKey = `${sessionId}:${fileType}:${filename}`;
    setSelectedFiles(prev => {
      if (prev.includes(fileKey)) {
        return prev.filter(f => f !== fileKey);
      } else {
        return [...prev, fileKey];
      }
    });
  };

  // Import selected files
  const handleImportFiles = async () => {
    if (selectedFiles.length === 0 || !selectedProject) return;

    setImporting(true);
    setError('');
    setImportProgress({ current: 0, total: selectedFiles.length });

    try {
      for (let i = 0; i < selectedFiles.length; i++) {
        const fileKey = selectedFiles[i];
        const [sessionId, fileType, filename] = fileKey.split(':');

        setImportProgress({ current: i + 1, total: selectedFiles.length });

        // Fetch file from backend
        const response = await fetch(
          getApiUrl(`get_session_file.php?session_id=${encodeURIComponent(sessionId)}&file_type=${fileType}&filename=${encodeURIComponent(filename)}`)
        );
        const data = await response.json();

        if (!data.success) {
          console.error(`Failed to fetch ${filename}:`, data.error);
          continue;
        }

        // Add to project
        if (fileType === 'image') {
          await addItemToProject(selectedProject.id, {
            type: 'image',
            prompt: `Imported: ${filename}`,
            settings: {},
            data: data.data, // Base64
            mimeType: data.mime_type,
            thumbnail: data.data
          });
        } else if (fileType === 'video') {
          // Skip videos for now - they need to be in generated_videos folder
          // TODO: Implement proper video import (copy to generated_videos or create session streaming endpoint)
          console.warn(`Skipping video import for ${filename} - not yet supported`);
          continue;
        }
      }

      // Reload items
      await loadProjectItems(selectedProject.id);

      // Close modal
      setShowImportModal(false);
      setSelectedFiles([]);
      setAvailableSessions([]);

      alert(`Successfully imported ${selectedFiles.length} file(s)`);
    } catch (err) {
      setError('Import failed: ' + err.message);
      console.error('Import error:', err);
    } finally {
      setImporting(false);
      setImportProgress({ current: 0, total: 0 });
    }
  };

  // Open a storyboard for editing
  const handleOpenStoryboard = async (storyboardId) => {
    try {
      const board = await getStoryboard(storyboardId);
      setActiveStoryboard(board);
    } catch (err) {
      console.error('Failed to load storyboard:', err);
      setError(err.message);
    }
  };

  // Handle storyboard update from editor
  const handleUpdateStoryboard = async (storyboardId, updates) => {
    try {
      const updated = await updateStoryboard(storyboardId, updates);
      setActiveStoryboard(updated);
      await loadStoryboards(selectedProject.id);
      return updated;
    } catch (err) {
      setError(err.message);
      throw err;
    }
  };

  // Handle storyboard deletion from editor
  const handleDeleteStoryboard = async (storyboardId) => {
    try {
      await deleteStoryboard(storyboardId);
      setActiveStoryboard(null);
      await loadStoryboards(selectedProject.id);
    } catch (err) {
      setError(err.message);
      throw err;
    }
  };

  // Handle generate video from storyboard frame
  const handleGenerateVideoFromFrame = (videoData) => {
    if (onRerunVideo) {
      onRerunVideo(videoData);
    }
  };

  // Toggle image selection
  const toggleImageSelection = (imageId) => {
    setSelectedImageIds(prev =>
      prev.includes(imageId)
        ? prev.filter(id => id !== imageId)
        : [...prev, imageId]
    );
  };

  // Create storyboard from selected images
  const handleCreateStoryboard = async () => {
    if (!newStoryboardName.trim() || selectedImageIds.length === 0) return;

    try {
      setError('');
      await createStoryboard(selectedProject.id, newStoryboardName.trim(), selectedImageIds);
      setNewStoryboardName('');
      setIsCreatingStoryboard(false);
      setSelectedImageIds([]);
      setIsSelecting(false);
      await loadStoryboards(selectedProject.id);
      setActiveSubTab('storyboards');
    } catch (err) {
      setError(err.message);
    }
  };

  // Edit storyboard frames - go to library with current frames pre-selected
  const handleEditStoryboardFrames = (storyboardId, currentFrameIds) => {
    setEditingStoryboardId(storyboardId);
    setSelectedImageIds(currentFrameIds);
    setIsSelecting(true);
    setActiveSubTab('library');
    setActiveStoryboard(null);
  };

  // Update storyboard with new frame selection
  const handleUpdateStoryboardFrames = async () => {
    if (!editingStoryboardId || selectedImageIds.length === 0) return;

    try {
      setError('');
      // Get current storyboard to preserve annotations where possible
      const currentStoryboard = await getStoryboard(editingStoryboardId);
      const existingFrames = currentStoryboard?.frames || [];

      // Build new frames array, preserving annotations for existing frames
      const newFrames = selectedImageIds.map((imageId, index) => {
        const existingFrame = existingFrames.find(f => f.imageId === imageId);
        return {
          imageId,
          order: index,
          annotation: existingFrame?.annotation || ''
        };
      });

      await updateStoryboard(editingStoryboardId, { frames: newFrames });

      // Reload and go back to the storyboard
      await loadStoryboards(selectedProject.id);
      const updatedBoard = await getStoryboard(editingStoryboardId);
      setActiveStoryboard(updatedBoard);
      setEditingStoryboardId(null);
      setSelectedImageIds([]);
      setIsSelecting(false);
      setActiveSubTab('storyboards');
    } catch (err) {
      setError(err.message);
    }
  };

  // Handle create project
  const handleCreateProject = async () => {
    if (!newProjectName.trim()) return;

    try {
      setError('');
      const newProject = await createProject(newProjectName.trim());
      setNewProjectName('');
      setIsCreating(false);
      setSelectedProject(newProject);
      // Notify parent of new project selection
      if (onProjectSelect) {
        onProjectSelect(newProject.id, newProject.name);
      }
    } catch (err) {
      setError(err.message);
    }
  };

  // Handle delete project
  const handleDeleteProject = async (projectId) => {
    if (!confirm('Are you sure you want to delete this project and all its items?')) return;

    try {
      setError('');
      await deleteProject(projectId);
      if (selectedProject?.id === projectId) {
        setSelectedProject(null);
        setSelectedProjectItems([]);
        // Clear parent state if deleted project was active
        if (onProjectSelect) {
          onProjectSelect(null, null);
        }
      }
    } catch (err) {
      setError(err.message);
    }
  };

  // Handle rename project
  const handleRenameProject = async (projectId) => {
    if (!editName.trim()) return;

    try {
      setError('');
      const updated = await renameProject(projectId, editName.trim());
      setEditingId(null);
      setEditName('');
      if (selectedProject?.id === projectId) {
        setSelectedProject(updated);
        // Notify parent of name change
        if (onProjectSelect) {
          onProjectSelect(updated.id, updated.name);
        }
      }
    } catch (err) {
      setError(err.message);
    }
  };

  // Handle delete item
  const handleDeleteItem = async (itemId) => {
    if (!confirm('Delete this item?')) return;

    try {
      setError('');
      await removeItemFromProject(selectedProject.id, itemId);
      setSelectedProjectItems(prev => prev.filter(i => i.id !== itemId));
    } catch (err) {
      setError(err.message);
    }
  };

  // Handle export project
  const handleExportProject = async (projectId) => {
    try {
      setError('');
      const data = await exportProject(projectId);
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `${data.project.name.replace(/\s+/g, '_')}_export.json`;
      link.click();
      URL.revokeObjectURL(url);
    } catch (err) {
      setError(err.message);
    }
  };

  // Filter projects by search
  const filteredProjects = projects.filter(p =>
    p.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Format date
  const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
    });
  };

  // Count items by type
  const countItemsByType = (items, type) => items.filter(i => i.type === type).length;

  // Show loading state
  if (!isReady || isLoading) {
    return (
      <div className="flex items-center justify-center h-[60vh]">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin text-cinema-gold mx-auto mb-4" />
          <p className="text-slate-400">Loading projects...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
      {/* Left Sidebar: Project List */}
      <div className="lg:col-span-4">
        <div className="bg-slate-925 rounded p-6 space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-normal text-slate-200 flex items-center space-x-2">
              <FolderOpen className="w-5 h-5 text-cinema-gold" />
              <span>Projects</span>
            </h2>
            <button
              onClick={() => setIsCreating(true)}
              className="p-2 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded transition-all"
            >
              <Plus className="w-4 h-4" />
            </button>
          </div>

          {/* Error Display */}
          {(error || dbError) && (
            <div className="flex items-center gap-2 p-3 bg-red-950/30 border border-red-900/50 rounded text-red-400 text-sm">
              <AlertCircle className="w-4 h-4 flex-shrink-0" />
              <span>{error || dbError}</span>
            </div>
          )}

          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search projects..."
              className="w-full pl-10 pr-4 py-2 bg-slate-800 border border-slate-700 rounded text-slate-200 placeholder-slate-500 focus:border-cinema-gold focus:outline-none text-sm"
            />
          </div>

          {/* Create New Project */}
          {isCreating && (
            <div className="flex gap-2">
              <input
                type="text"
                value={newProjectName}
                onChange={(e) => setNewProjectName(e.target.value)}
                placeholder="Project name..."
                className="flex-1 px-3 py-2 bg-slate-800 border border-cinema-gold rounded text-slate-200 placeholder-slate-500 focus:outline-none text-sm"
                autoFocus
                onKeyDown={(e) => e.key === 'Enter' && handleCreateProject()}
              />
              <button
                onClick={handleCreateProject}
                className="p-2 bg-green-600 hover:bg-green-500 text-white rounded"
              >
                <Check className="w-4 h-4" />
              </button>
              <button
                onClick={() => { setIsCreating(false); setNewProjectName(''); }}
                className="p-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          )}

          {/* Project List */}
          <div className="space-y-2 max-h-[60vh] overflow-y-auto">
            {filteredProjects.length === 0 ? (
              <div className="text-center py-8 text-slate-500">
                <FolderOpen className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>{projects.length === 0 ? 'No projects yet' : 'No matching projects'}</p>
                <p className="text-xs mt-1">
                  {projects.length === 0 ? 'Create one to start organizing' : 'Try a different search'}
                </p>
              </div>
            ) : (
              filteredProjects.map((project) => (
                <div
                  key={project.id}
                  onClick={() => handleSelectProject(project)}
                  className={`group p-4 rounded cursor-pointer transition-all ${
                    selectedProject?.id === project.id
                      ? 'bg-cinema-gold/20 border border-cinema-gold'
                      : 'bg-slate-800 hover:bg-slate-700'
                  }`}
                >
                  {editingId === project.id ? (
                    <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
                      <input
                        type="text"
                        value={editName}
                        onChange={(e) => setEditName(e.target.value)}
                        className="flex-1 px-2 py-1 bg-slate-800 border border-cinema-gold rounded text-slate-200 text-sm"
                        autoFocus
                        onKeyDown={(e) => e.key === 'Enter' && handleRenameProject(project.id)}
                      />
                      <button
                        onClick={() => handleRenameProject(project.id)}
                        className="p-1 bg-green-600 hover:bg-green-500 text-white rounded"
                      >
                        <Check className="w-3 h-3" />
                      </button>
                      <button
                        onClick={() => { setEditingId(null); setEditName(''); }}
                        className="p-1 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded"
                      >
                        <X className="w-3 h-3" />
                      </button>
                    </div>
                  ) : (
                    <>
                      <div className="flex items-center justify-between">
                        <h3 className="font-normal text-slate-200 truncate">{project.name}</h3>
                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              setEditingId(project.id);
                              setEditName(project.name);
                            }}
                            className="p-1 hover:bg-slate-700 rounded"
                          >
                            <Edit2 className="w-3 h-3 text-slate-400" />
                          </button>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handleDeleteProject(project.id);
                            }}
                            className="p-1 hover:bg-red-900/50 rounded"
                          >
                            <Trash2 className="w-3 h-3 text-red-400" />
                          </button>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 mt-2 text-xs font-mono text-slate-500">
                        <span className="flex items-center gap-1 ml-auto">
                          <Clock className="w-3 h-3" />
                          {formatDate(project.updatedAt)}
                        </span>
                      </div>
                    </>
                  )}
                </div>
              ))
            )}
          </div>
        </div>
      </div>

      {/* Right Panel: Project Contents */}
      <div className="lg:col-span-8">
        <div className="bg-slate-925 rounded p-6 min-h-[70vh]">
          {selectedProject ? (
            <div className="space-y-4">
              {/* Project Header */}
              <div className="flex items-center justify-between pb-4">
                <div>
                  <h2 className="text-xl font-normal text-slate-200">{selectedProject.name}</h2>
                  <p className="text-xs font-mono text-slate-500 mt-1">
                    Created {formatDate(selectedProject.createdAt)} · {selectedProjectItems.length} items
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => handleExportProject(selectedProject.id)}
                    className="group relative p-2 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-slate-200 rounded transition-colors"
                  >
                    <Download className="w-4 h-4" />
                    <span className="absolute bottom-full right-0 mb-2 px-2 py-1 text-xs text-slate-200 bg-slate-700 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                      Export Project Backup (JSON)
                    </span>
                  </button>
                </div>
              </div>

              {/* Sub-tabs: Library | Storyboards */}
              <div className="flex items-center gap-4 pb-2">
                <button
                  onClick={() => { setActiveSubTab('library'); setIsSelecting(false); setSelectedImageIds([]); }}
                  className={`flex items-center gap-2 px-3 py-2 rounded transition-all ${
                    activeSubTab === 'library'
                      ? 'bg-cinema-gold/20 text-cinema-gold'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Image className="w-4 h-4" />
                  <span>Library</span>
                </button>
                <button
                  onClick={() => { setActiveSubTab('storyboards'); setIsSelecting(false); setSelectedImageIds([]); }}
                  className={`flex items-center gap-2 px-3 py-2 rounded transition-all ${
                    activeSubTab === 'storyboards'
                      ? 'bg-cinema-gold/20 text-cinema-gold'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Layers className="w-4 h-4" />
                  <span>Storyboards</span>
                  {storyboards.length > 0 && (
                    <span className="text-xs bg-slate-700 px-1.5 py-0.5 rounded">{storyboards.length}</span>
                  )}
                </button>
              </div>

              {/* Library Controls (only show when Library tab is active) */}
              {activeSubTab === 'library' && (
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    {/* Selection mode toggle */}
                    <button
                      onClick={() => {
                        setIsSelecting(!isSelecting);
                        if (isSelecting) setSelectedImageIds([]);
                      }}
                      className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm transition-all ${
                        isSelecting
                          ? 'bg-cinema-gold text-slate-950'
                          : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                      }`}
                    >
                      {isSelecting ? <CheckSquare className="w-4 h-4" /> : <Square className="w-4 h-4" />}
                      {isSelecting ? `${selectedImageIds.length} selected` : 'Select'}
                    </button>

                    {/* Create/Update Storyboard button (when images are selected) */}
                    {isSelecting && selectedImageIds.length > 0 && (
                      editingStoryboardId ? (
                        <div className="flex items-center gap-2">
                          <button
                            onClick={handleUpdateStoryboardFrames}
                            className="flex items-center gap-2 px-3 py-1.5 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-all"
                          >
                            <Check className="w-4 h-4" />
                            Update Frames
                          </button>
                          <button
                            onClick={() => {
                              setEditingStoryboardId(null);
                              setSelectedImageIds([]);
                              setIsSelecting(false);
                            }}
                            className="flex items-center gap-2 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded text-sm transition-all"
                          >
                            <X className="w-4 h-4" />
                            Cancel
                          </button>
                        </div>
                      ) : (
                        <button
                          onClick={() => setIsCreatingStoryboard(true)}
                          className="flex items-center gap-2 px-3 py-1.5 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-all"
                        >
                          <Layers className="w-4 h-4" />
                          Create Storyboard
                        </button>
                      )
                    )}
                  </div>

                  {/* Upload and View mode toggles */}
                  <div className="flex items-center gap-2">
                    {/* Upload button */}
                    <button
                      onClick={() => fileInputRef.current?.click()}
                      disabled={isUploading}
                      className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-slate-200 rounded text-sm transition-all disabled:opacity-50"
                    >
                      {isUploading ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Upload className="w-4 h-4" />
                      )}
                      {isUploading ? 'Uploading...' : 'Upload'}
                    </button>
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*"
                      multiple
                      onChange={handleImageUpload}
                      className="hidden"
                    />

                    {/* Import from Backend button */}
                    <button
                      onClick={handleOpenImportModal}
                      disabled={importing}
                      className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-slate-200 rounded text-sm transition-all disabled:opacity-50"
                    >
                      {importing ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Database className="w-4 h-4" />
                      )}
                      {importing ? `Importing ${importProgress.current}/${importProgress.total}...` : 'Import'}
                    </button>

                    {/* Separator */}
                    <div className="w-px h-6 bg-slate-700" />

                    <button
                      onClick={() => setViewMode('grid')}
                      className={`p-2 rounded transition-all ${
                        viewMode === 'grid' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                      }`}
                    >
                      <Grid className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => setViewMode('list')}
                      className={`p-2 rounded transition-all ${
                        viewMode === 'list' ? 'bg-cinema-gold text-slate-950' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
                      }`}
                    >
                      <List className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              )}

              {/* Create Storyboard Modal */}
              {isCreatingStoryboard && (
                <div className="bg-slate-800 rounded p-4">
                  <h3 className="text-sm font-normal text-slate-200 mb-2">Name your storyboard</h3>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={newStoryboardName}
                      onChange={(e) => setNewStoryboardName(e.target.value)}
                      placeholder="Storyboard name..."
                      className="flex-1 px-3 py-2 bg-slate-800 border border-slate-600 rounded text-slate-200 placeholder-slate-500 focus:border-cinema-gold focus:outline-none text-sm"
                      autoFocus
                      onKeyDown={(e) => e.key === 'Enter' && handleCreateStoryboard()}
                    />
                    <button
                      onClick={handleCreateStoryboard}
                      disabled={!newStoryboardName.trim()}
                      className="px-4 py-2 bg-cinema-gold hover:bg-amber-400 disabled:bg-slate-700 disabled:text-slate-500 text-slate-950 rounded text-sm font-normal transition-all"
                    >
                      Create
                    </button>
                    <button
                      onClick={() => { setIsCreatingStoryboard(false); setNewStoryboardName(''); }}
                      className="px-3 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded text-sm"
                    >
                      Cancel
                    </button>
                  </div>
                  <p className="text-xs text-slate-500 mt-2">
                    {selectedImageIds.length} images selected
                  </p>
                </div>
              )}

              {/* Import from Backend Modal */}
              {showImportModal && (
                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
                  <div className="bg-slate-800 rounded p-6 max-w-4xl w-full max-h-[80vh] overflow-y-auto">
                    <div className="flex items-center justify-between mb-4">
                      <h2 className="text-xl font-normal text-slate-200">Import from Backend</h2>
                      <button
                        onClick={() => setShowImportModal(false)}
                        className="p-2 hover:bg-slate-700 rounded transition-colors"
                      >
                        <X className="w-5 h-5 text-slate-400" />
                      </button>
                    </div>

                    {availableSessions.length === 0 ? (
                      <div className="text-center py-12 text-slate-500">
                        <Database className="w-16 h-16 mx-auto mb-4 opacity-30" />
                        <p className="text-lg">No backend files found</p>
                        <p className="text-sm mt-2">Generate some images or videos to see them here</p>
                      </div>
                    ) : (
                      <>
                        <p className="text-sm text-slate-400 mb-4">
                          Found {availableSessions.reduce((acc, s) => acc + s.images.length, 0)} image(s) in {availableSessions.length} session(s).
                          Files auto-delete after 24 hours.
                          {availableSessions.reduce((acc, s) => acc + s.videos.length, 0) > 0 && (
                            <span className="block text-amber-400 text-xs mt-1">
                              Note: Video import not yet supported (videos must be in generated_videos folder)
                            </span>
                          )}
                        </p>

                        {/* Session list */}
                        <div className="space-y-4">
                          {availableSessions.map((session) => (
                            <div key={session.session_id} className="bg-slate-800 rounded p-4">
                              <div className="flex items-center justify-between mb-3">
                                <h3 className="text-sm font-normal text-slate-300">
                                  Session: <span className="font-mono">{session.session_id.substring(0, 8)}...</span>
                                </h3>
                                <span className="text-xs text-slate-500">
                                  {session.images.length} image(s)
                                </span>
                              </div>

                              {/* Images */}
                              {session.images.length > 0 && (
                                <div className="space-y-2">
                                  <h4 className="text-xs font-normal text-slate-400">Images</h4>
                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                                    {session.images.map((img) => {
                                      const fileKey = `${session.session_id}:image:${img.filename}`;
                                      const isSelected = selectedFiles.includes(fileKey);
                                      const expiresIn = Math.floor(img.time_remaining / 3600);

                                      return (
                                        <div
                                          key={img.filename}
                                          onClick={() => toggleFileSelection(session.session_id, 'image', img.filename)}
                                          className={`relative p-2 rounded border-2 cursor-pointer transition-all ${
                                            isSelected
                                              ? 'border-cinema-gold bg-cinema-gold/10'
                                              : 'border-slate-700 hover:border-slate-600'
                                          }`}
                                        >
                                          <div className="aspect-square bg-slate-700/50 rounded flex items-center justify-center mb-2">
                                            <Image className="w-8 h-8 text-slate-500" />
                                          </div>
                                          <p className="text-xs text-slate-400 truncate">{img.filename}</p>
                                          <p className="text-xs font-mono text-slate-500">
                                            {img.size_kb} KB • {expiresIn}h left
                                          </p>
                                          {isSelected && (
                                            <div className="absolute top-1 right-1 bg-cinema-gold rounded-full p-1">
                                              <Check className="w-3 h-3 text-slate-950" />
                                            </div>
                                          )}
                                        </div>
                                      );
                                    })}
                                  </div>
                                </div>
                              )}

                              {/* Videos - Hidden for now since import not supported */}
                              {false && session.videos.length > 0 && (
                                <div className="space-y-2 mt-4">
                                  <h4 className="text-xs font-normal text-slate-400">Videos (Import Not Supported)</h4>
                                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                                    {session.videos.map((vid) => {
                                      const expiresIn = Math.floor(vid.time_remaining / 3600);

                                      return (
                                        <div
                                          key={vid.filename}
                                          className="relative p-2 rounded border-2 border-slate-700 opacity-50 cursor-not-allowed"
                                        >
                                          <div className="aspect-square bg-slate-700/50 rounded flex items-center justify-center mb-2">
                                            <Video className="w-8 h-8 text-slate-500" />
                                          </div>
                                          <p className="text-xs text-slate-400 truncate">{vid.filename}</p>
                                          <p className="text-xs text-slate-500">
                                            {vid.size_mb} MB • {expiresIn}h left
                                          </p>
                                        </div>
                                      );
                                    })}
                                  </div>
                                </div>
                              )}
                            </div>
                          ))}
                        </div>

                        {/* Action buttons */}
                        <div className="flex items-center justify-between mt-6 pt-4">
                          <p className="text-sm text-slate-400">
                            {selectedFiles.length} file(s) selected
                          </p>
                          <div className="flex gap-2">
                            <button
                              onClick={() => setShowImportModal(false)}
                              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-sm transition-all"
                            >
                              Cancel
                            </button>
                            <button
                              onClick={handleImportFiles}
                              disabled={selectedFiles.length === 0 || importing}
                              className="flex items-center gap-2 px-4 py-2 bg-cinema-gold hover:bg-amber-400 disabled:bg-slate-700 disabled:text-slate-500 text-slate-950 rounded text-sm font-normal transition-all"
                            >
                              {importing ? (
                                <>
                                  <Loader2 className="w-4 h-4 animate-spin" />
                                  Importing {importProgress.current}/{importProgress.total}
                                </>
                              ) : (
                                <>
                                  <Download className="w-4 h-4" />
                                  Import {selectedFiles.length} File(s)
                                </>
                              )}
                            </button>
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              )}

              {/* LIBRARY TAB CONTENT */}
              {activeSubTab === 'library' && (
                <>
                  {/* Project Items */}
                  {selectedProjectItems.length === 0 ? (
                    <div className="text-center py-16 text-slate-500">
                      <FolderOpen className="w-16 h-16 mx-auto mb-4 opacity-30" />
                      <p className="text-lg">This project is empty</p>
                      <p className="text-sm mt-2">Generate images or videos and save them here</p>
                    </div>
                  ) : (
                    <div className={viewMode === 'grid'
                      ? 'grid grid-cols-2 md:grid-cols-3 gap-4'
                      : 'space-y-2'
                    }>
                      {selectedProjectItems.map((item) => (
                        viewMode === 'grid' ? (
                          <div
                            key={item.id}
                            onClick={() => {
                              if (isSelecting && item.type === 'image') {
                                toggleImageSelection(item.id);
                              } else {
                                setPreviewItem(item);
                              }
                            }}
                            className={`group relative aspect-square bg-slate-800 rounded overflow-hidden border transition-all cursor-pointer ${
                              isSelecting && selectedImageIds.includes(item.id)
                                ? 'border-cinema-gold ring-2 ring-cinema-gold'
                                : 'border-slate-700 hover:border-cinema-gold'
                            }`}
                          >
                            {/* Selection Checkbox (only for images in selection mode) */}
                            {isSelecting && item.type === 'image' && (
                              <div className="absolute top-2 right-2 z-10">
                                <div className={`w-6 h-6 rounded flex items-center justify-center transition-all ${
                                  selectedImageIds.includes(item.id)
                                    ? 'bg-cinema-gold text-slate-950'
                                    : 'bg-slate-900/80 border border-slate-600 text-transparent'
                                }`}>
                                  <Check className="w-4 h-4" />
                                </div>
                              </div>
                            )}

                            {/* Thumbnail or placeholder — NEVER use full item.data here (causes OOM with many large images) */}
                            {item.thumbnail ? (
                              <img
                                src={item.thumbnail.startsWith('data:') ? item.thumbnail : `data:image/jpeg;base64,${item.thumbnail}`}
                                alt={item.prompt}
                                className="w-full h-full object-cover"
                                loading="lazy"
                              />
                            ) : (
                              <div className="absolute inset-0 flex items-center justify-center bg-slate-800">
                                {item.type === 'image' ? (
                                  <Image className="w-8 h-8 text-slate-600" />
                                ) : (
                                  <Video className="w-12 h-12 text-slate-500" />
                                )}
                              </div>
                            )}

                            {/* Type Badge */}
                            <div className={`absolute top-2 left-2 px-2 py-1 rounded text-xs font-normal ${
                              item.type === 'image'
                                ? 'bg-blue-900/80 text-blue-300'
                                : item.settings?.engine === 'kling'
                                ? 'bg-indigo-900/80 text-indigo-300'
                                : 'bg-purple-900/80 text-purple-300'
                            }`}>
                              {item.type === 'image' ? 'IMG' : item.settings?.engine === 'kling' ? 'KLING' : 'VEO'}
                            </div>

                            {/* Hover Overlay (hide when selecting) */}
                            {!isSelecting && (
                              <div className="absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    downloadItem(item);
                                  }}
                                  className="p-2 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded"
                                >
                                  <Download className="w-4 h-4" />
                                </button>
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleDeleteItem(item.id);
                                  }}
                                  className="p-2 bg-red-600 hover:bg-red-500 text-white rounded"
                                >
                                  <Trash2 className="w-4 h-4" />
                                </button>
                              </div>
                            )}
                          </div>
                        ) : (
                          <div
                            key={item.id}
                            onClick={() => {
                              if (isSelecting && item.type === 'image') {
                                toggleImageSelection(item.id);
                              } else {
                                setPreviewItem(item);
                              }
                            }}
                            className={`flex items-center gap-4 p-3 bg-slate-800 rounded border transition-all cursor-pointer ${
                              isSelecting && selectedImageIds.includes(item.id)
                                ? 'border-cinema-gold bg-cinema-gold/10'
                                : 'border-slate-700 hover:border-slate-600'
                            }`}
                          >
                            {/* Selection Checkbox for list view */}
                            {isSelecting && item.type === 'image' && (
                              <div className={`w-6 h-6 rounded flex items-center justify-center flex-shrink-0 transition-all ${
                                selectedImageIds.includes(item.id)
                                  ? 'bg-cinema-gold text-slate-950'
                                  : 'bg-slate-900 border border-slate-600 text-transparent'
                              }`}>
                                <Check className="w-4 h-4" />
                              </div>
                            )}
                            <div className={`w-10 h-10 rounded flex items-center justify-center flex-shrink-0 ${
                              item.type === 'image' ? 'bg-blue-900/50' : 'bg-slate-800'
                            }`}>
                              {item.type === 'image' ? (
                                <Image className="w-5 h-5 text-blue-400" />
                              ) : (
                                <Video className="w-5 h-5 text-slate-500" />
                              )}
                            </div>
                            <div className="flex-1 min-w-0">
                              <p className="text-sm text-slate-200 truncate">{item.prompt}</p>
                              <div className="flex items-center gap-2 text-xs text-slate-500">
                                <span className="font-mono">{formatDate(item.createdAt)}</span>
                                {item.settings?.application && (
                                  <span className="px-1.5 py-0.5 bg-slate-800 rounded text-slate-400 truncate max-w-[150px]">
                                    {getPresetDisplayName(item.settings.application)}
                                  </span>
                                )}
                              </div>
                            </div>
                            {!isSelecting && (
                              <div className="flex items-center gap-1 relative">
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    setMovingItemId(movingItemId === item.id ? null : item.id);
                                  }}
                                  className={`p-2 rounded ${movingItemId === item.id ? 'bg-cinema-gold/20' : 'hover:bg-slate-700'}`}
                                  title="Move to another project"
                                >
                                  <ArrowRightLeft className={`w-4 h-4 ${movingItemId === item.id ? 'text-cinema-gold' : 'text-slate-400'}`} />
                                </button>
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    downloadItem(item);
                                  }}
                                  className="p-2 hover:bg-slate-700 rounded"
                                >
                                  <Download className="w-4 h-4 text-slate-400" />
                                </button>
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleDeleteItem(item.id);
                                  }}
                                  className="p-2 hover:bg-red-900/50 rounded"
                                >
                                  <Trash2 className="w-4 h-4 text-red-400" />
                                </button>
                                {movingItemId === item.id && (
                                  <div className="absolute right-0 top-full mt-1 z-20 bg-slate-800 border border-slate-700 rounded py-1 min-w-[180px]"
                                    onClick={(e) => e.stopPropagation()}
                                  >
                                    <div className="px-3 py-1.5 text-xs font-normal text-slate-500 uppercase tracking-wider">Move to...</div>
                                    {projects
                                      .filter(p => p.id !== selectedProject?.id)
                                      .map(p => (
                                        <button
                                          key={p.id}
                                          onClick={async (e) => {
                                            e.stopPropagation();
                                            try {
                                              await moveItemToProject(item.id, selectedProject.id, p.id);
                                              setMovingItemId(null);
                                              loadProjectItems(selectedProject.id);
                                            } catch (err) {
                                              console.error('Failed to move item:', err);
                                            }
                                          }}
                                          className="w-full text-left px-3 py-2 text-sm text-slate-300 hover:bg-slate-700 transition-colors flex items-center gap-2"
                                        >
                                          <FolderOpen className="w-3.5 h-3.5 text-slate-500" />
                                          <span className="truncate">{p.name}</span>
                                        </button>
                                      ))
                                    }
                                    {projects.filter(p => p.id !== selectedProject?.id).length === 0 && (
                                      <div className="px-3 py-2 text-xs text-slate-500">No other projects</div>
                                    )}
                                  </div>
                                )}
                              </div>
                            )}
                          </div>
                        )
                      ))}
                    </div>
                  )}
                </>
              )}

              {/* STORYBOARDS TAB CONTENT */}
              {activeSubTab === 'storyboards' && (
                <div className="space-y-4">
                  {/* Show StoryboardEditor if a storyboard is active */}
                  {activeStoryboard ? (
                    <StoryboardEditor
                      storyboard={activeStoryboard}
                      projectItems={selectedProjectItems}
                      onBack={() => setActiveStoryboard(null)}
                      onUpdate={handleUpdateStoryboard}
                      onDelete={handleDeleteStoryboard}
                      onGenerateVideo={handleGenerateVideoFromFrame}
                      onEditFrames={handleEditStoryboardFrames}
                    />
                  ) : (
                    <>
                      {/* Storyboards Header */}
                      <div className="flex items-center justify-between">
                        <p className="text-sm text-slate-400">
                          {storyboards.length} storyboard{storyboards.length !== 1 ? 's' : ''}
                        </p>
                        <button
                          onClick={() => {
                            setActiveSubTab('library');
                            setIsSelecting(true);
                          }}
                          className="flex items-center gap-2 px-3 py-1.5 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-all"
                        >
                          <Plus className="w-4 h-4" />
                          New Storyboard
                        </button>
                      </div>

                      {/* Storyboards List */}
                      {storyboards.length === 0 ? (
                        <div className="text-center py-16 text-slate-500">
                          <Layers className="w-16 h-16 mx-auto mb-4 opacity-30" />
                          <p className="text-lg">No storyboards yet</p>
                          <p className="text-sm mt-2">Select images from your library to create a storyboard</p>
                          <button
                            onClick={() => {
                              setActiveSubTab('library');
                              setIsSelecting(true);
                            }}
                            className="mt-4 px-4 py-2 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-all"
                          >
                            Select Images
                          </button>
                        </div>
                      ) : (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          {storyboards.map((board) => (
                            <div
                              key={board.id}
                              onClick={() => handleOpenStoryboard(board.id)}
                              className="group p-4 bg-slate-800 rounded hover:bg-slate-700 transition-all cursor-pointer"
                            >
                              <div className="flex items-center justify-between mb-3">
                                <h3 className="font-normal text-slate-200">{board.name}</h3>
                                <span className="text-xs text-slate-500">{board.frames?.length || 0} frames</span>
                              </div>
                              {/* Frame thumbnails preview */}
                              <div className="flex gap-1 mb-3">
                                {board.frames?.slice(0, 4).map((frame, idx) => {
                                  const frameItem = selectedProjectItems.find(item => item.id === frame.imageId);
                                  return (
                                    <div key={idx} className="w-12 h-12 bg-slate-700 rounded overflow-hidden">
                                      {frameItem && (
                                        <img
                                          src={
                                            frameItem.thumbnail
                                              ? (frameItem.thumbnail.startsWith('data:') ? frameItem.thumbnail : `data:image/jpeg;base64,${frameItem.thumbnail}`)
                                              : (frameItem.data.startsWith('data:') || frameItem.data.startsWith('http'))
                                                ? frameItem.data
                                                : `data:${frameItem.mimeType};base64,${frameItem.data}`
                                          }
                                          alt=""
                                          className="w-full h-full object-cover"
                                        />
                                      )}
                                    </div>
                                  );
                                })}
                                {(board.frames?.length || 0) > 4 && (
                                  <div className="w-12 h-12 bg-slate-700 rounded flex items-center justify-center text-xs text-slate-400">
                                    +{board.frames.length - 4}
                                  </div>
                                )}
                              </div>
                              <p className="text-xs font-mono text-slate-500">
                                Updated {formatDate(board.updatedAt)}
                              </p>
                            </div>
                          ))}
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center h-full text-slate-500 py-16">
              <FolderOpen className="w-20 h-20 mb-4 opacity-30" />
              <p className="text-lg">Select a project</p>
              <p className="text-sm mt-2">Choose a project from the sidebar or create a new one</p>
            </div>
          )}
        </div>
      </div>

      {/* Preview Modal */}
      {previewItem && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
          onClick={() => { setPreviewItem(null); setPreviewExpanded(false); }}
        >
          <div
            className={`relative max-h-[90vh] w-full mx-4 transition-all duration-300 ${previewExpanded ? 'max-w-[95vw]' : 'max-w-4xl'}`}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Close + Expand buttons */}
            <div className="absolute -top-12 right-0 flex items-center gap-2">
              <button
                onClick={() => setPreviewExpanded(!previewExpanded)}
                className="p-2 text-white hover:text-cinema-gold transition-colors"
                title={previewExpanded ? 'Collapse' : 'Expand'}
              >
                {previewExpanded ? <Minimize2 className="w-6 h-6" /> : <Maximize2 className="w-6 h-6" />}
              </button>
              <button
                onClick={() => { setPreviewItem(null); setPreviewExpanded(false); }}
                className="p-2 text-white hover:text-cinema-gold transition-colors"
              >
                <X className="w-8 h-8" />
              </button>
            </div>

            {/* Content */}
            <div className="bg-slate-800 rounded overflow-hidden">
              {previewItem.type === 'image' ? (
                <img
                  src={
                    previewItem.data.startsWith('data:') || previewItem.data.startsWith('http')
                      ? previewItem.data
                      : `data:${previewItem.mimeType};base64,${previewItem.data}`
                  }
                  alt={previewItem.prompt}
                  className={`w-full h-auto object-contain transition-all duration-300 ${previewExpanded ? 'max-h-[80vh]' : 'max-h-[70vh]'}`}
                />
              ) : (
                <div className="flex justify-center">
                  <VideoPlayer
                    src={previewItem.data}
                    autoPlay={true}
                    muted={false}
                    onSaveToProject={selectedProject ? async (frameData) => {
                      await addItemToProject(selectedProject.id, {
                        type: 'image',
                        prompt: frameData.prompt,
                        data: frameData.data,
                        mimeType: frameData.mimeType,
                        thumbnail: frameData.data
                      });
                      // Reload items to show the new frame
                      loadProjectItems(selectedProject.id);
                    } : null}
                  />
                </div>
              )}

              {/* Info bar */}
              <div className="p-4">
                <div className="flex items-start justify-between gap-3">
                  <p className="text-sm text-slate-300 line-clamp-2 flex-1">{previewItem.prompt}</p>
                  {previewItem.prompt && (
                    <button
                      onClick={() => {
                        navigator.clipboard.writeText(previewItem.prompt);
                        setCopiedPrompt(true);
                        setTimeout(() => setCopiedPrompt(false), 2000);
                      }}
                      className="flex items-center gap-1.5 px-2.5 py-1 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded text-xs font-normal transition-colors shrink-0"
                      title="Copy prompt to clipboard"
                    >
                      {copiedPrompt ? (
                        <>
                          <Check className="w-3 h-3 text-emerald-400" />
                          <span className="text-emerald-400">Copied</span>
                        </>
                      ) : (
                        <>
                          <Copy className="w-3 h-3" />
                          <span>Copy Prompt</span>
                        </>
                      )}
                    </button>
                  )}
                </div>
                {previewItem.settings?.application && (
                  <div className="mt-2">
                    <span className="text-xs px-2 py-1 bg-slate-800 rounded-full text-slate-400 border border-slate-700">
                      {getPresetDisplayName(previewItem.settings.application)}
                    </span>
                  </div>
                )}
                {previewItem.type === 'video' && (
                  <div className="mt-2 flex gap-1.5">
                    <span className={`text-xs px-2 py-0.5 rounded-full font-normal ${
                      previewItem.settings?.engine === 'kling'
                        ? 'bg-indigo-900/50 text-indigo-300 border border-indigo-700'
                        : 'bg-emerald-900/50 text-emerald-300 border border-emerald-700'
                    }`}>
                      {previewItem.settings?.engine === 'kling'
                        ? `Kling ${previewItem.settings?.klingModel?.replace('kling-', '').toUpperCase() || 'AI'}`
                        : `Veo ${previewItem.settings?.modelType === 'fast' ? 'Fast' : 'Std'}`}
                    </span>
                    {previewItem.settings?.engine === 'kling' && previewItem.settings?.klingTaskId && (
                      <span className="text-xs px-2 py-0.5 bg-slate-800 rounded-full text-slate-500 border border-slate-700 font-mono">
                        ID: {previewItem.settings.klingTaskId.substring(0, 8)}...
                      </span>
                    )}
                  </div>
                )}
                <div className="flex items-center justify-between mt-3">
                  <span className="text-xs font-mono text-slate-500">{formatDate(previewItem.createdAt)}</span>
                  <div className="flex gap-2">
                    {/* Edit in Image Gen button for images */}
                    {previewItem.type === 'image' && onEditInImageGen && (
                      <button
                        onClick={() => {
                          onEditInImageGen({
                            prompt: previewItem.prompt,
                            imageData: previewItem.data.startsWith('data:') || previewItem.data.startsWith('http')
                              ? previewItem.data
                              : `data:${previewItem.mimeType};base64,${previewItem.data}`,
                            settings: previewItem.settings
                          });
                          setPreviewItem(null);
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-900 rounded text-sm font-normal transition-colors"
                      >
                        <Wand2 className="w-4 h-4" />
                        Edit in Image Gen
                      </button>
                    )}
                    {/* Generate Video from image (load as first frame) */}
                    {previewItem.type === 'image' && onRerunVideo && (
                      <button
                        onClick={() => {
                          onRerunVideo({
                            prompt: '',
                            settings: {},
                            referenceImages: [{
                              data: previewItem.data,
                              mime_type: previewItem.mimeType || 'image/png'
                            }]
                          });
                          setPreviewItem(null);
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-colors"
                      >
                        <Video className="w-4 h-4" />
                        Generate Video
                      </button>
                    )}
                    {/* Re-run button for videos */}
                    {previewItem.type === 'video' && onRerunVideo && (
                      <button
                        onClick={() => {
                          onRerunVideo({
                            prompt: previewItem.prompt,
                            settings: previewItem.settings,
                            referenceImages: previewItem.referenceImages
                          });
                          setPreviewItem(null);
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-900 rounded text-sm font-normal transition-colors"
                      >
                        <RefreshCw className="w-4 h-4" />
                        Re-run
                      </button>
                    )}
                    {/* Move to another project */}
                    {projects.filter(p => p.id !== selectedProject?.id).length > 0 && (
                      <div className="relative">
                        <button
                          onClick={() => setMovingItemId(movingItemId === previewItem.id ? null : previewItem.id)}
                          className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-normal transition-colors ${
                            movingItemId === previewItem.id
                              ? 'bg-cinema-gold text-slate-950'
                              : 'bg-slate-700 hover:bg-slate-600 text-slate-300'
                          }`}
                        >
                          <ArrowRightLeft className="w-4 h-4" />
                          Move to
                        </button>
                        {movingItemId === previewItem.id && (
                          <div className="absolute bottom-full mb-1 right-0 z-20 bg-slate-800 border border-slate-700 rounded py-1 min-w-[180px]">
                            {projects
                              .filter(p => p.id !== selectedProject?.id)
                              .map(p => (
                                <button
                                  key={p.id}
                                  onClick={async () => {
                                    try {
                                      await moveItemToProject(previewItem.id, selectedProject.id, p.id);
                                      setMovingItemId(null);
                                      setPreviewItem(null);
                                      loadProjectItems(selectedProject.id);
                                    } catch (err) {
                                      console.error('Failed to move item:', err);
                                    }
                                  }}
                                  className="w-full text-left px-3 py-2 text-sm text-slate-300 hover:bg-slate-700 transition-colors flex items-center gap-2"
                                >
                                  <FolderOpen className="w-3.5 h-3.5 text-slate-500" />
                                  <span className="truncate">{p.name}</span>
                                </button>
                              ))
                            }
                          </div>
                        )}
                      </div>
                    )}
                    <button
                      onClick={() => downloadItem(previewItem)}
                      className="flex items-center gap-2 px-3 py-1.5 bg-cinema-gold hover:bg-amber-400 text-slate-950 rounded text-sm font-normal transition-colors"
                    >
                      <Download className="w-4 h-4" />
                      Download
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ProjectsTab;