import React, { useEffect, useState } from 'react';
import { X, FileText, Image as ImageIcon, Code } from 'lucide-react';

interface FilePreviewProps {
    isOpen: boolean;
    fileName: string;
    blob: Blob | null;
    onClose: () => void;
}

export const FilePreview: React.FC<FilePreviewProps> = ({ isOpen, fileName, blob, onClose }) => {
    const [content, setContent] = useState<string | null>(null);
    const [objectUrl, setObjectUrl] = useState<string | null>(null);

    useEffect(() => {
        if (!blob) return;

        const type = blob.type;
        
        // Handle Images
        if (type.startsWith('image/')) {
            const url = URL.createObjectURL(blob);
            setObjectUrl(url);
            return () => URL.revokeObjectURL(url);
        }

        // Handle Text/JSON/Code
        if (type.startsWith('text/') || type.includes('json') || type.includes('javascript') || type.includes('xml')) {
            blob.text().then(text => setContent(text));
        } else {
            // Fallback for unknown text-like files
             blob.text().then(text => setContent(text));
        }
    }, [blob]);

    if (!isOpen || !blob) return null;

    const isImage = blob.type.startsWith('image/');

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
                {/* Header */}
                <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                    <div className="flex items-center gap-3">
                        <div className="p-2 bg-yellow-100 rounded-lg text-yellow-600">
                            {isImage ? <ImageIcon className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
                        </div>
                        <div>
                            <h3 className="font-semibold text-gray-900 truncate max-w-md">{fileName}</h3>
                            <p className="text-xs text-gray-500 uppercase tracking-wider">{blob.type || 'Unknown Type'}</p>
                        </div>
                    </div>
                    <button 
                        onClick={onClose}
                        className="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-200 rounded-full transition-colors"
                    >
                        <X className="w-5 h-5" />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-auto p-6 bg-gray-50/50 flex items-center justify-center min-h-[300px]">
                    {isImage && objectUrl && (
                        <img src={objectUrl} alt={fileName} className="max-w-full max-h-full rounded-lg shadow-sm object-contain" />
                    )}

                    {!isImage && content && (
                        <div className="w-full h-full bg-white border border-gray-200 rounded-lg p-4 overflow-auto shadow-inner">
                            <pre className="text-sm font-mono text-gray-800 whitespace-pre-wrap break-words">
                                {content.slice(0, 50000)}
                                {content.length > 50000 && <span className="text-gray-400 block mt-2 italic">...Content truncated...</span>}
                            </pre>
                        </div>
                    )}
                    
                    {!isImage && !content && (
                         <div className="text-center text-gray-500">
                             <p>Binary file or loading...</p>
                         </div>
                    )}
                </div>

                {/* Footer */}
                <div className="px-6 py-4 border-t border-gray-100 bg-white flex justify-end">
                    <button 
                        onClick={onClose}
                        className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors"
                    >
                        Close Preview
                    </button>
                </div>
            </div>
        </div>
    );
};