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>
  );
};