'use client'; import { useEffect, useState } from 'react'; import { apiRequest, getApiBaseUrl } from '@/lib/dashboardHelpers'; interface DocumentModalProps { isOpen: boolean; onClose: () => void; documentNumber: string | null; documentId: number | null; mode?: 'single' | 'gallery' | 'allPages'; transactionId?: number | null; } export default function DocumentModal({ isOpen, onClose, documentNumber, documentId, mode = 'single', transactionId }: DocumentModalProps) { const [pdfUrl, setPdfUrl] = useState(''); const [modalTitle, setModalTitle] = useState('Document Viewer'); const [error, setError] = useState(''); useEffect(() => { if (isOpen && mode === 'single' && documentId) { loadDocument(); } else if (isOpen && mode === 'gallery' && transactionId) { loadDocumentsGallery(); } else if (isOpen && mode === 'allPages' && transactionId) { loadAllPages(); } return () => { // Cleanup blob URL if (pdfUrl && pdfUrl.startsWith('blob:')) { URL.revokeObjectURL(pdfUrl); } }; }, [isOpen, documentId, transactionId, mode]); async function loadDocument() { if (!documentId) return; console.log('👁️ Viewing document:', documentId, 'Number:', documentNumber); setModalTitle('Loading document...'); setPdfUrl(''); setError(''); try { // Use fixed endpoint which handles: // - PDF display (if already PDF) // - Image to PDF conversion (for .bin files) // - Null document numbers (supporting documents) // - Direct document_id lookups let endpoint; if (documentNumber && documentNumber !== 'null' && documentNumber !== 'undefined' && documentNumber !== '') { // Regular document with document_number endpoint = `/documents/pdf-by-document-number-fixed?` + `document_number=${encodeURIComponent(documentNumber)}&` + `document_id=${documentId}`; setModalTitle(`${documentNumber} • Document ID: ${documentId}`); } else { // Supporting document (NULL document_number) - use document_id only endpoint = `/documents/pdf-by-document-number-fixed?document_id=${documentId}`; setModalTitle(`Supporting Document • ID: ${documentId}`); } console.log('📥 Fetching PDF:', `${getApiBaseUrl()}${endpoint}`); const response = await apiRequest(endpoint); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP ${response.status}: ${errorText}`); } // Get the PDF blob and create object URL const blob = await response.blob(); const pdfUrl = URL.createObjectURL(blob); console.log('✅ PDF loaded successfully'); setPdfUrl(pdfUrl); } catch (err: any) { console.error('❌ PDF loading error:', err); setError(err.message); setModalTitle('Error Loading Document'); } } async function loadDocumentsGallery() { if (!transactionId) return; console.log('👁️ Viewing documents gallery for transaction:', transactionId); setModalTitle('Loading documents...'); setPdfUrl(''); setError(''); try { const response = await apiRequest(`/transactions/${transactionId}`); if (!response.ok) { throw new Error('Failed to load transaction details'); } const transaction = await response.json(); const { getDocumentIcon } = await import('@/lib/dashboardHelpers'); setModalTitle(`All Documents - Transaction ${transaction.transaction_number}`); // Create HTML gallery view with clickable documents let galleryHtml = `

📋 All Documents from Transaction ${transaction.transaction_number}

Total: ${transaction.summary.total_documents} documents, ${transaction.summary.total_pages} pages

`; transaction.documents.forEach((doc: any, index: number) => { const hasContent = doc.page_count > 0; const docIcon = getDocumentIcon(doc.document_type_label); const isCertificate = doc.document_type_label && doc.document_type_label.toLowerCase().includes('certificate'); galleryHtml += `

${docIcon}

${index + 1}. ${doc.document_type_label} ${isCertificate ? 'C of O' : ''}

ID: ${doc.id}${doc.document_number ? ' • ' + doc.document_number : ''} ${doc.date_issued ? ' • Issued: ' + new Date(doc.date_issued).toLocaleDateString() : ''}

${doc.page_count || 0} page${(doc.page_count || 0) !== 1 ? 's' : ''}

${hasContent ? ` ` : 'No content'}

`; }); galleryHtml += `

💡 Summary: ${transaction.summary.total_documents} documents • ${transaction.summary.total_pages} total pages • ${transaction.summary.with_content} documents with content

`; const blob = new Blob([galleryHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); setPdfUrl(url); } catch (err: any) { console.error('❌ Error loading documents gallery:', err); setError(err.message); setModalTitle('Error Loading Documents'); } } async function loadAllPages() { if (!transactionId) return; console.log('👁️ Viewing ALL PAGES as combined PDF for transaction:', transactionId); setModalTitle('Loading all images as one PDF...'); setPdfUrl(''); setError(''); try { // First, get transaction details to show proper title const txnResponse = await apiRequest(`/transactions/${transactionId}`); if (!txnResponse.ok) { throw new Error('Failed to load transaction details'); } const transaction = await txnResponse.json(); const totalPages = transaction.summary.total_pages; const totalDocs = transaction.summary.total_documents; setModalTitle(`Loading all ${totalPages} pages from ${totalDocs} documents...`); // Fetch the combined PDF with ALL images from ALL documents in one multipage PDF // This endpoint combines all images regardless of document_id or document_type const endpoint = `/transactions/${transactionId}/all-pages-pdf`; console.log('📥 Fetching combined multipage PDF from:', `${getApiBaseUrl()}${endpoint}`); console.log(` Expected: ${totalPages} pages from ${totalDocs} documents combined into one PDF`); const response = await apiRequest(endpoint); if (!response.ok) { const errorText = await response.text(); throw new Error(`API returned ${response.status}: ${errorText}`); } // Get the combined PDF blob (should contain all 62 images as one PDF) const blob = await response.blob(); const pdfUrl = URL.createObjectURL(blob); console.log(`✅ Combined multipage PDF loaded successfully (${(blob.size / 1024 / 1024).toFixed(2)} MB)`); console.log(` All ${totalPages} images from ${totalDocs} documents in one PDF file`); setModalTitle(`📄 All ${totalPages} Pages - Transaction ${transaction.transaction_number}`); setPdfUrl(pdfUrl); } catch (err: any) { console.error('❌ Error loading combined PDF:', err); setError( err.message || 'Failed to load combined multipage PDF. ' + 'The backend endpoint /transactions/{id}/all-pages-pdf may not be available yet. ' + 'This endpoint should combine all images from all documents into one PDF file.' ); setModalTitle('Error Loading Combined PDF'); } } if (!isOpen) return null; return (

{ if (e.target === e.currentTarget) onClose(); }}>

{modalTitle}

{mode === 'allPages' && !error && pdfUrl && (

📄 Combined multipage PDF with all images in sequential order

)}

{error ? (

⚠️

Failed to Load Document

{error}

) : pdfUrl ? ( <> {mode === 'allPages' && (

🖼️ Viewing all images combined - Scroll through the PDF to see all pages in order

)}