'use client'; import React from 'react'; import { MOCK_DOCUMENTS } from '@/lib/mockData'; import { type Document, getPageImageUrl } from '@/lib/api'; interface RightEvidencePanelProps { open: boolean; docId?: string; docName?: string; filename?: string; page?: number; onClose: () => void; totalPages?: number; // Document Library Props documents: Document[]; selectedDocIds: string[]; onToggleDoc: (docId: string) => void; activeDocId?: string; onSelectDoc?: (docId: string) => void; onOpenPage?: (docName: string, page: number, docId: string, filename: string) => void; } export function RightEvidencePanel({ open, docId, docName, filename, page = 1, onClose, totalPages = 36, documents, selectedDocIds, onToggleDoc, activeDocId, onSelectDoc, onOpenPage, }: RightEvidencePanelProps) { const [search, setSearch] = React.useState(''); const [zoom, setZoom] = React.useState(1.0); const [fullscreenOpen, setFullscreenOpen] = React.useState(false); const [currentPage, setCurrentPage] = React.useState(page); const [pageInputValue, setPageInputValue] = React.useState(String(page)); const [imageError, setImageError] = React.useState(false); const viewerContainerRef = React.useRef(null); // Sync currentPage with incoming page prop React.useEffect(() => { React.startTransition(() => { setCurrentPage(page); setPageInputValue(String(page)); }); }, [page]); // Reset image error on imageUrl change React.useEffect(() => { React.startTransition(() => { setImageError(false); }); }, [page, docId]); if (!open) return null; // Construct slide image URL through the backend resolver. const imageUrl = docId ? getPageImageUrl(docId, currentPage) : `/mock-page.png`; const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.15, 2.0)); const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.15, 0.5)); const handleResetViewer = () => { const resetPage = Math.max(1, Math.min(page, totalPages)); setZoom(1.0); setCurrentPage(resetPage); setPageInputValue(String(resetPage)); setImageError(false); if (viewerContainerRef.current) { viewerContainerRef.current.scrollTop = 0; viewerContainerRef.current.scrollLeft = 0; } }; const handlePageChange = (pageNum: number) => { const validPage = Math.max(1, Math.min(pageNum, totalPages)); setCurrentPage(validPage); setPageInputValue(String(validPage)); }; const handlePageInputSubmit = (e: React.FormEvent) => { e.preventDefault(); const val = parseInt(pageInputValue); if (!isNaN(val)) { handlePageChange(val); } }; const handleOpenFullScreen = () => { setFullscreenOpen(true); }; const normalizedDocs: Document[] = documents.length > 0 ? documents : MOCK_DOCUMENTS.map(d => ({ doc_id: d.id, name: d.name, doc_type: d.type, period: d.period, total_pages: d.pages, status: d.status, filename: d.filename, })); const filtered = normalizedDocs.filter(d => d.name.toLowerCase().includes(search.toLowerCase()) || d.doc_type.toLowerCase().includes(search.toLowerCase()) ); return ( ); }