<div class="h-[calc(100vh-4rem)] flex overflow-hidden bg-slate-950">

    <!-- Column 1: Conversations & Contacts List (Left Sidebar) -->
    <div class="w-80 md:w-96 border-r border-slate-800 bg-slate-900/60 flex flex-col flex-shrink-0">
        <!-- Search & Filter Header -->
        <div class="p-3.5 border-b border-slate-800 space-y-3">
            <div class="flex items-center justify-between">
                <h2 class="text-base font-bold text-white flex items-center space-x-2">
                    <span>Chats</span>
                    <span id="unread-total-badge" class="hidden text-xs bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full font-semibold"></span>
                </h2>
                <div class="flex items-center space-x-2">
                    <button onclick="Chat.refreshInbox()" title="Refresh Chats" class="p-1.5 text-slate-400 hover:text-emerald-400 rounded-lg hover:bg-slate-800 transition">
                        <i class="fa-solid fa-arrows-rotate text-xs"></i>
                    </button>
                    <a href="/settings/simulator" title="Webhook Simulator" class="p-1.5 text-slate-400 hover:text-purple-400 rounded-lg hover:bg-slate-800 transition">
                        <i class="fa-solid fa-flask text-xs"></i>
                    </a>
                </div>
            </div>

            <!-- Search Input -->
            <div class="relative">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
                <input type="text" id="chat-search-input" oninput="Chat.filterConversations(this.value)" placeholder="Search chat or phone..."
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-8 pr-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500">
            </div>

            <!-- Status Tabs -->
            <div class="flex space-x-1 p-1 bg-slate-950/80 rounded-xl border border-slate-800/80 text-xs font-medium">
                <button onclick="Chat.setFilterStatus('all')" id="tab-all" class="flex-1 py-1.5 rounded-lg text-center transition bg-emerald-500/20 text-emerald-400">All</button>
                <button onclick="Chat.setFilterStatus('unread')" id="tab-unread" class="flex-1 py-1.5 rounded-lg text-center transition text-slate-400 hover:text-slate-200">Unread</button>
                <button onclick="Chat.setFilterStatus('open')" id="tab-open" class="flex-1 py-1.5 rounded-lg text-center transition text-slate-400 hover:text-slate-200">Open</button>
                <button onclick="Chat.setFilterStatus('resolved')" id="tab-resolved" class="flex-1 py-1.5 rounded-lg text-center transition text-slate-400 hover:text-slate-200">Resolved</button>
            </div>
        </div>

        <!-- Conversation Item List -->
        <div id="inbox-list" class="flex-1 overflow-y-auto custom-scrollbar divide-y divide-slate-800/40">
            <!-- Rendered dynamically by Chat.js -->
            <div class="p-6 text-center text-slate-500 text-xs">
                <i class="fa-solid fa-circle-notch fa-spin text-lg mb-2"></i>
                <p>Loading WhatsApp conversations...</p>
            </div>
        </div>
    </div>

    <!-- Column 2: Active Chat Viewport (Middle) -->
    <div id="chat-viewport" class="flex-1 flex flex-col min-w-0 bg-slate-950 relative">

        <!-- Default Empty State (When no conversation is selected) -->
        <div id="empty-chat-state" class="flex-1 flex flex-col items-center justify-center p-8 text-center">
            <div class="w-20 h-20 rounded-3xl bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-600 text-4xl mb-4">
                <i class="fa-brands fa-whatsapp text-emerald-500/50"></i>
            </div>
            <h3 class="text-lg font-bold text-white mb-1">WhatsApp Multi-Agent Inbox</h3>
            <p class="text-slate-400 text-xs max-w-sm">Select a conversation from the left to start chatting, assign agent leads, or send templates.</p>
        </div>

        <!-- Active Chat Header -->
        <div id="chat-header" class="hidden h-16 border-b border-slate-800 bg-slate-900/80 px-6 flex items-center justify-between flex-shrink-0">
            <div class="flex items-center space-x-3.5 min-w-0">
                <div id="active-contact-avatar" class="w-10 h-10 rounded-xl bg-emerald-600/30 border border-emerald-500/40 flex items-center justify-center font-bold text-emerald-400 text-sm flex-shrink-0">
                    WA
                </div>
                <div class="min-w-0">
                    <div class="flex items-center space-x-2">
                        <h3 id="active-contact-name" class="font-bold text-white text-sm truncate">Contact Name</h3>
                        <span id="active-contact-stage-badge" class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400">New Lead</span>
                    </div>
                    <p id="active-contact-phone" class="text-xs text-slate-400 font-mono">+1234567890</p>
                </div>
            </div>

            <div class="flex items-center space-x-3">
                <!-- Assign Agent Dropdown -->
                <select id="active-assigned-agent" onchange="Chat.assignCurrentAgent(this.value)" class="bg-slate-950 border border-slate-800 text-slate-300 text-xs rounded-xl px-2.5 py-1.5 focus:outline-none focus:border-emerald-500">
                    <option value="">👤 Unassigned</option>
                    <?php foreach ($agents as $ag): ?>
                        <option value="<?= $ag['id'] ?>"><?= htmlspecialchars($ag['name']) ?></option>
                    <?php endforeach; ?>
                </select>

                <!-- Status Switcher -->
                <select id="active-conv-status" onchange="Chat.changeCurrentStatus(this.value)" class="bg-slate-950 border border-slate-800 text-slate-300 text-xs rounded-xl px-2.5 py-1.5 focus:outline-none focus:border-emerald-500">
                    <option value="open">🟢 Open</option>
                    <option value="pending">🟡 Pending</option>
                    <option value="resolved">⚪ Resolved</option>
                </select>

                <!-- Toggle Details Column Button -->
                <button onclick="Chat.toggleDetailsPanel()" title="Toggle CRM Details" class="p-2 text-slate-400 hover:text-white rounded-xl bg-slate-800/80 hover:bg-slate-700 transition">
                    <i class="fa-solid fa-address-card text-xs"></i>
                </button>
            </div>
        </div>

        <!-- Chat Messages Stream Area -->
        <div id="messages-container" class="hidden flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar bg-slate-950 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:20px_20px]">
            <!-- Messages rendered dynamically -->
        </div>

        <!-- Composer / Input Bar -->
        <div id="chat-composer" class="hidden border-t border-slate-800 bg-slate-900/90 p-4 flex-shrink-0">
            <!-- Quick Reply Hints Dropdown (When typing /) -->
            <div id="quick-reply-hint-box" class="hidden mb-3 bg-slate-950 border border-slate-800 rounded-2xl p-2 max-h-40 overflow-y-auto custom-scrollbar divide-y divide-slate-800/60 shadow-2xl">
                <?php foreach ($quickReplies as $qr): ?>
                    <div onclick="Chat.insertQuickReply('<?= htmlspecialchars(addslashes($qr['message']), ENT_QUOTES) ?>')" class="p-2 hover:bg-slate-800/60 rounded-xl cursor-pointer text-xs flex items-center justify-between group">
                        <div>
                            <span class="font-mono text-emerald-400 font-bold mr-2"><?= htmlspecialchars($qr['shortcut']) ?></span>
                            <span class="text-slate-300"><?= htmlspecialchars($qr['title']) ?></span>
                        </div>
                        <i class="fa-solid fa-arrow-turn-down text-slate-500 group-hover:text-emerald-400 text-[10px]"></i>
                    </div>
                <?php endforeach; ?>
            </div>

            <form id="message-send-form" onsubmit="Chat.handleSend(event)" class="space-y-3">
                <div class="flex items-end space-x-2">
                    <!-- Media Upload Trigger -->
                    <button type="button" onclick="document.getElementById('media-file-input').click()" title="Send Image or Document" class="p-3 text-slate-400 hover:text-emerald-400 rounded-2xl bg-slate-950 border border-slate-800 hover:border-emerald-500/40 transition flex-shrink-0">
                        <i class="fa-solid fa-paperclip text-sm"></i>
                    </button>
                    <input type="file" id="media-file-input" class="hidden" onchange="Chat.handleFileUpload(event)">

                    <!-- Quick Replies Modal Trigger -->
                    <button type="button" onclick="Chat.openQuickRepliesModal()" title="Canned Quick Replies (/)" class="p-3 text-slate-400 hover:text-amber-400 rounded-2xl bg-slate-950 border border-slate-800 hover:border-amber-500/40 transition flex-shrink-0">
                        <i class="fa-solid fa-bolt text-sm"></i>
                    </button>

                    <!-- WhatsApp Templates Trigger -->
                    <button type="button" onclick="Chat.openTemplatesModal()" title="Send WhatsApp Template" class="p-3 text-slate-400 hover:text-blue-400 rounded-2xl bg-slate-950 border border-slate-800 hover:border-blue-500/40 transition flex-shrink-0">
                        <i class="fa-solid fa-file-invoice text-sm"></i>
                    </button>

                    <!-- Text Composer Textarea -->
                    <div class="flex-1 relative">
                        <textarea id="message-input" rows="1" oninput="Chat.handleInputTyping(this)" onkeydown="Chat.handleKeyDown(event)" placeholder="Type a message (or type / for quick replies)..."
                                  class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 resize-none max-h-32 transition"></textarea>
                    </div>

                    <!-- Send Button -->
                    <button type="submit" id="send-message-btn" class="p-3 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold rounded-2xl shadow-lg shadow-emerald-500/20 transition flex-shrink-0">
                        <i class="fa-solid fa-paper-plane text-sm"></i>
                    </button>
                </div>
            </form>
        </div>

    </div>

    <!-- Column 3: Contact CRM Profile & Deal Manager (Right Sidebar) -->
    <div id="contact-crm-panel" class="w-80 md:w-88 border-l border-slate-800 bg-slate-900/80 flex flex-col flex-shrink-0 overflow-y-auto custom-scrollbar p-5 space-y-6">
        
        <!-- Header -->
        <div class="flex items-center justify-between border-b border-slate-800 pb-4">
            <h4 class="font-bold text-white text-sm">Contact 360° Profile</h4>
            <span id="crm-contact-id-badge" class="text-[10px] text-slate-500 font-mono">#ID</span>
        </div>

        <!-- Contact Profile Avatar & Bio -->
        <div class="text-center">
            <div id="crm-contact-avatar-large" class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-emerald-600 to-teal-400 mx-auto flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-emerald-500/20 mb-2">
                WA
            </div>
            <h3 id="crm-contact-name" class="font-bold text-white text-base">Alex Reynolds</h3>
            <p id="crm-contact-company" class="text-xs text-slate-400">TechCorp Solutions</p>
        </div>

        <!-- CRM Pipeline Stage Switcher -->
        <div>
            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Sales Stage</label>
            <select id="crm-contact-stage" onchange="Chat.updateContactStage(this.value)" class="w-full bg-slate-950 border border-slate-800 text-slate-200 text-xs rounded-xl px-3 py-2.5 focus:outline-none focus:border-emerald-500">
                <?php foreach ($stages as $st): ?>
                    <option value="<?= $st['id'] ?>"><?= htmlspecialchars($st['name']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <!-- Tags Management -->
        <div>
            <div class="flex items-center justify-between mb-2">
                <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Tags</label>
            </div>
            <div id="crm-tags-list" class="flex flex-wrap gap-1.5 mb-2">
                <!-- Tag chips rendered dynamically -->
            </div>
            <div class="flex items-center space-x-2">
                <select id="add-tag-select" class="flex-1 bg-slate-950 border border-slate-800 text-slate-300 text-xs rounded-xl px-3 py-2 focus:outline-none focus:border-emerald-500">
                    <option value="">+ Add Tag</option>
                    <?php foreach ($tags as $tg): ?>
                        <option value="<?= $tg['id'] ?>"><?= htmlspecialchars($tg['name']) ?></option>
                    <?php endforeach; ?>
                </select>
                <button onclick="Chat.addTagToCurrentContact()" class="bg-slate-800 hover:bg-slate-700 text-xs text-slate-200 px-3 py-2 rounded-xl transition">Add</button>
            </div>
        </div>

        <!-- Deals Associated with Contact -->
        <div class="border-t border-slate-800 pt-4">
            <div class="flex items-center justify-between mb-3">
                <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Sales Deals</label>
                <button onclick="Chat.openCreateDealModal()" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold flex items-center space-x-1">
                    <i class="fa-solid fa-plus text-[10px]"></i>
                    <span>New Deal</span>
                </button>
            </div>
            <div id="crm-deals-list" class="space-y-2">
                <!-- Deals rendered dynamically -->
            </div>
        </div>

        <!-- Internal Notes -->
        <div class="border-t border-slate-800 pt-4">
            <div class="flex items-center justify-between mb-2">
                <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Internal Notes</label>
                <button onclick="Chat.saveNotes()" class="text-xs text-emerald-400 hover:text-emerald-300 font-medium">Save</button>
            </div>
            <textarea id="crm-contact-notes" rows="4" placeholder="Add internal lead notes..."
                      class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-emerald-500 resize-none"></textarea>
        </div>

    </div>

</div>

<!-- Quick Replies Picker Modal -->
<div id="quick-replies-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Quick Replies Library</h3>
            <button onclick="Chat.closeModal('quick-replies-modal')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="space-y-2 max-h-80 overflow-y-auto custom-scrollbar">
            <?php foreach ($quickReplies as $qr): ?>
                <div onclick="Chat.selectQuickReply('<?= htmlspecialchars(addslashes($qr['message']), ENT_QUOTES) ?>')" class="p-3 bg-slate-950 border border-slate-800 hover:border-emerald-500/50 rounded-2xl cursor-pointer transition">
                    <div class="flex items-center justify-between mb-1">
                        <span class="font-bold text-emerald-400 text-xs font-mono"><?= htmlspecialchars($qr['shortcut']) ?></span>
                        <span class="text-xs font-semibold text-white"><?= htmlspecialchars($qr['title']) ?></span>
                    </div>
                    <p class="text-xs text-slate-400 line-clamp-2"><?= htmlspecialchars($qr['message']) ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- WhatsApp Template Picker Modal -->
<div id="templates-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Meta Approved WhatsApp Templates</h3>
            <button onclick="Chat.closeModal('templates-modal')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="space-y-3 max-h-80 overflow-y-auto custom-scrollbar">
            <?php foreach ($templates as $tmpl): ?>
                <div class="p-4 bg-slate-950 border border-slate-800 rounded-2xl space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="font-mono text-xs font-bold text-blue-400"><?= htmlspecialchars($tmpl['name']) ?></span>
                        <span class="text-[10px] bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full font-semibold">APPROVED</span>
                    </div>
                    <p class="text-xs text-slate-300 bg-slate-900/60 p-2.5 rounded-xl border border-slate-800/80"><?= htmlspecialchars($tmpl['body_text']) ?></p>
                    <div class="flex justify-end">
                        <button onclick="Chat.sendTemplateDirect('<?= htmlspecialchars($tmpl['name']) ?>', '<?= htmlspecialchars($tmpl['language']) ?>')" class="text-xs bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold px-3 py-1.5 rounded-xl transition">
                            Send Template &rarr;
                        </button>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Create Deal Modal -->
<div id="create-deal-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Create Deal for Contact</h3>
            <button onclick="Chat.closeModal('create-deal-modal')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form onsubmit="Chat.submitNewDeal(event)" class="space-y-4">
            <input type="hidden" id="deal-contact-id" name="contact_id">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Deal Title</label>
                <input type="text" name="title" required placeholder="e.g. Enterprise License Setup" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Deal Value ($)</label>
                    <input type="number" step="0.01" name="value" required placeholder="1500.00" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Stage</label>
                    <select name="stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <?php foreach ($stages as $st): ?>
                            <option value="<?= $st['id'] ?>"><?= htmlspecialchars($st['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Expected Closing Date</label>
                <input type="date" name="closing_date" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Create Deal
            </button>
        </form>
    </div>
</div>

<script src="/assets/js/chat.js"></script>
