window.Inbox = ({ messages, onRefresh, loading, isDark, showToast }) => {
    
    // মেইল ওপেন করার স্টেট
    const [selectedMsg, setSelectedMsg] = React.useState(null);

    // টাইম ফরম্যাটিং
    const formatTime = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        const now = new Date();
        if (now.toDateString() === date.toDateString()) {
            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
        return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
    };

    // 💾 ডাউনলোড লজিক
    const downloadMail = (msg, e) => {
        if(e) e.stopPropagation();
        
        const content = `From: ${msg.from.address}
Name: ${msg.from.name || 'Unknown'}
Date: ${new Date(msg.createdAt).toLocaleString()}
Subject: ${msg.subject}

--------------------------------------------------

${msg.intro || msg.text || 'No Content Available'}
`;

        const element = document.createElement("a");
        const file = new Blob([content], {type: 'text/plain'});
        element.href = URL.createObjectURL(file);
        element.download = `Email-${msg.id.substring(0,6)}.txt`;
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
        
        if (showToast) showToast("Email Saved Successfully!", "success");
    };

    // 🌐 ব্র্যান্ড লোগো বের করার লজিক (Google Favicon API)
    const getSenderIcon = (email) => {
        const domain = email.split('@')[1];
        return `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
    };

    return (
        <div className="relative">
            
            {/* Control Bar */}
            <div className={`flex items-center justify-between mb-6 p-1 rounded-2xl border backdrop-blur-md
                ${isDark ? 'bg-gradient-to-r from-white/5 to-white/0 border-white/5' : 'bg-white border-slate-200 shadow-sm'}
            `}>
                <div className="flex items-center gap-3 px-4 py-2">
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center border
                        ${isDark ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' : 'bg-blue-50 text-blue-600 border-blue-100'}
                    `}>
                        <i className="fa-solid fa-inbox"></i>
                    </div>
                    <div>
                        <h2 className={`font-bold text-sm tracking-wide ${isDark ? 'text-white' : 'text-slate-800'}`}>Primary Inbox</h2>
                        <span className="text-[10px] text-gray-400 font-mono">
                            {messages.length} MESSAGES
                        </span>
                    </div>
                </div>

                <button 
                    onClick={onRefresh} 
                    disabled={loading}
                    className={`mr-1 px-4 py-2 rounded-xl text-xs font-bold border transition-all active:scale-95 flex items-center gap-2 group
                        ${isDark 
                            ? 'bg-white/5 hover:bg-white/10 text-white border-white/5' 
                            : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}
                    `}
                >
                    <i className={`fa-solid fa-rotate-right ${loading ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-500'}`}></i>
                    <span className="hidden sm:inline">REFRESH</span>
                </button>
            </div>

            {/* Message List */}
            <div className="space-y-3 min-h-[300px]">
                
                {loading && messages.length === 0 && (
                    <>{[1, 2, 3].map((i) => <div key={i} className={`h-20 rounded-2xl animate-pulse ${isDark ? 'bg-white/5' : 'bg-slate-200'}`}></div>)}</>
                )}

                {!loading && messages.length === 0 && (
                    <div className={`flex flex-col items-center justify-center py-20 rounded-3xl border border-dashed relative overflow-hidden group
                        ${isDark ? 'border-white/10 bg-white/0' : 'border-slate-300 bg-slate-50'}
                    `}>
                        <div className={`relative z-10 p-6 rounded-full border shadow-xl group-hover:scale-110 transition-transform duration-500
                            ${isDark ? 'bg-slate-800/50 border-white/10' : 'bg-white border-slate-200'}
                        `}>
                            <i className="fa-regular fa-paper-plane text-4xl text-gray-400"></i>
                        </div>
                        <h3 className={`mt-6 text-xl font-bold tracking-tight ${isDark ? 'text-white' : 'text-slate-800'}`}>Inbox is Empty</h3>
                        <p className="text-gray-500 text-sm mt-2">Waiting for incoming signals.</p>
                    </div>
                )}

                {!loading && messages.map((msg, idx) => (
                    <div 
                        key={idx}
                        onClick={() => setSelectedMsg(msg)} // 🔥 CLICK TO OPEN MAIL
                        className={`group relative p-4 rounded-2xl border transition-all duration-300 cursor-pointer overflow-hidden shadow-lg
                            ${isDark 
                                ? 'bg-[#0a0a0a]/60 border-white/5 hover:bg-white/5 hover:border-blue-500/30' 
                                : 'bg-white border-slate-100 hover:border-blue-300 hover:shadow-xl'}
                        `}
                    >
                        {isDark && <div className="absolute top-0 left-0 w-1 h-full bg-blue-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>}

                        <div className="flex items-start gap-4 pl-2">
                            {/* 🔥 BRAND LOGO / AVATAR */}
                            <div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center overflow-hidden border shadow-sm
                                ${isDark ? 'bg-slate-800 border-white/10' : 'bg-white border-slate-200'}
                            `}>
                                <img 
                                    src={getSenderIcon(msg.from.address)} 
                                    alt="Logo" 
                                    className="w-full h-full object-cover"
                                    onError={(e) => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }} 
                                />
                                {/* Fallback Initial if Image fails */}
                                <span className="hidden w-full h-full items-center justify-center font-bold text-sm bg-blue-500 text-white">
                                    {(msg.from.name || msg.from.address)[0].toUpperCase()}
                                </span>
                            </div>

                            <div className="flex-1 min-w-0">
                                <div className="flex justify-between items-baseline">
                                    <h4 className={`font-bold text-sm truncate transition-colors ${isDark ? 'text-white group-hover:text-blue-400' : 'text-slate-900 group-hover:text-blue-600'}`}>
                                        {msg.from.name || msg.from.address}
                                    </h4>
                                    
                                    <div className="flex items-center gap-2">
                                        <button 
                                            onClick={(e) => downloadMail(msg, e)}
                                            className={`text-[10px] px-2 py-1 rounded transition-colors
                                                ${isDark 
                                                    ? 'bg-blue-500/10 text-blue-400 hover:bg-blue-500 hover:text-white' 
                                                    : 'bg-blue-50 text-blue-600 hover:bg-blue-100'}
                                            `}
                                            title="Save as Text File"
                                        >
                                            <i className="fa-solid fa-download"></i>
                                        </button>
                                        
                                        <span className={`text-[10px] font-mono px-2 py-0.5 rounded border
                                            ${isDark ? 'text-gray-500 bg-black/40 border-white/5' : 'text-slate-500 bg-slate-100 border-slate-200'}
                                        `}>
                                            {formatTime(msg.createdAt)}
                                        </span>
                                    </div>
                                </div>
                                <h5 className={`text-sm font-medium truncate mt-0.5 ${isDark ? 'text-gray-300' : 'text-slate-700'}`}>
                                    {msg.subject || "(No Subject)"}
                                </h5>
                                <p className="text-xs text-gray-500 mt-1 line-clamp-1">
                                    {msg.intro || "Click to expand message..."}
                                </p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* 🔥 EMAIL READING MODAL (FULL SCREEN VIEW) */}
            {selectedMsg && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
                    <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setSelectedMsg(null)}></div>
                    
                    <div className={`relative w-full max-w-2xl rounded-2xl shadow-2xl flex flex-col max-h-[85vh] animate-[fadeInUp_0.3s_ease-out]
                        ${isDark ? 'bg-[#0a0a0a] border border-white/10 text-white' : 'bg-white text-slate-800'}
                    `}>
                        {/* Modal Header */}
                        <div className={`flex justify-between items-center p-6 border-b ${isDark ? 'border-white/5 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                            <div className="flex items-center gap-4">
                                <div className="w-10 h-10 rounded-full overflow-hidden border">
                                    <img src={getSenderIcon(selectedMsg.from.address)} className="w-full h-full object-cover" />
                                </div>
                                <div>
                                    <h3 className="font-bold text-lg leading-tight">{selectedMsg.subject}</h3>
                                    <p className="text-xs text-gray-500 mt-0.5">
                                        From: <span className="text-blue-500">{selectedMsg.from.address}</span>
                                    </p>
                                </div>
                            </div>
                            <button onClick={() => setSelectedMsg(null)} className={`w-8 h-8 rounded-full flex items-center justify-center transition ${isDark ? 'bg-white/5 hover:bg-red-500/20 text-gray-400' : 'bg-slate-200 hover:bg-red-100 text-slate-600'}`}>
                                <i className="fa-solid fa-xmark"></i>
                            </button>
                        </div>

                        {/* Modal Body */}
                        <div className="p-8 overflow-y-auto glass-scroll text-sm leading-relaxed whitespace-pre-wrap">
                            {selectedMsg.text || selectedMsg.intro || "No text content available."}
                        </div>

                        {/* Modal Footer */}
                        <div className={`p-4 border-t flex justify-end gap-3 ${isDark ? 'border-white/5 bg-black/20' : 'border-slate-100 bg-slate-50'}`}>
                            <button onClick={() => setSelectedMsg(null)} className="px-4 py-2 rounded-lg text-xs font-bold text-gray-500 hover:bg-gray-500/10">
                                CLOSE
                            </button>
                            <button onClick={() => downloadMail(selectedMsg)} className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold flex items-center gap-2 shadow-lg">
                                <i className="fa-solid fa-download"></i> DOWNLOAD
                            </button>
                        </div>
                    </div>
                </div>
            )}

        </div>
    );
};