<!-- Chat Container -->
<div class="max-w-4xl mx-auto h-[calc(100vh-140px)] flex flex-col">
    <!-- Messages Area -->
    <div id="messagesContainer" class="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4">
        <!-- Welcome Message -->
        <div class="text-center py-8">
            <div class="bg-gray-100 dark:bg-dark-surface rounded-lg p-6 mx-auto max-w-md">
                <h2 class="text-lg font-semibold mb-2">مرحباً بك في ذكاء اصطناعي نسيم! 🎉</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">ابدأ محادثة جديدة بكتابة رسالتك أدناه</p>
            </div>
        </div>
    </div>

    <!-- Input Area -->
    <div class="border-t border-gray-200 dark:border-dark-border bg-white dark:bg-dark-surface p-4">
        <div class="flex space-x-3 space-x-reverse">
            <div class="flex-1 relative">
                <input 
                    type="text" 
                    id="messageInput" 
                    placeholder="اكتب رسالتك هنا..."
                    class="w-full px-4 py-3 pr-12 text-base border border-gray-300 dark:border-dark-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-dark-bg text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors"
                    maxlength="500"
                >
                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <span id="charCount" class="text-xs text-gray-400">0/500</span>
                </div>
            </div>
            <button 
                id="sendButton" 
                class="bg-primary hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2 space-x-reverse"
            >
                <span>إرسال</span>
                <span>🚀</span>
            </button>
        </div>
        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            اضغط Enter للإرسال • استخدم Shift+Enter للسطر الجديد
        </div>
    </div>
</div>

<!-- Footer with Contact Info -->
<div class="bg-gray-50 dark:bg-dark-surface border-t border-gray-200 dark:border-dark-border p-4">
    <div class="max-w-4xl mx-auto">
        <div class="text-center">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">معلومات التواصل</h3>
            <div class="flex flex-wrap justify-center items-center gap-4 text-xs text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-1 space-x-reverse">
                    <span>💻</span>
                    <span>المبرمج: حسن الزعال</span>
                </div>
                <div class="flex items-center space-x-1 space-x-reverse">
                    <span>📧</span>
                    <a href="mailto:[email protected]" class="text-primary hover:underline">[email protected]</a>
                </div>
                <div class="flex items-center space-x-1 space-x-reverse">
                    <span>📱</span>
                    <a href="tel:+96938832212" class="text-primary hover:underline">+96938832212</a>
                </div>
                <div class="flex items-center space-x-1 space-x-reverse">
                    <span>📷</span>
                    <a href="https://www.instagram.com/hasanalzaal1?igsh=cWI2MnVoOGhnZ3I4&utm_source=qr" target="_blank" class="text-primary hover:underline">@hasanalzaal1</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div id="loadingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-dark-surface p-6 rounded-lg shadow-lg max-w-sm w-full mx-4">
        <div class="flex items-center space-x-3 space-x-reverse">
            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
            <span class="text-gray-700 dark:text-gray-300">جاري إرسال الرسالة...</span>
        </div>
    </div>
</div>

<script>
    // Dark mode detection
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
    }
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        if (event.matches) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    });

    // App state
    let messageCount = 0;

    // DOM elements
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');
    const messagesContainer = document.getElementById('messagesContainer');
    const charCount = document.getElementById('charCount');
    const loadingModal = document.getElementById('loadingModal');

    // Character counter
    messageInput.addEventListener('input', () => {
        const length = messageInput.value.length;
        charCount.textContent = `${length}/500`;
        charCount.className = length > 450 ? 'text-xs text-red-500' : 'text-xs text-gray-400';
    });

    // Register Poe handler for bot responses
    if (window.Poe) {
        window.Poe.registerHandler("chat-handler", (result) => {
            const msg = result.responses[0];
            
            if (msg.status === "error") {
                addMessage('خطأ في الحصول على الرد: ' + (msg.statusText || 'خطأ غير معروف'), 'bot', true);
                hideLoading();
            } else if (msg.status === "incomplete") {
                updateBotMessage(msg.content);
            } else if (msg.status === "complete") {
                updateBotMessage(msg.content);
                hideLoading();
            }
        });
    }

    // Add message to chat
    function addMessage(content, sender = 'user', isError = false) {
        messageCount++;
        const messageDiv = document.createElement('div');
        messageDiv.className = `message-animation flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
        
        const bubble = document.createElement('div');
        bubble.className = `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
            sender === 'user' 
                ? 'bg-primary text-white' 
                : isError 
                    ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border border-red-300 dark:border-red-700'
                    : 'bg-gray-100 dark:bg-dark-surface text-gray-900 dark:text-white border border-gray-200 dark:border-dark-border'
        }`;
        
        if (sender === 'bot' && !isError) {
            bubble.id = `bot-message-${messageCount}`;
        }
        
        bubble.innerHTML = `
            <div class="text-sm whitespace-pre-wrap">${content}</div>
            <div class="text-xs mt-1 opacity-70">
                ${new Date().toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' })}
            </div>
        `;
        
        messageDiv.appendChild(bubble);
        messagesContainer.appendChild(messageDiv);
        scrollToBottom();
        
        return messageCount;
    }

    // Update bot message (for streaming)
    let currentBotMessageId = null;
    function updateBotMessage(content) {
        if (currentBotMessageId) {
            const botMessage = document.getElementById(`bot-message-${currentBotMessageId}`);
            if (botMessage) {
                const textDiv = botMessage.querySelector('.text-sm');
                textDiv.textContent = content;
            }
        } else {
            currentBotMessageId = addMessage(content, 'bot');
        }
    }

    // Show/hide loading
    function showLoading() {
        loadingModal.classList.remove('hidden');
        sendButton.disabled = true;
    }

    function hideLoading() {
        loadingModal.classList.add('hidden');
        sendButton.disabled = false;
        currentBotMessageId = null;
    }

    // Scroll to bottom
    function scrollToBottom() {
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    // Send message
    async function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // Add user message
        addMessage(message, 'user');
        messageInput.value = '';
        charCount.textContent = '0/500';
        
        // Show loading
        showLoading();

        try {
            if (window.Poe && window.Poe.sendUserMessage) {
                await window.Poe.sendUserMessage(`@Claude-Sonnet-4 ${message}`, {
                    handler: "chat-handler",
                    stream: true,
                    openChat: false
                });
            } else {
                // Fallback simulation
                setTimeout(() => {
                    addMessage('مرحباً! أنا بوت تجريبي. رسالتك وصلت بنجاح: "' + message + '"', 'bot');
                    hideLoading();
                }, 1500);
            }
        } catch (error) {
            addMessage('عذراً، حدث خطأ في إرسال الرسالة. يرجى المحاولة مرة أخرى.', 'bot', true);
            hideLoading();
        }
    }

    // Event listeners
    sendButton.addEventListener('click', sendMessage);

    messageInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // Focus on input
    messageInput.focus();
</script>