import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { AlertCircle, CalendarDays, Download, FileText, Mail, Phone, Upload } from "lucide-react"; import { PanelShell } from "../panels/PanelShell"; import { listMedia, uploadMediaFile } from "../../../services/api"; import type { LibraryContent } from "../../../services/api/types"; const SUPPORTED_MIME_TYPES = [ "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "image/jpeg", "image/png", "image/gif", "image/webp", "image/bmp", ]; const SUPPORTED_EXTENSIONS = [ ".pdf", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ]; function isSupportedFile(file: File) { const name = file.name.toLowerCase(); const hasSupportedExtension = SUPPORTED_EXTENSIONS.some((ext) => name.endsWith(ext)); const hasSupportedMime = SUPPORTED_MIME_TYPES.includes(file.type); return hasSupportedExtension || hasSupportedMime; } function formatDateTime(value?: string) { if (!value) return "—"; const date = new Date(value); if (Number.isNaN(date.getTime())) return "—"; return new Intl.DateTimeFormat("en", { dateStyle: "medium", timeStyle: "short", }).format(date); } function getUploaderName(item: LibraryContent) { if (typeof item.uploadedBy === "object" && item.uploadedBy) { const parts = [item.uploadedBy.firstName, item.uploadedBy.lastName].filter(Boolean); if (parts.length) return parts.join(" "); return item.uploadedBy.email || "Unknown uploader"; } return ""; } function getUploaderEmail(item: LibraryContent) { if (typeof item.uploadedBy === "object" && item.uploadedBy) return item.uploadedBy.email || "—"; return "—"; } function getUploaderPhone(item: LibraryContent) { if (typeof item.uploadedBy === "object" && item.uploadedBy) return item.uploadedBy.phone || "—"; return "—"; } export function EventDocumentsPanel({ eventId, eventName, onClose, }: { eventId: string; eventName?: string; onClose: () => void; }) { const fileInputRef = useRef(null); const [documents, setDocuments] = useState([]); const [loading, setLoading] = useState(false); const [uploading, setUploading] = useState(false); const [error, setError] = useState(""); const [success, setSuccess] = useState(""); const loadDocuments = useCallback(async () => { if (!eventId) return; setLoading(true); setError(""); try { const res = await listMedia({ eventId, limit: 100 }); setDocuments(res.media ?? []); } catch (err) { setError(err instanceof Error ? err.message : "Could not load documents."); setDocuments([]); } finally { setLoading(false); } }, [eventId]); useEffect(() => { void loadDocuments(); }, [loadDocuments]); const acceptAttribute = useMemo(() => SUPPORTED_MIME_TYPES.join(","), []); const handleUpload = async (file: File | null) => { if (!file) return; if (!isSupportedFile(file)) { setError("Only PDF, Word, Excel, PowerPoint, and image files are supported."); return; } setUploading(true); setError(""); setSuccess(""); try { await uploadMediaFile(file, { eventId, module: "event-documents", visibility: "private" }); setSuccess("Document uploaded successfully."); await loadDocuments(); } catch (err) { setError(err instanceof Error ? err.message : "Upload failed."); } finally { setUploading(false); if (fileInputRef.current) fileInputRef.current.value = ""; } }; return (

Uploaded documents

Files uploaded by you for this event appear here.

{error ? (
{error}
) : null} {success ? (
{success}
) : null} {loading ? (

Loading documents…

) : documents.length === 0 ? (

No documents uploaded yet for this event.

) : (
{documents.map((item) => (
{/*

{item.name || "Untitled document"}

• {getUploaderName(item) || "Uploaded by you"}

{getUploaderName(item) || "Uploaded by you"}

*/}
{/* File Name */}

{item.name || "Untitled document"}

{/* Submitted by + Date */}
Submitted by {getUploaderName(item) || "You"} {formatDateTime(item.createdAt)}
{item.url ? ( ) : null}
{ //
//

Uploaded by

//

{getUploaderEmail(item)}

//
//
//

Submitted

//

{formatDateTime(item.createdAt)}

//
//
//

Phone

//

{getUploaderPhone(item)}

//
}
))}
)}

Upload a document

Allowed: PDF, Word, Excel, PowerPoint, and images.

{ void handleUpload(e.target.files?.[0] ?? null); }} style={{ display: "none" }} />
PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
JPG, PNG, GIF, BMP, WEBP images
The uploader name, email, phone, and upload date are shown in the list.
Files are stored for this event and available for download.
 ); }