File Preview Factory

interface PreviewResult {
  type: 'image' | 'video' | 'pdf' | 'document' | 'unknown';
  thumbnailUrl: string;
  cleanup: () => void;
}

class FilePreviewFactory {
  static async generatePreview(file: File): Promise<PreviewResult> {
    const type = this.detectFileType(file);

    switch (type) {
      case 'image':
        return this.createImagePreview(file);
      case 'video':
        return this.createVideoPreview(file);
      case 'pdf':
        return this.createPdfPreview(file);
      default:
        return this.createGenericPreview(file);
    }
  }

  private static detectFileType(file: File): PreviewResult['type'] {
    if (file.type.startsWith('image/')) return 'image';
    if (file.type.startsWith('video/')) return 'video';
    if (file.type === 'application/pdf') return 'pdf';
    if (file.type.includes('document') || file.type.includes('text')) return 'document';
    return 'unknown';
  }

  private static createImagePreview(file: File): PreviewResult {
    const url = URL.createObjectURL(file);
    
    return {
      type: 'image',
      thumbnailUrl: url,
      cleanup: () => URL.revokeObjectURL(url)
    };
  }

  private static async createVideoPreview(file: File): Promise<PreviewResult> {
    const url = URL.createObjectURL(file);
    
    // Extract first frame as thumbnail
    const video = document.createElement('video');
    video.src = url;
    video.muted = true;
    
    return new Promise((resolve) => {
      video.addEventListener('loadeddata', () => {
        video.currentTime = 1; // Seek to 1 second
      });

      video.addEventListener('seeked', () => {
        const canvas = document.createElement('canvas');
        canvas.width = 320;
        canvas.height = (video.videoHeight / video.videoWidth) * 320;
        
        const ctx = canvas.getContext('2d');
        ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
        
        resolve({
          type: 'video',
          thumbnailUrl,
          cleanup: () => URL.revokeObjectURL(url)
        });
      });
    });
  }

  private static async createPdfPreview(file: File): Promise<PreviewResult> {
    // Requires pdf.js library
    // For simplicity, returning a placeholder
    // In production, use: import * as pdfjsLib from 'pdfjs-dist';
    
    return {
      type: 'pdf',
      thumbnailUrl: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><text x="10" y="50">PDF</text></svg>',
      cleanup: () => {}
    };
  }

  private static createGenericPreview(file: File): PreviewResult {
    const extension = file.name.split('.').pop()?.toUpperCase() || '?';
    
    const svg = `
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
        <rect width="100" height="100" fill="#e0e0e0"/>
        <text x="50" y="50" text-anchor="middle" font-size="16" fill="#333">${extension}</text>
      </svg>
    `;
    
    return {
      type: 'document',
      thumbnailUrl: `data:image/svg+xml,${encodeURIComponent(svg)}`,
      cleanup: () => {}
    };
  }
}

// Usage
async function displayFilePreviews(files: File[]): Promise<void> {
  const previews: PreviewResult[] = [];

  for (const file of files) {
    const preview = await FilePreviewFactory.generatePreview(file);
    previews.push(preview);

    const img = document.createElement('img');
    img.src = preview.thumbnailUrl;
    img.style.width = '100px';
    img.style.height = '100px';
    img.style.objectFit = 'cover';
    
    document.getElementById('preview-container')?.appendChild(img);
  }

  // Cleanup when done
  window.addEventListener('beforeunload', () => {
    previews.forEach(p => p.cleanup());
  });
}

// React component example
function FilePreviewGrid({ files }: { files: File[] }) {
  const [previews, setPreviews] = useState<PreviewResult[]>([]);

  useEffect(() => {
    let mounted = true;

    async function loadPreviews() {
      const results = await Promise.all(
        files.map(f => FilePreviewFactory.generatePreview(f))
      );
      if (mounted) setPreviews(results);
    }

    loadPreviews();

    return () => {
      mounted = false;
      previews.forEach(p => p.cleanup());
    };
  }, [files]);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, 100px)', gap: '10px' }}>
      {previews.map((preview, i) => (
        <img
          key={i}
          src={preview.thumbnailUrl}
          alt={`Preview ${i}`}
          style={{ width: '100px', height: '100px', objectFit: 'cover' }}
        />
      ))}
    </div>
  );
}