frontend/src/pages/Repository.jsx

  import React, { useState, useRef, useEffect } from 'react';
  import { motion, AnimatePresence } from 'framer-motion';
  import { 
    Upload, 
    FolderOpen, 
    Image, 
    FileText, 
    Video, 
    Search,
    Filter,
    Grid3X3,
    List,
    MoreVertical,
    Download,
    Trash2,
    Eye,
    ChevronDown,
    ChevronRight,
    Plus,
    X,
    Check,
    File,
    Copy
  } from 'lucide-react';
  import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
  import { Button } from '@/components/ui/button';
  import { Input } from '@/components/ui/input';
  import { Badge } from '@/components/ui/badge';
  import { Label } from '@/components/ui/label';
  import { Progress } from '@/components/ui/progress';
  import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
  } from '@/components/ui/select';
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
  } from '@/components/ui/dropdown-menu';
  import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
  } from '@/components/ui/dialog';
  import { Checkbox } from '@/components/ui/checkbox';

  const products = [
    {
      id: 'ocr',
      name: 'Intelligent Document Parsing (OCR)',
      shortName: 'OCR',
      color: 'blue',
      subCategories: []
    },
    {
      id: 'p2p',
      name: 'Purchase To Pay (P2P)',
      shortName: 'P2P',
      color: 'emerald',
      subCategories: [
        'Budget Approval Workflow',
        'Purchase Request Workflow',
        'Accounts Payable Workflow'
      ]
    },
    {
      id: 'o2c',
      name: 'Order to Cash (O2C)',
      shortName: 'O2C',
      color: 'violet',
      subCategories: [
        'Quotation Workflow',
        'Sales Order Workflow',
        'PickSlip Delivery Workflow',
        'Accounts Receivable Workflow'
      ]
    }
  ];

  const mockAssets = [
    { id: '1', name: 'OCR_Demo_Screenshot.png', type: 'image', product: 'ocr', subCategory: null, size: '2.4 MB', date: '2024-12-20' },
    { id: '2', name: 'P2P_Workflow_Diagram.pdf', type: 'document', product: 'p2p', subCategory: 'Budget Approval Workflow', size: '1.8 MB', date: '2024-12-19' },
    { id: '3', name: 'Invoice_Processing_Video.mp4', type: 'video', product: 'ocr', subCategory: null, size: '45.2 MB', date: '2024-12-18' },
    { id: '4', name: 'Sales_Order_Infographic.png', type: 'image', product: 'o2c', subCategory: 'Sales Order Workflow', size: '3.1 MB', date: '2024-12-17' },
    { id: '5', name: 'AP_Automation_Brochure.pdf', type: 'document', product: 'p2p', subCategory: 'Accounts Payable Workflow', size: '5.6 MB', date: '2024-12-16' },
    { id: '6', name: 'O2C_Product_Banner.png', type: 'image', product: 'o2c', subCategory: 'Quotation Workflow', size: '1.2 MB', date: '2024-12-15' },
    { id: '7', name: 'Document_Parsing_Demo.png', type: 'image', product: 'ocr', subCategory: null, size: '890 KB', date: '2024-12-14' },
    { id: '8', name: 'PR_Workflow_Guide.pdf', type: 'document', product: 'p2p', subCategory: 'Purchase Request Workflow', size: '2.3 MB', date: '2024-12-13' },
  ];

  export default function Repository() {
    const [viewMode, setViewMode] = useState('grid');
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedProduct, setSelectedProduct] = useState('all');
    const [expandedProducts, setExpandedProducts] = useState(['ocr', 'p2p', 'o2c']);
    const [selectedAssets, setSelectedAssets] = useState([]);
    const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
    const [dragOver, setDragOver] = useState(false);
    const [selectedFiles, setSelectedFiles] = useState([]);
    const [uploadProductCategory, setUploadProductCategory] = useState('');
    const [uploadSubCategory, setUploadSubCategory] = useState('');
    const [isUploading, setIsUploading] = useState(false);
    const [assets, setAssets] = useState(mockAssets);
    const [isLoadingAssets, setIsLoadingAssets] = useState(false);
    const [previewAsset, setPreviewAsset] = useState(null);
    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
    const [uploadProgress, setUploadProgress] = useState({});
    const [pdfPages, setPdfPages] = useState(null);
    const [isLoadingPdf, setIsLoadingPdf] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);
    const fileInputRef = useRef(null);

    const toggleProduct = (productId) => {
      setExpandedProducts(prev => 
        prev.includes(productId) 
          ? prev.filter(id => id !== productId)
          : [...prev, productId]
      );
    };

    const filteredAssets = assets.filter(asset => {
      const matchesSearch = asset.name.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesProduct = selectedProduct === 'all' || asset.product === selectedProduct;
      return matchesSearch && matchesProduct;
    });

    const getAssetsByProduct = (productId) => {
      return assets.filter(asset => asset.product === productId);
    };

    const getTypeIcon = (type) => {
      switch(type) {
        case 'image': return <Image className="w-5 h-5 text-pink-500" />;
        case 'video': return <Video className="w-5 h-5 text-red-500" />;
        case 'document': return <FileText className="w-5 h-5 text-blue-500" />;
        default: return <File className="w-5 h-5 text-slate-500" />;
      }
    };

    const getProductColor = (productId) => {
      const product = products.find(p => p.id === productId);
      return product?.color || 'slate';
    };

    // Fetch assets from API
    const fetchAssets = async () => {
      setIsLoadingAssets(true);
      try {
        const response = await fetch('/api/assets');
        if (response.ok) {
          const data = await response.json();
          console.log('Fetched assets from API:', data); // Debug log
          
          // Convert API response to match mockAssets format
          // IMPORTANT: Keep IDs as strings to preserve precision for large CockroachDB IDs
          const formattedAssets = data.map(asset => {
            // Handle date formatting more robustly
            let dateStr = new Date().toISOString().split('T')[0]; // Default to today
            if (asset.created_at) {
              try {
                // Handle both string and datetime object
                let date;
                if (asset.created_at instanceof Date) {
                  date = asset.created_at;
                } else if (typeof asset.created_at === 'string') {
                  date = new Date(asset.created_at);
                } else {
                  // Handle datetime object from backend
                  date = new Date(asset.created_at);
                }
                
                if (!isNaN(date.getTime())) {
                  dateStr = date.toISOString().split('T')[0];
                } else {
                  console.warn('Invalid date:', asset.created_at);
                }
              } catch (e) {
                console.warn('Date parsing error:', e, asset.created_at);
              }
            }
            
            // CRITICAL: Keep ID as string - never convert to number (precision loss for large IDs)
            // If asset.id is already a number, convert it carefully to preserve precision
            let assetIdStr;
            if (typeof asset.id === 'string') {
              assetIdStr = asset.id;
            } else if (typeof asset.id === 'number') {
              // For very large numbers, use BigInt to preserve precision, then convert to string
              assetIdStr = BigInt(asset.id).toString();
            } else {
              assetIdStr = String(asset.id);
            }
            
            return {
              id: assetIdStr,  // Always keep as string to preserve precision for large CockroachDB IDs
              name: asset.name || 'Unknown',
              type: asset.file_type || 'unknown',
              product: asset.product_category || 'ocr',
              subCategory: asset.sub_category || null,
              size: formatFileSize(asset.size || 0),
              date: dateStr
            };
          });
          
          console.log('Formatted assets:', formattedAssets); // Debug log
          setAssets(formattedAssets);
        } else {
          const errorText = await response.text();
          console.error('Failed to fetch assets:', response.status, errorText);
          // Don't reset to mockAssets - keep what we have
        }
      } catch (error) {
        console.error('Error fetching assets:', error);
        // Don't reset to mockAssets - keep what we have
      } finally {
        setIsLoadingAssets(false);
      }
    };

    // Format file size
    const formatFileSize = (bytes) => {
      if (!bytes) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    };

    // Handle delete asset
    const handleDeleteAsset = async (assetId) => {
      setIsDeleting(true);
      try {
        // Ensure assetId is a string to preserve precision
        const assetIdStr = String(assetId);
        const response = await fetch(`/api/assets/${assetIdStr}`, {
          method: 'DELETE',
        });

        if (!response.ok) {
          const errorData = await response.json().catch(() => ({ detail: 'Delete failed' }));
          throw new Error(errorData.detail || 'Delete failed');
        }

        const result = await response.json();
        console.log('Delete result:', result);
        
        // Refresh assets list
        await fetchAssets();
        
        // Close preview if deleted asset was being previewed
        if (previewAsset && previewAsset.id === assetId) {
          setPreviewDialogOpen(false);
          setPreviewAsset(null);
          setPdfPages(null);
        }
        
        alert('Asset deleted successfully');
      } catch (error) {
        console.error('Delete error:', error);
        alert(`Delete failed: ${error.message}`);
      } finally {
        setIsDeleting(false);
      }
    };

  // Load PDF pages when previewing a PDF
  const loadPdfPages = async (assetId) => {
    setIsLoadingPdf(true);
    setPdfPages(null);
    try {
      // CRITICAL: Ensure assetId is a string to preserve precision for large IDs
      // Never convert to number - JavaScript loses precision for numbers > Number.MAX_SAFE_INTEGER
      let assetIdStr;
      if (typeof assetId === 'string') {
        assetIdStr = assetId;
      } else if (typeof assetId === 'number') {
        // Use BigInt to preserve precision, then convert to string
        assetIdStr = BigInt(assetId).toString();
      } else {
        assetIdStr = String(assetId);
      }
      console.log(`Loading PDF for asset ID: ${assetIdStr} (original type: ${typeof assetId})`);
      const response = await fetch(`/api/assets/${assetIdStr}/pdf-pages`);
        
        if (response.ok) {
          const data = await response.json();
          setPdfPages(data);
        } else {
          const errorData = await response.json().catch(() => ({ 
            detail: response.status === 503 
              ? 'PDF preview requires poppler-utils to be installed on the server'
              : 'Failed to load PDF preview' 
          }));
          console.error('Failed to load PDF pages:', errorData);
          setPdfPages({ error: errorData.detail || 'Failed to load PDF preview' });
        }
      } catch (error) {
        console.error('Error loading PDF pages:', error);
        setPdfPages({ 
          error: error.message || 'Failed to load PDF preview. Make sure poppler-utils is installed.' 
        });
      } finally {
        setIsLoadingPdf(false);
      }
    };

    // Fetch assets on component mount and when upload dialog closes
    useEffect(() => {
      fetchAssets();
    }, []);

    // Refresh assets after successful upload
    useEffect(() => {
      if (!uploadDialogOpen && !isUploading) {
        console.log('useEffect: Refreshing assets (dialog closed, not uploading)');
        fetchAssets();
      }
    }, [uploadDialogOpen, isUploading]);

    // Auto-load PDF pages when preview opens for PDF files
    useEffect(() => {
      if (previewAsset && previewDialogOpen) {
        // Load PDF pages if it's a PDF
        if (previewAsset.type === 'document' && previewAsset.name.toLowerCase().endsWith('.pdf')) {
          console.log('Auto-loading PDF pages for:', previewAsset.id);
          loadPdfPages(String(previewAsset.id));
        } else {
          setPdfPages(null);
        }
      }
    }, [previewAsset, previewDialogOpen]);

    const handleFileSelect = (files) => {
      const fileArray = Array.from(files);
      setSelectedFiles(fileArray);
    };

    const handleDragDrop = (e) => {
      e.preventDefault();
      setDragOver(false);
      if (e.dataTransfer.files) {
        handleFileSelect(e.dataTransfer.files);
      }
    };

    const handleFileInputChange = (e) => {
      if (e.target.files) {
        handleFileSelect(e.target.files);
      }
    };

    const pollAssetStatus = async (assetId, fileName) => {
      const maxAttempts = 60; // Poll for up to 60 seconds
      let attempts = 0;
      let consecutive404s = 0;
      const max404s = 5; // Allow up to 5 consecutive 404s (asset might not be visible yet)
      
      // Small delay before first poll to allow database commit
      await new Promise(resolve => setTimeout(resolve, 500));
      
      while (attempts < maxAttempts) {
        try {
          const response = await fetch(`/api/assets/${assetId}/status`);
          if (response.ok) {
            const status = await response.json();
            consecutive404s = 0; // Reset 404 counter on success
            setUploadProgress(prev => ({
              ...prev,
              [fileName]: {
                status: status.status,
                message: getStatusMessage(status.status),
                extractedContent: status.extracted_content || null  // Store extracted JSON
              }
            }));
            
            if (status.status === 'completed' || status.status === 'failed') {
              break;
            }
          } else if (response.status === 404) {
            consecutive404s++;
            // If we get too many 404s, stop polling (asset might not exist)
            if (consecutive404s >= max404s) {
              console.warn(`Asset ${assetId} not found after ${max404s} attempts`);
              setUploadProgress(prev => ({
                ...prev,
                [fileName]: {
                  status: 'pending',
                  message: 'Asset status unavailable'
                }
              }));
              break;
            }
            // For first few 404s, keep trying (might be replication lag)
          } else {
            // Other errors - log but keep trying
            console.error(`Status check failed: ${response.status}`);
          }
        } catch (error) {
          console.error('Error polling status:', error);
          // On network errors, keep trying
        }
        
        await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every second
        attempts++;
      }
    };

    const getStatusMessage = (status) => {
      switch(status) {
        case 'pending': return 'Uploading file...';
        case 'processing': return 'Extracting content with OCR...';
        case 'completed': return 'Content extracted and indexed by AI agent ✓';
        case 'failed': return 'Analysis failed';
        default: return 'Processing...';
      }
    };

    const handleUpload = async () => {
      if (selectedFiles.length === 0) {
        alert('Please select at least one file to upload');
        return;
      }
      if (!uploadProductCategory) {
        alert('Please select a product category');
        return;
      }

      setIsUploading(true);
      setUploadProgress({});
      
      try {
        // Initialize progress for all files
        const initialProgress = {};
        selectedFiles.forEach(file => {
          initialProgress[file.name] = {
            status: 'pending',
            message: 'Uploading file...'
          };
        });
        setUploadProgress(initialProgress);

        // Upload files sequentially to show progress
        const results = [];
        for (const file of selectedFiles) {
          try {
            setUploadProgress(prev => ({
              ...prev,
              [file.name]: {
                status: 'pending',
                message: 'Uploading file...'
              }
            }));

            const formData = new FormData();
            formData.append('file', file);
            formData.append('product_category', uploadProductCategory);
            if (uploadSubCategory && uploadSubCategory !== 'none') {
              formData.append('sub_category', uploadSubCategory);
            }

            const response = await fetch('/api/assets/upload', {
              method: 'POST',
              body: formData,
            });

            if (!response.ok) {
              const errorData = await response.json().catch(() => ({ detail: 'Upload failed' }));
              throw new Error(errorData.detail || `Upload failed for ${file.name}`);
            }

            const result = await response.json();
            results.push(result);

            // Ensure ID is kept as string to preserve precision
            const assetId = String(result.id);

            // Update progress - file uploaded, now analyzing
            setUploadProgress(prev => ({
              ...prev,
              [file.name]: {
                status: result.analysis_status || 'processing',
                message: result.analysis_status === 'processing' 
                  ? 'Extracting content with OCR...' 
                  : 'Upload complete, analyzing...'
              }
            }));

            // Start polling for analysis status if it's a document/image
            if (result.file_type === 'document' || result.file_type === 'image') {
              pollAssetStatus(assetId, file.name);
            } else {
              setUploadProgress(prev => ({
                ...prev,
                [file.name]: {
                  status: 'completed',
                  message: 'Upload complete ✓'
                }
              }));
            }
          } catch (error) {
            console.error(`Upload error for ${file.name}:`, error);
            setUploadProgress(prev => ({
              ...prev,
              [file.name]: {
                status: 'failed',
                message: `Upload failed: ${error.message}`
              }
            }));
          }
        }
        
        console.log('Upload results:', results);
        
        // Refresh assets immediately after upload
        console.log('Refreshing assets after upload...');
        await fetchAssets();
        
        // Wait a bit more for database to commit, then refresh again
        setTimeout(async () => {
          console.log('Refreshing assets again after delay...');
          await fetchAssets();
        }, 1500);
        
        // Don't close dialog immediately - let user see the progress
        // Reset form after a delay
        setTimeout(() => {
          setSelectedFiles([]);
          setUploadProductCategory('');
          setUploadSubCategory('');
          setUploadProgress({});
          setUploadDialogOpen(false);
          // Refresh again after dialog closes to ensure latest data
          console.log('Refreshing assets after dialog closes...');
          fetchAssets();
        }, 3000);
        
      } catch (error) {
        console.error('Upload error:', error);
        alert(`Upload failed: ${error.message}`);
      } finally {
        setIsUploading(false);
      }
    };

    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

          {/* Header */}

          <motion.div 

            initial={{ opacity: 0, y: -20 }}

            animate={{ opacity: 1, y: 0 }}

            className="mb-8"

          >

            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

              <div>

                <h1 className="text-3xl font-bold text-slate-900 tracking-tight">

                  Asset Repository

                </h1>

                <p className="text-slate-500 mt-1">

                  Manage your marketing materials, screenshots, and documents

                </p>

              </div>

              <Dialog open={uploadDialogOpen} onOpenChange={setUploadDialogOpen}>

                <DialogTrigger asChild>

                  <Button className="gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/25">

                    <Upload className="w-4 h-4" />

                    Upload Assets

                  </Button>

                </DialogTrigger>

                <DialogContent className="sm:max-w-lg">

                  <DialogHeader>

                    <DialogTitle>Upload Assets</DialogTitle>

                  </DialogHeader>

                  <div className="space-y-4 pt-4">

                    <input

                      type="file"

                      ref={fileInputRef}

                      onChange={handleFileInputChange}

                      multiple

                      className="hidden"

                      accept="image/*,video/*,.pdf,.doc,.docx"

                    />

                    <div 

                      className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${

                        dragOver ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-300'

                      }`}

                      onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}

                      onDragLeave={() => setDragOver(false)}

                      onDrop={handleDragDrop}

                      onClick={() => fileInputRef.current?.click()}

                    >

                      <Upload className="w-10 h-10 text-slate-400 mx-auto mb-3" />

                      <p className="text-sm font-medium text-slate-700">

                        Drag and drop files here

                      </p>

                      <p className="text-xs text-slate-500 mt-1">

                        or click to browse

                      </p>

                      <Button 

                        variant="outline" 

                        size="sm" 

                        className="mt-4"

                        type="button"

                        onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}

                      >

                        Browse Files

                      </Button>

                      {selectedFiles.length > 0 && (

                        <div className="mt-4 space-y-3">

                          <p className="text-xs font-medium text-slate-600">Selected files:</p>

                          {selectedFiles.map((file, index) => {

                            const progress = uploadProgress[file.name];

                            const getProgressValue = () => {

                              if (!progress) return 0;

                              switch(progress.status) {

                                case 'pending': return 25;

                                case 'processing': return 60;

                                case 'completed': return 100;

                                case 'failed': return 0;

                                default: return 0;

                              }

                            };

                            const getProgressColor = () => {

                              if (!progress) return 'bg-blue-500';

                              switch(progress.status) {

                                case 'pending': return 'bg-blue-500';

                                case 'processing': return 'bg-yellow-500';

                                case 'completed': return 'bg-green-500';

                                case 'failed': return 'bg-red-500';

                                default: return 'bg-blue-500';

                              }

                            };

                            return (

                              <div key={index} className="space-y-2">

                                <div className="flex items-center justify-between text-xs bg-slate-50 p-2 rounded">

                                  <span className="text-slate-700 truncate flex-1 mr-2">{file.name}</span>

                                  <span className="text-slate-500 whitespace-nowrap">{(file.size / 1024 / 1024).toFixed(2)} MB</span>

                                </div>

                                {isUploading && (

                                  <div className="space-y-1">

                                    <div className="flex items-center justify-between text-xs">

                                      <span className={`font-medium ${

                                        progress?.status === 'completed' ? 'text-green-600' :

                                        progress?.status === 'failed' ? 'text-red-600' :

                                        progress?.status === 'processing' ? 'text-yellow-600' :

                                        'text-blue-600'

                                      }`}>

                                        {progress?.message || 'Uploading...'}

                                      </span>

                                      {progress?.status === 'completed' && <Check className="w-3 h-3 text-green-600" />}

                                      {progress?.status === 'failed' && <X className="w-3 h-3 text-red-600" />}

                                    </div>

                                    <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-slate-200">

                                      <div 

                                        className={`h-full transition-all ${getProgressColor()}`}

                                        style={{ width: `${getProgressValue()}%` }}

                                      />

                                    </div>

                                    {/* JSON Output Display */}

                                    {progress?.status === 'completed' && progress?.extractedContent && (

                                      <div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">

                                        <div className="flex items-center justify-between mb-2">

                                          <p className="text-xs font-medium text-slate-700">Extracted JSON Output:</p>

                                          <Button

                                            variant="ghost"

                                            size="sm"

                                            className="h-6 px-2 text-xs"

                                            onClick={() => {

                                              const jsonStr = JSON.stringify(progress.extractedContent, null, 2);

                                              navigator.clipboard.writeText(jsonStr).then(() => {

                                                alert('JSON copied to clipboard!');

                                              }).catch(() => {

                                                alert('Failed to copy JSON');

                                              });

                                            }}

                                          >

                                            <Copy className="w-3 h-3 mr-1" />

                                            Copy

                                          </Button>

                                        </div>

                                        <pre className="text-xs text-slate-600 bg-white p-2 rounded border border-slate-200 max-h-40 overflow-auto font-mono">

                                          {JSON.stringify(progress.extractedContent, null, 2)}

                                        </pre>

                                      </div>

                                    )}

                                  </div>

                                )}

                              </div>

                            );

                          })}

                        </div>

                      )}

                    </div>

                    

                    <div className="space-y-3">

                      <div>

                        <Label>Product Category</Label>

                        <Select value={uploadProductCategory} onValueChange={setUploadProductCategory}>

                          <SelectTrigger className="mt-1.5">

                            <SelectValue placeholder="Select a product" />

                          </SelectTrigger>

                          <SelectContent>

                            {products.map(product => (

                              <SelectItem key={product.id} value={product.id}>

                                {product.name}

                              </SelectItem>

                            ))}

                          </SelectContent>

                        </Select>

                      </div>

                      

                      <div>

                        <Label>Sub-Category (Optional)</Label>

                        <Select 

                          value={uploadSubCategory} 

                          onValueChange={setUploadSubCategory}

                          disabled={!uploadProductCategory || products.find(p => p.id === uploadProductCategory)?.subCategories?.length === 0}

                        >

                          <SelectTrigger className="mt-1.5">

                            <SelectValue placeholder="Select sub-category" />

                          </SelectTrigger>

                          <SelectContent>

                            <SelectItem value="none">None</SelectItem>

                            {uploadProductCategory && products.find(p => p.id === uploadProductCategory)?.subCategories?.map((sub, idx) => (

                              <SelectItem key={idx} value={sub}>{sub}</SelectItem>

                            ))}

                          </SelectContent>

                        </Select>

                      </div>

                    </div>

                    

                    <div className="flex justify-end gap-2 pt-4">

                      <Button 

                        variant="outline" 

                        onClick={() => {

                          setUploadDialogOpen(false);

                          setSelectedFiles([]);

                          setUploadProductCategory('');

                          setUploadSubCategory('');

                        }}

                        disabled={isUploading}

                      >

                        Cancel

                      </Button>

                      <Button 

                        className="bg-blue-600 hover:bg-blue-700"

                        onClick={handleUpload}

                        disabled={isUploading || selectedFiles.length === 0 || !uploadProductCategory}

                      >

                        {isUploading ? 'Uploading...' : 'Upload'}

                      </Button>

                    </div>

                  </div>

                </DialogContent>

              </Dialog>

            </div>

          </motion.div>



          <div className="grid lg:grid-cols-4 gap-6">

            {/* Sidebar - Product Categories */}

            <motion.div

              initial={{ opacity: 0, x: -20 }}

              animate={{ opacity: 1, x: 0 }}

              className="lg:col-span-1"

            >

              <Card className="border-0 shadow-lg shadow-slate-200/50 sticky top-8">

                <CardHeader className="pb-3">

                  <CardTitle className="text-sm font-semibold text-slate-600 uppercase tracking-wider">

                    Product Categories

                  </CardTitle>

                </CardHeader>

                <CardContent className="pt-0">

                  <div className="space-y-1">

                    <button

                      onClick={() => setSelectedProduct('all')}

                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${

                        selectedProduct === 'all' 

                          ? 'bg-blue-50 text-blue-700' 

                          : 'hover:bg-slate-50 text-slate-700'

                      }`}

                    >

                      <FolderOpen className="w-4 h-4" />

                      <span className="font-medium text-sm">All Assets</span>

                      <Badge variant="secondary" className="ml-auto text-xs">

                        {assets.length}

                      </Badge>

                    </button>

                    

                    {products.map(product => (

                      <div key={product.id}>

                        <button

                          onClick={() => {

                            setSelectedProduct(product.id);

                            if (product.subCategories.length > 0) {

                              toggleProduct(product.id);

                            }

                          }}

                          className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${

                            selectedProduct === product.id 

                              ? `bg-${product.color}-50 text-${product.color}-700` 

                              : 'hover:bg-slate-50 text-slate-700'

                          }`}

                        >

                          {product.subCategories.length > 0 && (

                            <ChevronRight className={`w-4 h-4 transition-transform ${

                              expandedProducts.includes(product.id) ? 'rotate-90' : ''

                            }`} />

                          )}

                          {product.subCategories.length === 0 && <div className="w-4" />}

                          <span className="font-medium text-sm truncate">{product.shortName}</span>

                          <Badge variant="secondary" className="ml-auto text-xs">

                            {getAssetsByProduct(product.id).length}

                          </Badge>

                        </button>

                        

                        <AnimatePresence>

                          {expandedProducts.includes(product.id) && product.subCategories.length > 0 && (

                            <motion.div

                              initial={{ height: 0, opacity: 0 }}

                              animate={{ height: 'auto', opacity: 1 }}

                              exit={{ height: 0, opacity: 0 }}

                              className="overflow-hidden"

                            >

                              <div className="ml-7 pl-3 border-l border-slate-200 mt-1 space-y-1">

                                {product.subCategories.map((sub, idx) => (

                                  <button

                                    key={idx}

                                    className="w-full text-left px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"

                                  >

                                    {sub}

                                  </button>

                                ))}

                              </div>

                            </motion.div>

                          )}

                        </AnimatePresence>

                      </div>

                    ))}

                  </div>

                </CardContent>

              </Card>

            </motion.div>



            {/* Main Content */}

            <motion.div

              initial={{ opacity: 0, y: 20 }}

              animate={{ opacity: 1, y: 0 }}

              className="lg:col-span-3"

            >

              {/* Search and Filters */}

              <Card className="border-0 shadow-lg shadow-slate-200/50 mb-6">

                <CardContent className="p-4">

                  <div className="flex flex-col sm:flex-row gap-3">

                    <div className="relative flex-1">

                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />

                      <Input

                        placeholder="Search assets..."

                        value={searchQuery}

                        onChange={(e) => setSearchQuery(e.target.value)}

                        className="pl-10 border-slate-200"

                      />

                    </div>

                    <div className="flex gap-2">

                      <Select defaultValue="all">

                        <SelectTrigger className="w-32 border-slate-200">

                          <Filter className="w-4 h-4 mr-2" />

                          <SelectValue placeholder="Type" />

                        </SelectTrigger>

                        <SelectContent>

                          <SelectItem value="all">All Types</SelectItem>

                          <SelectItem value="image">Images</SelectItem>

                          <SelectItem value="document">Documents</SelectItem>

                          <SelectItem value="video">Videos</SelectItem>

                        </SelectContent>

                      </Select>

                      <div className="flex border border-slate-200 rounded-lg overflow-hidden">

                        <Button

                          variant={viewMode === 'grid' ? 'secondary' : 'ghost'}

                          size="icon"

                          onClick={() => setViewMode('grid')}

                          className="rounded-none"

                        >

                          <Grid3X3 className="w-4 h-4" />

                        </Button>

                        <Button

                          variant={viewMode === 'list' ? 'secondary' : 'ghost'}

                          size="icon"

                          onClick={() => setViewMode('list')}

                          className="rounded-none"

                        >

                          <List className="w-4 h-4" />

                        </Button>

                      </div>

                    </div>

                  </div>

                </CardContent>

              </Card>



              {/* Assets Grid/List */}

              {viewMode === 'grid' ? (

                <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">

                  {filteredAssets.map((asset, index) => (

                    <motion.div

                      key={asset.id}

                      initial={{ opacity: 0, scale: 0.95 }}

                      animate={{ opacity: 1, scale: 1 }}

                      transition={{ delay: index * 0.05 }}

                    >

                      <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group overflow-hidden">

                        <div className={`h-40 bg-gradient-to-br from-${getProductColor(asset.product)}-100 to-${getProductColor(asset.product)}-50 flex items-center justify-center relative`}>

                          {asset.type === 'image' ? (

                            <Image className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />

                          ) : asset.type === 'video' ? (

                            <Video className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />

                          ) : (

                            <FileText className={`w-12 h-12 text-${getProductColor(asset.product)}-400`} />

                          )}

                          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">

                            <div className="flex gap-2">

                              <Button 

                                size="icon" 

                                variant="secondary" 

                                className="h-9 w-9"

                                onClick={async (e) => {

                                  e.stopPropagation();

                                  setPreviewAsset(asset);

                                  setPreviewDialogOpen(true);

                                  // Load PDF pages if it's a PDF

                                  if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {

                                    await loadPdfPages(String(asset.id));

                                  } else {

                                    setPdfPages(null);

                                  }

                                }}

                              >

                                <Eye className="w-4 h-4" />

                              </Button>

                              <Button 

                                size="icon" 

                                variant="secondary" 

                                className="h-9 w-9"

                                onClick={(e) => {

                                  e.stopPropagation();

                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');

                                }}

                              >

                                <Download className="w-4 h-4" />

                              </Button>

                            </div>

                          </div>

                          <div className="absolute top-2 right-2">

                            <Checkbox className="bg-white border-slate-300" />

                          </div>

                        </div>

                        <CardContent className="p-4">

                          <div className="flex items-start justify-between gap-2">

                            <div className="min-w-0">

                              <h3 className="font-medium text-slate-900 text-sm truncate">

                                {asset.name}

                              </h3>

                              <p className="text-xs text-slate-500 mt-1">

                                {asset.size} • {asset.date}

                              </p>

                            </div>

                            <DropdownMenu>

                              <DropdownMenuTrigger asChild>

                                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">

                                  <MoreVertical className="w-4 h-4" />

                                </Button>

                              </DropdownMenuTrigger>

                              <DropdownMenuContent align="end">

                                <DropdownMenuItem onClick={async () => {

                                  setPreviewAsset(asset);

                                  setPreviewDialogOpen(true);

                                  // Load PDF pages if it's a PDF

                                  if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {

                                    await loadPdfPages(String(asset.id));

                                  } else {

                                    setPdfPages(null);

                                  }

                                }}>

                                  <Eye className="w-4 h-4 mr-2" /> Preview

                                </DropdownMenuItem>

                                <DropdownMenuItem onClick={() => {

                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');

                                }}>

                                  <Download className="w-4 h-4 mr-2" /> Download

                                </DropdownMenuItem>

                                <DropdownMenuItem 

                                  className="text-red-600"

                                  onClick={async () => {

                                    if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {

                                      await handleDeleteAsset(String(asset.id));

                                    }

                                  }}

                                >

                                  <Trash2 className="w-4 h-4 mr-2" /> Delete

                                </DropdownMenuItem>

                              </DropdownMenuContent>

                            </DropdownMenu>

                          </div>

                          <div className="flex gap-2 mt-3">

                            <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700 bg-${getProductColor(asset.product)}-50`}>

                              {products.find(p => p.id === asset.product)?.shortName}

                            </Badge>

                            {asset.subCategory && (

                              <Badge variant="outline" className="text-xs border-slate-200 text-slate-600 truncate max-w-[120px]">

                                {asset.subCategory}

                              </Badge>

                            )}

                          </div>

                        </CardContent>

                      </Card>

                    </motion.div>

                  ))}

                </div>

              ) : (

                <Card className="border-0 shadow-lg shadow-slate-200/50">

                  <CardContent className="p-0">

                    <div className="divide-y divide-slate-100">

                      {filteredAssets.map((asset, index) => (

                        <motion.div

                          key={asset.id}

                          initial={{ opacity: 0, x: -10 }}

                          animate={{ opacity: 1, x: 0 }}

                          transition={{ delay: index * 0.03 }}

                          className="flex items-center gap-4 p-4 hover:bg-slate-50 transition-colors"

                        >

                          <Checkbox />

                          <div className={`w-10 h-10 rounded-lg bg-${getProductColor(asset.product)}-100 flex items-center justify-center`}>

                            {getTypeIcon(asset.type)}

                          </div>

                          <div className="flex-1 min-w-0">

                            <h3 className="font-medium text-slate-900 text-sm truncate">

                              {asset.name}

                            </h3>

                            <p className="text-xs text-slate-500 mt-0.5">

                              {asset.subCategory || products.find(p => p.id === asset.product)?.name}

                            </p>

                          </div>

                          <div className="hidden sm:block text-sm text-slate-500">

                            {asset.size}

                          </div>

                          <div className="hidden md:block text-sm text-slate-500">

                            {asset.date}

                          </div>

                          <Badge variant="outline" className={`text-xs border-${getProductColor(asset.product)}-200 text-${getProductColor(asset.product)}-700`}>

                            {products.find(p => p.id === asset.product)?.shortName}

                          </Badge>

                          <DropdownMenu>

                            <DropdownMenuTrigger asChild>

                              <Button variant="ghost" size="icon" className="h-8 w-8">

                                <MoreVertical className="w-4 h-4" />

                              </Button>

                            </DropdownMenuTrigger>

                            <DropdownMenuContent align="end">

                                <DropdownMenuItem onClick={async () => {

                                  setPreviewAsset(asset);

                                  setPreviewDialogOpen(true);

                                  // Load PDF pages if it's a PDF

                                  if (asset.type === 'document' && asset.name.toLowerCase().endsWith('.pdf')) {

                                    await loadPdfPages(String(asset.id));

                                  } else {

                                    setPdfPages(null);

                                  }

                                }}>

                                  <Eye className="w-4 h-4 mr-2" /> Preview

                                </DropdownMenuItem>

                                <DropdownMenuItem onClick={() => {

                                  window.open(`/api/assets/${String(asset.id)}/download`, '_blank');

                                }}>

                                  <Download className="w-4 h-4 mr-2" /> Download

                                </DropdownMenuItem>

                                <DropdownMenuItem 

                                  className="text-red-600"

                                  onClick={async () => {

                                    if (confirm(`Are you sure you want to delete "${asset.name}"?`)) {

                                      await handleDeleteAsset(String(asset.id));

                                    }

                                  }}

                                >

                                <Trash2 className="w-4 h-4 mr-2" /> Delete

                              </DropdownMenuItem>

                            </DropdownMenuContent>

                          </DropdownMenu>

                        </motion.div>

                      ))}

                    </div>

                  </CardContent>

                </Card>

              )}

            </motion.div>

          </div>

        </div>



        {/* Preview Dialog */}

        <Dialog open={previewDialogOpen} onOpenChange={(open) => {

          setPreviewDialogOpen(open);

          if (!open) {

            setPreviewAsset(null);

            setPdfPages(null);

          }

        }}>

          <DialogContent className="max-w-6xl max-h-[90vh] flex flex-col">

            <DialogHeader>

              <DialogTitle className="flex items-center justify-between">

                <span>{previewAsset?.name || 'Preview'}</span>

                {previewAsset && (

                  <Button

                    variant="ghost"

                    size="icon"

                    className="h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"

                    onClick={async () => {

                      if (confirm(`Are you sure you want to delete "${previewAsset.name}"?`)) {

                        await handleDeleteAsset(String(previewAsset.id));

                      }

                    }}

                    disabled={isDeleting}

                  >

                    <Trash2 className="w-4 h-4" />

                  </Button>

                )}

              </DialogTitle>

            </DialogHeader>

            <div className="mt-4 flex-1 overflow-auto">

              {previewAsset && (

                <div className="space-y-4">

                  {previewAsset.type === 'image' ? (

                    <img 

                      src={`/api/assets/${String(previewAsset.id)}/download`} 

                      alt={previewAsset.name}

                      className="max-w-full h-auto rounded-lg mx-auto"

                    />

                  ) : previewAsset.type === 'video' ? (

                    <video 

                      src={`/api/assets/${String(previewAsset.id)}/download`}

                      controls

                      className="max-w-full rounded-lg mx-auto"

                    >

                      Your browser does not support the video tag.

                    </video>

                  ) : previewAsset.type === 'document' && previewAsset.name.toLowerCase().endsWith('.pdf') ? (

                    <div className="space-y-4">

                      {isLoadingPdf ? (

                        <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">

                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>

                          <p className="text-slate-600">Converting PDF pages to images...</p>

                        </div>

                      ) : pdfPages && pdfPages.error ? (

                        <div className="flex flex-col items-center justify-center p-12 bg-red-50 rounded-lg border border-red-200">

                          <FileText className="w-16 h-16 text-red-400 mb-4" />

                          <p className="text-red-600 font-medium mb-2">Failed to load PDF preview</p>

                          <p className="text-red-500 text-sm mb-4 text-center max-w-md">{pdfPages.error}</p>

                          <p className="text-slate-600 text-xs mb-4 text-center max-w-md">

                            This might be because poppler-utils is not installed. PDFs can still be downloaded.

                          </p>

                          <Button 

                            onClick={() => window.open(`/api/assets/${String(previewAsset.id)}/download`, '_blank')}

                            variant="outline"

                            className="border-red-200 text-red-600 hover:bg-red-100"

                          >

                            <Download className="w-4 h-4 mr-2" />

                            Download PDF

                          </Button>

                        </div>

                      ) : pdfPages && pdfPages.pages ? (

                        <div className="space-y-6">

                          <div className="text-sm text-slate-600 bg-blue-50 p-3 rounded-lg">

                            <strong>PDF Viewer:</strong> {pdfPages.total_pages} page{pdfPages.total_pages !== 1 ? 's' : ''}

                          </div>

                          <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2">

                            {pdfPages.pages.map((page, index) => (

                              <div key={index} className="border border-slate-200 rounded-lg p-4 bg-white shadow-sm">

                                <div className="text-xs text-slate-500 mb-2 font-medium">

                                  Page {page.page_number} of {pdfPages.total_pages}

                                </div>

                                <img 

                                  src={page.image_data}

                                  alt={`Page ${page.page_number}`}

                                  className="max-w-full h-auto rounded border border-slate-100 shadow-sm"

                                  style={{ maxHeight: '800px' }}

                                />

                              </div>

                            ))}

                          </div>

                        </div>

                      ) : (

                        <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">

                          <FileText className="w-16 h-16 text-slate-400 mb-4" />

                          <p className="text-slate-600 mb-4">Failed to load PDF preview</p>

                          <Button 

                            onClick={() => window.open(`/api/assets/${String(previewAsset.id)}/download`, '_blank')}

                            variant="outline"

                          >

                            <Download className="w-4 h-4 mr-2" />

                            Download to view

                          </Button>

                        </div>

                      )}

                    </div>

                  ) : (

                    <div className="flex flex-col items-center justify-center p-12 bg-slate-50 rounded-lg">

                      <FileText className="w-16 h-16 text-slate-400 mb-4" />

                      <p className="text-slate-600 mb-4">Preview not available for this file type</p>

                      <Button 

                        onClick={() => window.open(`/api/assets/${String(previewAsset.id)}/download`, '_blank')}

                        variant="outline"

                      >

                        <Download className="w-4 h-4 mr-2" />

                        Download to view

                      </Button>

                    </div>

                  )}

                  <div className="flex items-center justify-between pt-4 border-t sticky bottom-0 bg-white">

                    <div className="text-sm text-slate-600">

                      <p><strong>Type:</strong> {previewAsset.type}</p>

                      <p><strong>Size:</strong> {previewAsset.size}</p>

                      <p><strong>Date:</strong> {previewAsset.date}</p>

                    </div>

                    <div className="flex gap-2">

                      <Button 

                        onClick={() => window.open(`/api/assets/${String(previewAsset.id)}/download`, '_blank')}

                        variant="outline"

                      >

                        <Download className="w-4 h-4 mr-2" />

                        Download

                      </Button>

                      <Button

                        variant="outline"

                        className="text-red-600 border-red-200 hover:bg-red-50"

                        onClick={async () => {

                          if (confirm(`Are you sure you want to delete "${previewAsset.name}"?`)) {

                            await handleDeleteAsset(String(previewAsset.id));

                          }

                        }}

                        disabled={isDeleting}

                      >

                        <Trash2 className="w-4 h-4 mr-2" />

                        {isDeleting ? 'Deleting...' : 'Delete'}

                      </Button>

                    </div>

                  </div>

                </div>

              )}

            </div>

          </DialogContent>

        </Dialog>

      </div>
    );
  }