const Messages = () => {
    const { messages } = useContext(AppContext);
    const [activeMessage, setActiveMessage] = useState(messages[0] || null);
    const [replyText, setReplyText] = useState('');

    const handleSend = () => {
        if (!replyText.trim()) return;
        // In a real app, this would append a message to the active conversation
        setReplyText('');
    };

    return (
        <div className="h-[calc(100vh-140px)] bg-white dark:bg-surface-dark rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 flex overflow-hidden">
            {/* Conversation List */}
            <div className={`w-full md:w-80 border-r border-gray-200 dark:border-gray-800 flex flex-col ${activeMessage ? 'hidden md:flex' : 'flex'}`}>
                <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center bg-gray-50 dark:bg-gray-900/50">
                    <h2 className="font-bold text-gray-900 dark:text-white text-lg">Messages</h2>
                    <button className="p-2 text-primary-600 bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/40 rounded-full transition-colors">
                        <i data-lucide="edit" className="w-4 h-4"></i>
                    </button>
                </div>
                <div className="p-3 border-b border-gray-200 dark:border-gray-800">
                    <Input 
                        placeholder="Search messages..." 
                        icon={<i data-lucide="search" className="w-4 h-4"></i>}
                        className="bg-gray-100 dark:bg-gray-900 border-transparent py-2"
                    />
                </div>
                <div className="flex-1 overflow-y-auto no-scrollbar">
                    {messages.map(msg => (
                        <div 
                            key={msg.id} 
                            onClick={() => setActiveMessage(msg)}
                            className={`p-4 border-b border-gray-100 dark:border-gray-800/50 cursor-pointer transition-colors flex gap-3 relative ${activeMessage?.id === msg.id ? 'bg-primary-50 dark:bg-primary-900/10' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}`}
                        >
                            <div className="relative">
                                <Avatar src={msg.avatar} alt={msg.name} />
                                {msg.online && <div className="absolute bottom-0 right-0 w-3 h-3 bg-emerald-500 border-2 border-white dark:border-surface-dark rounded-full"></div>}
                            </div>
                            <div className="flex-1 overflow-hidden">
                                <div className="flex justify-between items-baseline mb-1">
                                    <h4 className={`font-medium truncate ${msg.unread > 0 ? 'text-gray-900 dark:text-white font-bold' : 'text-gray-700 dark:text-gray-200'}`}>{msg.name}</h4>
                                    <span className={`text-xs whitespace-nowrap ml-2 ${msg.unread > 0 ? 'text-primary-600 dark:text-primary-400 font-bold' : 'text-gray-400'}`}>{msg.time}</span>
                                </div>
                                <p className={`text-sm truncate ${msg.unread > 0 ? 'text-gray-900 dark:text-gray-100 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>{msg.lastMessage}</p>
                            </div>
                            {msg.unread > 0 && (
                                <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 bg-primary-600 rounded-full flex items-center justify-center text-[10px] font-bold text-white shadow-sm">
                                    {msg.unread}
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>

            {/* Active Conversation */}
            <div className={`flex-1 flex flex-col bg-gray-50/50 dark:bg-gray-900/20 ${!activeMessage ? 'hidden md:flex' : 'flex'}`}>
                {activeMessage ? (
                    <>
                        <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center bg-white dark:bg-surface-dark shadow-sm z-10">
                            <div className="flex items-center gap-3">
                                <button className="md:hidden p-2 -ml-2 text-gray-500 hover:bg-gray-100 rounded-full" onClick={() => setActiveMessage(null)}>
                                    <i data-lucide="arrow-left" className="w-5 h-5"></i>
                                </button>
                                <Avatar src={activeMessage.avatar} alt={activeMessage.name} />
                                <div>
                                    <h3 className="font-bold text-gray-900 dark:text-white">{activeMessage.name}</h3>
                                    <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
                                        {activeMessage.online ? (
                                            <><span className="w-2 h-2 bg-emerald-500 rounded-full mr-1.5 inline-block"></span> Online</>
                                        ) : 'Offline'}
                                    </p>
                                </div>
                            </div>
                            <div className="flex gap-1">
                                <button className="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-full transition-colors">
                                    <i data-lucide="phone" className="w-5 h-5"></i>
                                </button>
                                <button className="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-full transition-colors">
                                    <i data-lucide="video" className="w-5 h-5"></i>
                                </button>
                                <button className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
                                    <i data-lucide="more-vertical" className="w-5 h-5"></i>
                                </button>
                            </div>
                        </div>

                        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6 flex flex-col justify-end">
                            <div className="text-center">
                                <span className="text-xs text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full font-medium">Today</span>
                            </div>
                            {/* Dummy chat history */}
                            <div className="flex gap-3 max-w-[85%]">
                                <Avatar src={activeMessage.avatar} alt={activeMessage.name} size="sm" className="mt-auto" />
                                <div>
                                    <div className="bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 p-3 rounded-2xl rounded-bl-sm shadow-sm text-sm text-gray-800 dark:text-gray-200">
                                        Hey! How's the new project coming along?
                                    </div>
                                    <span className="text-[10px] text-gray-400 mt-1 ml-1">10:28 AM</span>
                                </div>
                            </div>
                            <div className="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
                                <div>
                                    <div className="bg-primary-600 text-white p-3 rounded-2xl rounded-br-sm shadow-sm text-sm">
                                        It's going great! We just finalized the initial design system.
                                    </div>
                                    <span className="text-[10px] text-gray-400 mt-1 mr-1 block text-right">10:29 AM</span>
                                </div>
                            </div>
                            <div className="flex gap-3 max-w-[85%]">
                                <Avatar src={activeMessage.avatar} alt={activeMessage.name} size="sm" className="mt-auto" />
                                <div>
                                    <div className="bg-white dark:bg-surface-dark border border-gray-100 dark:border-gray-800 p-3 rounded-2xl rounded-bl-sm shadow-sm text-sm text-gray-800 dark:text-gray-200">
                                        {activeMessage.lastMessage}
                                    </div>
                                    <span className="text-[10px] text-gray-400 mt-1 ml-1">{activeMessage.time.replace('Yesterday', '2:00 PM')}</span>
                                </div>
                            </div>
                        </div>

                        <div className="p-4 bg-white dark:bg-surface-dark border-t border-gray-200 dark:border-gray-800">
                            <div className="flex items-end gap-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-2 focus-within:ring-2 focus-within:ring-primary-500/20 focus-within:border-primary-400 transition-all">
                                <button className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-full transition-colors mb-0.5">
                                    <i data-lucide="paperclip" className="w-5 h-5"></i>
                                </button>
                                <textarea 
                                    value={replyText}
                                    onChange={(e) => setReplyText(e.target.value)}
                                    placeholder="Type a message..." 
                                    className="flex-1 bg-transparent border-none focus:ring-0 resize-none max-h-32 min-h-[44px] py-3 text-sm text-gray-900 dark:text-gray-100 outline-none"
                                    rows="1"
                                />
                                <button className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-full transition-colors mb-0.5">
                                    <i data-lucide="smile" className="w-5 h-5"></i>
                                </button>
                                <Button 
                                    variant="primary" 
                                    className="rounded-xl px-4 mb-0.5" 
                                    disabled={!replyText.trim()}
                                    onClick={handleSend}
                                >
                                    <i data-lucide="send" className="w-4 h-4"></i>
                                </Button>
                            </div>
                        </div>
                    </>
                ) : (
                    <EmptyState 
                        icon={<i data-lucide="message-square" className="w-12 h-12"></i>}
                        title="Your Messages"
                        description="Select a conversation or start a new one to connect with your network."
                        action={<Button variant="primary">New Message</Button>}
                    />
                )}
            </div>
        </div>
    );
};