import React, { useEffect } from 'react';

interface ErrorDetailModalProps {
    isOpen: boolean;
    onClose: () => void;
    errorMessage: string | null;
}

const ErrorDetailModal: React.FC<ErrorDetailModalProps> = ({ isOpen, onClose, errorMessage }) => {
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'auto';
        }
        return () => {
            document.body.style.overflow = 'auto';
        };
    }, [isOpen]);
    
    if (!isOpen) {
        return null;
    }

    return (
        <div 
            className="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-4 animate-fade-in-fast"
            onClick={onClose}
            role="dialog"
            aria-modal="true"
        >
            <div 
                className="bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col p-6 animate-slide-up"
                onClick={e => e.stopPropagation()}
            >
                <div className="flex justify-between items-center mb-4 pb-4 border-b border-slate-700">
                    <h2 className="text-xl font-semibold text-rose-400">Chi tiết Lỗi</h2>
                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors text-3xl leading-none">&times;</button>
                </div>

                <div className="flex-grow overflow-y-auto pr-2 -mr-2">
                   <pre className="bg-slate-900/50 p-4 rounded-lg text-slate-300 whitespace-pre-wrap break-all font-mono text-sm">
                        {errorMessage || 'Không có chi tiết lỗi.'}
                   </pre>
                </div>
                 <div className="mt-6 pt-4 border-t border-slate-700 text-right">
                    <button 
                        onClick={onClose}
                        className="text-white bg-slate-600 hover:bg-slate-700 font-medium rounded-lg text-sm px-5 py-2.5"
                    >
                        Đóng
                    </button>
                </div>
            </div>
            <style>{`
                @keyframes fade-in-fast {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                .animate-fade-in-fast {
                    animation: fade-in-fast 0.2s ease-out forwards;
                }
                @keyframes slide-up {
                    from { opacity: 0; transform: translateY(20px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .animate-slide-up {
                    animation: slide-up 0.3s ease-out forwards;
                }
            `}</style>
        </div>
    );
};

export default ErrorDetailModal;