@actuate-media/cms-admin 0.1.4 → 0.2.1

package/src/views/MediaBrowser.tsx

@@ -0,0 +1,774 @@
+'use client';
+
+import {
+  Upload, Grid3x3, List, Search, Trash2, Download, FileText,
+  ArrowUpDown, ArrowUp, ArrowDown, X, Bot, Sparkles, Link2,
+  AlertTriangle, Copy, ExternalLink, ImageIcon, FileImage, Loader2,
+  FolderInput, GripVertical,
+} from 'lucide-react';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { toast } from 'sonner';
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+import { FolderTree, type FolderSelection } from '../components/FolderTree.js';
+import { FocalPointPicker } from '../components/FocalPointPicker.js';
+
+interface MediaItem {
+  id: number;
+  name: string;
+  type: string;
+  size: string;
+  sizeBytes: number;
+  date: string;
+  url: string;
+  dimensions?: string;
+  format?: string;
+  altTag?: string;
+  title?: string;
+  usedOn?: { page: string; path: string }[];
+}
+
+type MediaSortKey = 'name' | 'type' | 'size' | 'date';
+
+export interface MediaBrowserProps {
+  onNavigate?: (path: string) => void;
+}
+
+function buildMediaApiUrl(folderSel: FolderSelection): string {
+  const base = '/media?pageSize=100';
+  if (folderSel.type === 'smart') {
+    if (folderSel.smart === 'recent') return `${base}&sort=updatedAt&order=desc&pageSize=20`;
+    if (folderSel.smart === 'uncategorized') return `${base}&folderId=none`;
+    return base;
+  }
+  return `${base}&folderId=${folderSel.folderId}`;
+}
+
+export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
+  const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' });
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel]);
+  const { data, loading, error, refetch } = useApiData<{ data: MediaItem[]; total: number }>(apiUrl);
+
+  const allData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1');
+  const uncatData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1&folderId=none');
+
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterType, setFilterType] = useState('all');
+  const [selectedMedia, setSelectedMedia] = useState<number[]>([]);
+  const [sortConfig, setSortConfig] = useState<SortConfig<MediaSortKey> | null>(null);
+  const [activeItem, setActiveItem] = useState<MediaItem | null>(null);
+
+  const [editAlt, setEditAlt] = useState('');
+  const [editTitle, setEditTitle] = useState('');
+  const [editFilename, setEditFilename] = useState('');
+  const [focalX, setFocalX] = useState(0.5);
+  const [focalY, setFocalY] = useState(0.5);
+  const [saving, setSaving] = useState(false);
+  const [aiGenerating, setAiGenerating] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const mediaItems = data?.data ?? [];
+
+  const filteredAndSorted = useMemo(() => {
+    let results = mediaItems.filter((item) => {
+      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesType = filterType === 'all' || item.type === filterType;
+      return matchesSearch && matchesType;
+    });
+
+    if (searchQuery.trim()) {
+      results = sortByRelevance(results, searchQuery, (m) => [m.name]);
+    } else if (sortConfig) {
+      results = [...results].sort((a, b) => {
+        let cmp: number;
+        if (sortConfig.key === 'size') {
+          cmp = a.sizeBytes - b.sizeBytes;
+        } else {
+          cmp = String(a[sortConfig.key]).localeCompare(String(b[sortConfig.key]));
+        }
+        return sortConfig.direction === 'asc' ? cmp : -cmp;
+      });
+    }
+    return results;
+  }, [mediaItems, searchQuery, filterType, sortConfig]);
+
+  const openDetail = (item: MediaItem) => {
+    setActiveItem(item);
+    setEditAlt(item.altTag ?? '');
+    setEditTitle(item.title ?? '');
+    setEditFilename(item.name);
+    setFocalX((item as any).focalPointX ?? 0.5);
+    setFocalY((item as any).focalPointY ?? 0.5);
+  };
+
+  const closeDetail = () => {
+    setActiveItem(null);
+  };
+
+  const handleCheckbox = (e: React.MouseEvent, id: number) => {
+    e.stopPropagation();
+    setSelectedMedia(prev => prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]);
+  };
+
+  const handleSelectAll = () => {
+    setSelectedMedia(prev => prev.length === filteredAndSorted.length ? [] : filteredAndSorted.map(item => item.id));
+  };
+
+  const handleSaveDetails = async () => {
+    if (!activeItem) return;
+    setSaving(true);
+    const res = await cmsApi(`/media/${activeItem.id}`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        alt: editAlt,
+        title: editTitle,
+        filename: editFilename,
+        focalX,
+        focalY,
+      }),
+    });
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Media details saved');
+      refetch();
+    }
+  };
+
+  const deleteMedia = async (id: number) => {
+    const res = await cmsApi(`/media/${id}`, { method: 'DELETE' });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Media deleted');
+      if (activeItem?.id === id) closeDetail();
+      refetch();
+    }
+  };
+
+  const handleAiGenerate = async (field: 'alt' | 'title' | 'optimize') => {
+    setAiGenerating(field);
+
+    if (field === 'optimize' && activeItem) {
+      const res = await cmsApi<MediaItem & {
+        optimization?: {
+          originalSize: number;
+          optimizedSize: number;
+          savings: number;
+          originalSizeFormatted: string;
+          optimizedSizeFormatted: string;
+          alreadyOptimized?: boolean;
+        };
+      }>(`/media/${activeItem.id}/optimize`, { method: 'POST' });
+
+      if (res.error) {
+        toast.error(res.error);
+      } else if ((res.data as any)?.optimization?.alreadyOptimized) {
+        toast.info('Image is already in WebP format — no further optimization needed');
+      } else if ((res.data as any)?.optimization) {
+        const opt = (res.data as any).optimization;
+        toast.success(
+          `Optimized: ${opt.originalSizeFormatted} → ${opt.optimizedSizeFormatted} (${opt.savings}% smaller)`,
+        );
+        refetch();
+      }
+
+      setAiGenerating(null);
+      return;
+    }
+
+    await new Promise(r => setTimeout(r, 1500));
+    if (field === 'alt') {
+      const generated = `A ${activeItem?.format?.toLowerCase()} image showing ${activeItem?.name.replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`;
+      setEditAlt(generated);
+      toast.success('Alt tag generated by AI');
+    } else if (field === 'title') {
+      const generated = activeItem?.name.replace(/[-_]/g, ' ').replace(/\.\w+$/, '').replace(/\b\w/g, c => c.toUpperCase()) ?? '';
+      setEditTitle(generated);
+      toast.success('Title generated by AI');
+    }
+    setAiGenerating(null);
+  };
+
+  const handleCopyUrl = () => {
+    if (activeItem?.url) {
+      navigator.clipboard.writeText(activeItem.url);
+      toast.success('URL copied to clipboard');
+    }
+  };
+
+  const handleUploadFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    setUploading(true);
+
+    let successCount = 0;
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]!;
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await cmsApi<MediaItem & {
+        optimization?: {
+          originalSize: number;
+          optimizedSize: number;
+          savings: number;
+          originalSizeFormatted: string;
+          optimizedSizeFormatted: string;
+        };
+      }>('/media/upload', { method: 'POST', body: formData });
+
+      if (res.error) {
+        toast.error(`Failed to upload ${file.name}: ${res.error}`);
+      } else {
+        const opt = (res.data as any)?.optimization;
+        if (opt && opt.savings > 0) {
+          toast.success(
+            `${file.name} → WebP (${opt.originalSizeFormatted} → ${opt.optimizedSizeFormatted}, ${opt.savings}% saved)`,
+          );
+        } else {
+          toast.success(`Uploaded ${file.name}`);
+        }
+        successCount++;
+      }
+    }
+
+    if (successCount > 0) refetch();
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    setUploading(false);
+  };
+
+  const handleDropItem = useCallback(async (itemId: string, folderId: string | null) => {
+    const res = await cmsApi(`/media/${itemId}/folder`, {
+      method: 'PUT',
+      body: JSON.stringify({ folderId }),
+    });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success(folderId ? 'Moved to folder' : 'Removed from folder');
+      refetch();
+    }
+  }, [refetch]);
+
+  const handleDragStart = (e: React.DragEvent, id: number) => {
+    e.dataTransfer.setData('text/actuate-item-id', String(id));
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const panelOpen = activeItem !== null;
+  const issues = activeItem ? [
+    ...(!activeItem.altTag ? ['Missing alt tag'] : []),
+    ...(!activeItem.title ? ['Missing title'] : []),
+    ...(activeItem.sizeBytes > 2000000 ? ['File size over 2 MB — consider optimizing'] : []),
+    ...(activeItem.usedOn?.length === 0 ? ['Not used on any page'] : []),
+  ] : [];
+
+  function SortHeader({ label, sortKey }: { label: string; sortKey: MediaSortKey }) {
+    const active = sortConfig?.key === sortKey;
+    return (
+      <button
+        type="button"
+        onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+      >
+        {label}
+        {active ? (
+          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+        ) : (
+          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+        )}
+      </button>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+      {error && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
+          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => setSidebarOpen(prev => !prev)}
+            className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+            title={sidebarOpen ? 'Hide folders' : 'Show folders'}
+          >
+            <FolderInput className="w-5 h-5 text-gray-600" />
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Media Library</h1>
+            <p className="text-sm text-gray-600">{filteredAndSorted.length} files</p>
+          </div>
+        </div>
+        <div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept="image/*,video/*,application/pdf,.doc,.docx,.xls,.xlsx"
+            className="hidden"
+            onChange={(e) => handleUploadFiles(e.target.files)}
+          />
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
+          >
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            {uploading ? 'Uploading...' : 'Upload Files'}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex gap-4 flex-1 min-h-0 overflow-hidden">
+        {sidebarOpen && (
+          <div className="w-56 shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col">
+            <FolderTree
+              scope="media"
+              selected={folderSel}
+              onSelect={(sel) => { setFolderSel(sel); setSelectedMedia([]); }}
+              totalCount={allData.data?.total}
+              uncategorizedCount={uncatData.data?.total}
+              onDropItem={handleDropItem}
+            />
+          </div>
+        )}
+
+        <div className="flex-1 flex flex-col min-w-0">
+          <div className="bg-white rounded-lg border border-gray-200 mb-4">
+            <div className="p-3 flex items-center justify-between">
+              <div className="flex items-center gap-3 flex-1">
+                <div className="flex-1 max-w-md relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input type="text" placeholder="Search media..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                </div>
+                <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <option value="all">All Types</option>
+                  <option value="image">Images</option>
+                  <option value="video">Videos</option>
+                  <option value="document">Documents</option>
+                </select>
+              </div>
+              <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
+                <button onClick={() => setViewMode('grid')} className={`p-1.5 rounded transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}>
+                  <Grid3x3 className="w-4 h-4" />
+                </button>
+                <button onClick={() => setViewMode('list')} className={`p-1.5 rounded transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}>
+                  <List className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {selectedMedia.length > 0 && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-blue-900">{selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected</span>
+                <div className="flex items-center gap-2">
+                  <button onClick={async () => { for (const id of selectedMedia) await deleteMedia(id); setSelectedMedia([]); }} className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">Delete Selected</button>
+                  <button onClick={() => setSelectedMedia([])} className="px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {filteredAndSorted.length === 0 && !loading ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                <ImageIcon className="w-6 h-6 text-gray-400" />
+              </div>
+              <h3 className="text-sm font-medium text-gray-900 mb-1">
+                {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
+                  ? 'No uncategorized media'
+                  : folderSel.type === 'folder'
+                  ? 'No media in this folder'
+                  : 'No media yet'}
+              </h3>
+              <p className="text-sm text-gray-500">Upload your first file to get started.</p>
+            </div>
+          ) : (
+          <div className="flex gap-4 flex-1 overflow-hidden min-h-0">
+            <div className={`bg-white rounded-lg border border-gray-200 overflow-hidden transition-all duration-200 ${panelOpen ? 'flex-1 min-w-0' : 'w-full'}`}>
+              {viewMode === 'grid' ? (
+                <div className={`grid gap-2 sm:gap-3 p-2 sm:p-3 overflow-y-auto h-full ${
+                  panelOpen
+                    ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
+                    : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
+                }`}>
+                  {filteredAndSorted.map((item) => {
+                    const isActive = activeItem?.id === item.id;
+                    const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0;
+                    return (
+                      <div
+                        key={item.id}
+                        className={`group relative aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all ${
+                          isActive ? 'border-blue-500 ring-2 ring-blue-200' :
+                          selectedMedia.includes(item.id) ? 'border-blue-400 ring-1 ring-blue-100' :
+                          'border-gray-200 hover:border-gray-300'
+                        }`}
+                        onClick={() => openDetail(item)}
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, item.id)}
+                      >
+                        <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                          <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" />
+                        </div>
+                        <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                          <div className="absolute bottom-0 left-0 right-0 p-2">
+                            <p className="text-white text-xs font-medium truncate">{item.name}</p>
+                            <p className="text-white/80 text-xs">{item.size}</p>
+                          </div>
+                        </div>
+                        {hasIssues && (
+                          <div className="absolute top-1.5 left-1.5 w-5 h-5 bg-yellow-500 rounded-full flex items-center justify-center" title="Needs attention">
+                            <AlertTriangle className="w-3 h-3 text-white" />
+                          </div>
+                        )}
+                        <div className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => handleCheckbox(e, item.id)}>
+                          <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                            selectedMedia.includes(item.id) ? 'bg-blue-600 border-blue-600' : 'bg-white/80 border-gray-400'
+                          }`}>
+                            {selectedMedia.includes(item.id) && (
+                              <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
+                                <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                              </svg>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="overflow-y-auto h-full">
+                  <table className="w-full">
+                    <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                      <tr>
+                        <th className="w-8 px-3 py-2 text-left"><input type="checkbox" checked={selectedMedia.length === filteredAndSorted.length && filteredAndSorted.length > 0} onChange={handleSelectAll} className="rounded border-gray-300" /></th>
+                        <th className="w-6 px-1 py-2"></th>
+                        <th className="px-3 py-2 text-left"><SortHeader label="Name" sortKey="name" /></th>
+                        <th className="px-3 py-2 text-left"><SortHeader label="Type" sortKey="type" /></th>
+                        <th className="px-3 py-2 text-left"><SortHeader label="Size" sortKey="size" /></th>
+                        <th className="px-3 py-2 text-left"><SortHeader label="Uploaded" sortKey="date" /></th>
+                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {filteredAndSorted.map((item) => {
+                        const isActive = activeItem?.id === item.id;
+                        const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0;
+                        return (
+                          <tr
+                            key={item.id}
+                            className={`transition-colors cursor-pointer ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
+                            onClick={() => openDetail(item)}
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, item.id)}
+                          >
+                            <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
+                              <input type="checkbox" checked={selectedMedia.includes(item.id)} onChange={() => handleCheckbox({ stopPropagation: () => {} } as React.MouseEvent, item.id)} className="rounded border-gray-300" />
+                            </td>
+                            <td className="px-1 py-2 cursor-grab">
+                              <GripVertical className="w-4 h-4 text-gray-300" />
+                            </td>
+                            <td className="px-3 py-2">
+                              <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center"><FileImage className="w-5 h-5 text-gray-400" /></div>
+                                <span className="text-sm font-medium text-gray-900">{item.name}</span>
+                              </div>
+                            </td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{item.format ?? item.type}</td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{item.size}</td>
+                            <td className="px-3 py-2 text-sm text-gray-600">{item.date}</td>
+                            <td className="px-3 py-2">
+                              {hasIssues ? (
+                                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                  <AlertTriangle className="w-3 h-3" /> Needs attention
+                                </span>
+                              ) : (
+                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Complete</span>
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+
+            {panelOpen && activeItem && (
+              <div className="w-80 lg:w-96 bg-white rounded-lg border border-gray-200 overflow-y-auto shrink-0 flex flex-col">
+                <div className="flex items-center justify-between p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
+                  <h3 className="text-sm font-semibold text-gray-900 truncate">{activeItem.name}</h3>
+                  <button onClick={closeDetail} className="p-1 hover:bg-gray-100 rounded transition-colors" aria-label="Close panel">
+                    <X className="w-4 h-4 text-gray-500" />
+                  </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto">
+                  <div className="p-4 border-b border-gray-200">
+                    <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
+                      <ImageIcon className="w-12 h-12 text-gray-300" />
+                    </div>
+                  </div>
+
+                  {issues.length > 0 && (
+                    <div className="mx-4 mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                      <div className="flex items-start gap-2">
+                        <AlertTriangle className="w-4 h-4 text-yellow-600 mt-0.5 shrink-0" />
+                        <div>
+                          <p className="text-xs font-semibold text-yellow-900 mb-1">{issues.length} issue{issues.length !== 1 ? 's' : ''} found</p>
+                          <ul className="space-y-0.5">
+                            {issues.map((issue, i) => (
+                              <li key={i} className="text-xs text-yellow-800">• {issue}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          if (!activeItem.altTag) await handleAiGenerate('alt');
+                          if (!activeItem.title) await handleAiGenerate('title');
+                          if (activeItem.sizeBytes > 2000000) await handleAiGenerate('optimize');
+                        }}
+                        className="mt-2 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+                      >
+                        <Sparkles className="w-3.5 h-3.5" />
+                        AI Fix All Issues
+                      </button>
+                    </div>
+                  )}
+
+                  <div className="p-4 border-b border-gray-200 space-y-3">
+                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">File Information</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <div className="text-xs text-gray-500 mb-0.5">Format</div>
+                        <div className="text-sm text-gray-900">{activeItem.format ?? 'Unknown'}</div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-gray-500 mb-0.5">File Size</div>
+                        <div className="text-sm text-gray-900 flex items-center gap-1">
+                          {activeItem.size}
+                          {activeItem.sizeBytes > 2000000 && (
+                            <span className="text-yellow-600 text-xs">(large)</span>
+                          )}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-gray-500 mb-0.5">Dimensions</div>
+                        <div className="text-sm text-gray-900">{activeItem.dimensions ?? '—'}</div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-gray-500 mb-0.5">Uploaded</div>
+                        <div className="text-sm text-gray-900">{activeItem.date}</div>
+                      </div>
+                    </div>
+
+                    <div>
+                      <div className="text-xs text-gray-500 mb-1">URL</div>
+                      <div className="flex items-center gap-1">
+                        <code className="flex-1 text-xs bg-gray-50 border border-gray-200 px-2 py-1.5 rounded text-gray-700 truncate">{activeItem.url}</code>
+                        <button onClick={handleCopyUrl} className="p-1.5 hover:bg-gray-100 rounded transition-colors shrink-0" title="Copy URL">
+                          <Copy className="w-3.5 h-3.5 text-gray-500" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="p-4 border-b border-gray-200 space-y-4">
+                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">SEO & Accessibility</h4>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="text-sm font-medium text-gray-700">Alt Tag</label>
+                        <button
+                          type="button"
+                          onClick={() => handleAiGenerate('alt')}
+                          disabled={aiGenerating === 'alt'}
+                          className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                        >
+                          <Bot className="w-3.5 h-3.5" />
+                          {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
+                        </button>
+                      </div>
+                      <textarea
+                        value={editAlt}
+                        onChange={(e) => setEditAlt(e.target.value)}
+                        placeholder="Describe this image for accessibility..."
+                        rows={2}
+                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                      />
+                      {!editAlt && (
+                        <p className="text-xs text-red-500 mt-1">Required for accessibility and SEO</p>
+                      )}
+                    </div>
+
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <label className="text-sm font-medium text-gray-700">Title</label>
+                        <button
+                          type="button"
+                          onClick={() => handleAiGenerate('title')}
+                          disabled={aiGenerating === 'title'}
+                          className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                        >
+                          <Bot className="w-3.5 h-3.5" />
+                          {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
+                        </button>
+                      </div>
+                      <input
+                        type="text"
+                        value={editTitle}
+                        onChange={(e) => setEditTitle(e.target.value)}
+                        placeholder="Image title..."
+                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="text-sm font-medium text-gray-700 mb-1 block">File Name</label>
+                      <input
+                        type="text"
+                        value={editFilename}
+                        onChange={(e) => setEditFilename(e.target.value)}
+                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      />
+                    </div>
+                  </div>
+
+                  {activeItem.type === 'image' && activeItem.url && (
+                    <div className="p-4 border-b border-gray-200">
+                      <FocalPointPicker
+                        imageUrl={activeItem.url}
+                        focalX={focalX}
+                        focalY={focalY}
+                        onChange={(x, y) => { setFocalX(x); setFocalY(y); }}
+                      />
+                    </div>
+                  )}
+
+                  <div className="p-4 border-b border-gray-200">
+                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">
+                      Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
+                    </h4>
+                    {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
+                      <div className="space-y-2">
+                        {activeItem.usedOn.map((usage, i) => (
+                          <button
+                            key={i}
+                            type="button"
+                            onClick={() => onNavigate?.(usage.path)}
+                            className="w-full flex items-center gap-2 p-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                          >
+                            <Link2 className="w-4 h-4 text-gray-400 shrink-0" />
+                            <span className="text-sm text-gray-900 flex-1 truncate">{usage.page}</span>
+                            <ExternalLink className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                          </button>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
+                        <div className="flex items-start gap-2">
+                          <AlertTriangle className="w-4 h-4 text-orange-600 mt-0.5 shrink-0" />
+                          <div>
+                            <p className="text-xs font-medium text-orange-900">Orphaned media</p>
+                            <p className="text-xs text-orange-700 mt-0.5">This file isn&apos;t used on any page. Consider deleting it to save storage.</p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="p-4 space-y-3">
+                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">AI Optimization</h4>
+                    <button
+                      type="button"
+                      onClick={() => handleAiGenerate('optimize')}
+                      disabled={aiGenerating === 'optimize'}
+                      className="w-full flex items-center gap-2 p-3 rounded-lg border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition-colors text-left disabled:opacity-50"
+                    >
+                      <Sparkles className={`w-5 h-5 text-indigo-600 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`} />
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-indigo-900">
+                          {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
+                        </div>
+                        <div className="text-xs text-indigo-700 mt-0.5">
+                          Compress and convert to modern format (WebP/AVIF)
+                        </div>
+                      </div>
+                    </button>
+                    <button
+                      type="button"
+                      className="w-full flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                    >
+                      <Bot className="w-5 h-5 text-gray-500 shrink-0" />
+                      <div className="flex-1">
+                        <div className="text-sm font-medium text-gray-900">AI Content Analysis</div>
+                        <div className="text-xs text-gray-600 mt-0.5">
+                          Detect objects, faces, text, and suggest categories
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+
+                <div className="p-4 border-t border-gray-200 bg-white sticky bottom-0 flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handleSaveDetails}
+                    disabled={saving}
+                    className="flex-1 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                  >
+                    {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                    {saving ? 'Saving...' : 'Save Changes'}
+                  </button>
+                  <button
+                    type="button"
+                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                    title="Download"
+                  >
+                    <Download className="w-4 h-4 text-gray-600" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => deleteMedia(activeItem.id)}
+                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                    title="Delete"
+                  >
+                    <Trash2 className="w-4 h-4 text-red-600" />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}