| import React from 'react'; |
| import { X, Download, FileText, Scale } from 'lucide-react'; |
| import type { Message } from '../types/chat'; |
|
|
| interface PDFPreviewModalProps { |
| isOpen: boolean; |
| onClose: () => void; |
| pdfData?: Message['pdfPreview']; |
| } |
|
|
| export const PDFPreviewModal: React.FC<PDFPreviewModalProps> = ({ |
| isOpen, |
| onClose, |
| pdfData |
| }) => { |
| if (!isOpen || !pdfData) return null; |
|
|
| const handlePrintDownload = () => { |
| window.print(); |
| }; |
|
|
| return ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in"> |
| <div className="w-full max-w-3xl glass-panel rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]"> |
| {/* Header Toolbar */} |
| <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50 dark:bg-darkbg-800"> |
| <div className="flex items-center space-x-3"> |
| <div className="p-2 rounded-xl bg-brand-500 text-white shadow-sm"> |
| <FileText className="w-5 h-5" /> |
| </div> |
| <div> |
| <h3 className="text-sm font-bold text-slate-900 dark:text-white">{pdfData.title}</h3> |
| <p className="text-[11px] text-slate-500 dark:text-slate-400">Formal Legal PDF Document Preview</p> |
| </div> |
| </div> |
| |
| <div className="flex items-center space-x-2"> |
| <button |
| onClick={handlePrintDownload} |
| className="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-semibold shadow-md transition-all" |
| > |
| <Download className="w-4 h-4" /> |
| <span>Export PDF / Print</span> |
| </button> |
| <button |
| onClick={onClose} |
| className="p-1.5 rounded-xl text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" |
| > |
| <X className="w-5 h-5" /> |
| </button> |
| </div> |
| </div> |
| |
| {/* PDF Document Paper Body */} |
| <div className="p-8 overflow-y-auto bg-slate-200 dark:bg-slate-950 flex justify-center"> |
| <div className="w-full max-w-2xl bg-white text-slate-900 p-8 sm:p-12 shadow-2xl rounded-sm font-serif text-sm leading-relaxed border border-slate-300"> |
| {/* Formal Legal Header */} |
| <div className="text-center border-b border-slate-900 pb-6 mb-6"> |
| <div className="flex items-center justify-center space-x-2 mb-2"> |
| <Scale className="w-6 h-6 text-slate-900" /> |
| <h1 className="font-bold text-xl tracking-wider uppercase">LEGAL FORMAL NOTICE & REPORT</h1> |
| </div> |
| <p className="text-xs uppercase tracking-widest text-slate-600">Generated by LawSLM AI Assistant (Developer: Amit Kumar)</p> |
| <p className="text-[11px] text-slate-500 mt-1">Date: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p> |
| </div> |
| |
| {/* Title & Summary */} |
| <div className="mb-6"> |
| <h2 className="text-lg font-bold uppercase underline mb-2 text-slate-900">{pdfData.title}</h2> |
| <p className="text-xs italic text-slate-700 font-sans bg-slate-100 p-3 rounded border border-slate-200"> |
| {pdfData.summary} |
| </p> |
| </div> |
| |
| {/* Document Sections */} |
| <div className="space-y-6"> |
| {pdfData.sections.map((sec, idx) => ( |
| <div key={idx} className="space-y-2"> |
| <h3 className="text-sm font-bold uppercase tracking-wide text-slate-900"> |
| {idx + 1}. {sec.heading} |
| </h3> |
| <p className="text-xs text-slate-800 leading-relaxed text-justify"> |
| {sec.body} |
| </p> |
| </div> |
| ))} |
| </div> |
| |
| {/* Signature & Seal Block */} |
| <div className="mt-12 pt-8 border-t border-slate-300 flex justify-between items-end text-xs"> |
| <div> |
| <p className="font-bold uppercase">Prepared By:</p> |
| <p className="text-slate-700 font-sans">LawSLM Automated Pipeline</p> |
| <p className="text-[10px] text-slate-500 font-sans">Developer: Amit Kumar</p> |
| </div> |
| |
| <div className="text-right"> |
| <div className="w-32 border-b border-slate-800 mb-1" /> |
| <p className="font-bold uppercase">Authorized Signatory</p> |
| <p className="text-[10px] text-slate-500 font-sans">Legal & Tech Review</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
|
|
