import React from 'react';
import { 
  Dialog, 
  DialogContent, 
  DialogTitle, 
} from './dialog';
import { Button } from './button';
import { 
  Eye, 
  Download, 
} from 'lucide-react';
import { WIDE_DIALOG_CLASS } from '../../lib/dialogStyles';

interface DocumentPreviewModalProps {
  isOpen: boolean;
  onClose: () => void;
  document: {
    fileName: string;
    filePath: string;
    documentType?: string;
    createdAt?: string;
    mimeType?: string;
  } | null;
}

export const DocumentPreviewModal: React.FC<DocumentPreviewModalProps> = ({ 
  isOpen, 
  onClose, 
  document 
}) => {
  const baseUrl = 'http://localhost:5000';
  const fileUrl = document ? `${baseUrl}${document.filePath.startsWith('/') ? '' : '/'}${document.filePath}` : '';

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className={`${WIDE_DIALOG_CLASS} h-[85vh] flex flex-col p-0 overflow-hidden bg-white shadow-2xl border-none`}>
        {document ? (
          <>
            <div className="flex items-center justify-between p-4 border-b bg-slate-50">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center border border-red-200">
                  <Eye className="w-5 h-5 text-re-red" />
                </div>
                <div>
                  <DialogTitle className="text-sm font-bold text-slate-900 leading-none mb-1">
                    {document.fileName}
                  </DialogTitle>
                  <p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">{document.documentType}</p>
                </div>
              </div>
              <div className="flex items-center gap-2 pr-10">
                 <Button variant="outline" size="sm" className="h-8 gap-2" onClick={() => window.open(fileUrl, '_blank')}>
                    <Download className="w-4 h-4" />
                    <span className="hidden sm:inline">Download</span>
                 </Button>
              </div>
            </div>
            
            <div className="flex-1 bg-slate-100 relative overflow-hidden flex items-center justify-center p-4">
                 {document.fileName?.toLowerCase().endsWith('.pdf') ? (
                    <iframe 
                      src={`${fileUrl}#toolbar=0`} 
                      className="w-full h-full bg-white shadow-inner rounded-sm" 
                      title="Preview" 
                    />
                 ) : (
                    <img 
                      src={fileUrl} 
                      className="max-h-full max-w-full object-contain shadow-lg rounded-sm" 
                      alt="Preview" 
                    />
                 )}
            </div>
          </>
        ) : (
          <div className="flex items-center justify-center h-full text-slate-400">Loading document...</div>
        )}
      </DialogContent>
    </Dialog>
  );
};