import React, { useState } from 'react'; import { X, Download, Printer, Calendar, CheckCircle2, Clock, BookOpen, Send, MessageCircle, FileText, Award, Loader2, ShieldCheck, AlertCircle, Eye, } from 'lucide-react'; import { ZiteCourse, COURSES } from '../data/courses'; interface SyllabusModalProps { course?: ZiteCourse; isOpen: boolean; onClose: () => void; onNavigate?: (path: string) => void; } export function SyllabusModal({ course: initialCourse, isOpen, onClose, onNavigate, }: SyllabusModalProps) { const [selectedCourseSlug, setSelectedCourseSlug] = useState( initialCourse?.slug || COURSES[0].slug ); const [fullName, setFullName] = useState(''); const [email, setEmail] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const [downloadUrl, setDownloadUrl] = useState(null); const [downloadFilename, setDownloadFilename] = useState(''); const [enquiryRef, setEnquiryRef] = useState(null); const [isDownloading, setIsDownloading] = useState(false); const [downloadBlobUrl, setDownloadBlobUrl] = useState(null); const [downloadError, setDownloadError] = useState(null); const previousActiveElement = React.useRef(null); const modalContainerRef = React.useRef(null); // Sync state if initialCourse changes React.useEffect(() => { if (initialCourse?.slug) { setSelectedCourseSlug(initialCourse.slug); setDownloadUrl(null); setEnquiryRef(null); setErrorMessage(null); } }, [initialCourse?.slug]); // Body scroll lock & Escape listener React.useEffect(() => { if (!isOpen) return; previousActiveElement.current = document.activeElement as HTMLElement; const originalOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; if (modalContainerRef.current) { modalContainerRef.current.focus(); } const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { onClose(); } }; window.addEventListener('keydown', handleKeyDown); return () => { document.body.style.overflow = originalOverflow; window.removeEventListener('keydown', handleKeyDown); if (previousActiveElement.current && typeof previousActiveElement.current.focus === 'function') { previousActiveElement.current.focus(); } }; }, [isOpen, onClose]); if (!isOpen) return null; const currentCourse = COURSES.find((c) => c.slug === selectedCourseSlug) || initialCourse || COURSES[0]; const handlePrint = () => { window.print(); }; const handleEnquirySubmit = async (e: React.FormEvent) => { e.preventDefault(); setErrorMessage(null); if (!fullName.trim() || fullName.trim().length < 2) { setErrorMessage('Please provide your full name.'); return; } if (!email.trim() || !email.includes('@')) { setErrorMessage('Please enter a valid email address.'); return; } setIsSubmitting(true); try { const res = await fetch('/api/enquire-outline', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fullName: fullName.trim(), email: email.trim(), courseSlug: currentCourse.slug, sourcePage: `/programmes/${currentCourse.slug}`, contactMethod: 'email', timeframe: 'Immediate intake', }), }); const data = await res.json(); if (!res.ok || !data.success) { setErrorMessage(data.error || 'Failed to submit enquiry. Please try again.'); setIsSubmitting(false); return; } setEnquiryRef(data.enquiryRef); if (data.downloadUrl) { setDownloadUrl(data.downloadUrl); setDownloadFilename(data.filename || `${currentCourse.slug}_Outline.pdf`); } setIsSubmitting(false); } catch (err: any) { console.error('Error submitting enquiry:', err); setErrorMessage('Network error occurred. Please check your connection and retry.'); setIsSubmitting(false); } }; const handleDownload = async () => { if (!downloadUrl) return; setIsDownloading(true); setDownloadError(null); try { const res = await fetch(downloadUrl); if (!res.ok) { throw new Error(`Server returned HTTP ${res.status}. Could not fetch outline PDF.`); } const blob = await res.blob(); const pdfBlob = new Blob([blob], { type: 'application/pdf' }); const blobUrl = window.URL.createObjectURL(pdfBlob); setDownloadBlobUrl(blobUrl); const link = document.createElement('a'); link.href = blobUrl; link.download = downloadFilename || `PANIA_${currentCourse.slug}_Course_Outline.pdf`; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (err: any) { console.error('Syllabus download error:', err); setDownloadError(err.message || 'Unable to download the PDF. Please try opening it online.'); } finally { setIsDownloading(false); } }; const handleOpenPdfOnline = () => { if (downloadBlobUrl) { window.open(downloadBlobUrl, '_blank'); } else if (downloadUrl) { window.open(`${downloadUrl}&view=1`, '_blank'); } }; const whatsappSyllabusUrl = `https://wa.me/254101936893?text=${encodeURIComponent( `Hello PANIA, please send me the complete PDF syllabus and intake schedule for ${currentCourse.title}.` )}`; return ( ); }