{% extends "admin/base.html" %}
{% block title %}Bot Mode{% endblock %}
{% block header_title %}External Bot Connectors{% endblock %}

{% block content %}
<div class="space-y-8">
    <div class="card-style bg-indigo-500/10 border border-indigo-500/30">
        <div class="flex items-start gap-4">
            <div class="p-2 bg-indigo-500 rounded-lg flex-shrink-0">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div class="text-sm text-gray-300">
                <p class="font-bold text-white mb-2">Bot Orchestration is Active</p>
                <p class="mb-4">Bridge your AI cognitive graphs to messaging apps. Connection tokens are stored using AES-256 encryption.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
                    <div class="bg-black/30 p-3 rounded-lg border border-white/5">
                        <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">How it works</h4>
                        <p class="text-[11px] leading-relaxed">Incoming messages trigger the <strong>Target Workflow</strong>. The Hub resolves the model or graph, executes the request, and sends the final answer back to the platform.</p>
                    </div>
                    <div class="bg-black/30 p-3 rounded-lg border border-white/5">
                        <h4 class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-1">Telemetry</h4>
                        <p class="text-[11px] leading-relaxed">Bot requests appear in the <b>Live System Flow</b> with a "BOT" badge. You can monitor latency and speed as your bots interact with users.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Bot -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2">
            <div class="card-style h-full">
                <h2 class="card-header text-lg font-bold mb-6">Deploy New Connector</h2>
                <form action="{{ url_for('admin_add_bot') }}" method="post" class="space-y-6" autocomplete="off">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Friendly Name</label>
                            <input type="text" name="name" placeholder="e.g. Support-Bot" required 
                                   class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 focus:border-indigo-500 outline-none transition-colors" 
                                   autocomplete="off">
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Messaging Platform</label>
                            <select name="platform" id="platform-select" onchange="updateBotView()" 
                                    class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 text-indigo-400 font-bold outline-none">
                                <option value="telegram">Telegram</option>
                                <option value="discord">Discord</option>
                                <option value="slack">Slack (Socket Mode)</option>
                                <option value="whatsapp">WhatsApp (Cloud API)</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Primary Access Token</label>
                            <input type="password" name="token" placeholder="Paste platform token..." required 
                                   class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 focus:border-indigo-500 outline-none transition-colors"
                                   autocomplete="new-password">
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Target Workflow (Brains)</label>
                            <select name="target_workflow" class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 outline-none">
                                <option value="auto">auto (Intelligent Routing)</option>
                                {% for w in available_workflows %}
                                <option value="{{ w }}">{{ w }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    
                    <div id="extra-fields" class="grid grid-cols-1 md:grid-cols-2 gap-6 hidden pt-4 border-t border-white/5">
                        <div id="slack-fields" class="hidden">
                            <label class="block text-[10px] font-black text-purple-400 uppercase tracking-widest mb-1 px-1">Slack App-Level Token (xapp-...)</label>
                            <input type="password" name="app_token" placeholder="Required for Socket Mode" class="w-full p-2.5 rounded-lg bg-black/40 border border-purple-500/20 outline-none" autocomplete="new-password">
                        </div>
                        <div id="whatsapp-fields" class="hidden">
                            <label class="block text-[10px] font-black text-green-400 uppercase tracking-widest mb-1 px-1">Phone Number ID</label>
                            <input type="text" name="phone_id" placeholder="From Meta Dev Portal" class="w-full p-2.5 rounded-lg bg-black/40 border border-green-500/20 outline-none" autocomplete="off">
                        </div>
                    </div>

                    <div class="flex justify-end pt-4">
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 px-10 py-3 rounded-xl font-black text-xs uppercase tracking-widest text-white shadow-lg transition-all transform active:scale-95">Deploy Connector</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Documentation Card (Dynamic) -->
        <div class="lg:col-span-1">
            <div class="card-style bg-black/40 border-indigo-500/20 h-full">
                <h2 id="help-title" class="text-xs font-black text-indigo-400 uppercase tracking-widest mb-4 border-b border-white/10 pb-2">Configuration Guide</h2>
                <div id="help-content" class="text-xs text-gray-400 space-y-4 leading-relaxed overflow-y-auto custom-scrollbar h-[350px] pr-2">
                    <!-- Populated by JS -->
                </div>
            </div>
        </div>
    </div>

    <script>
        const PLATFORM_GUIDE = {
            telegram: {
                title: "TELEGRAM BOT MASTERCLASS",
                content: `
                    <div class="space-y-6">
                        <section>
                            <h4 class="text-white font-bold mb-2">🔑 Step 1: Create your Identity</h4>
                            <p>1. Search for <a href="https://t.me/botfather" class="text-indigo-400 underline" target="_blank">@BotFather</a> in your Telegram app.</p>
                            <p>2. Start a chat and send <b>/newbot</b>.</p>
                            <p>3. Follow the prompts to set a name and a username ending in 'bot'.</p>
                            <p>4. Copy the <b>HTTP API Token</b> provided.</p>
                        </section>

                        <section>
                            <h4 class="text-white font-bold mb-2">⚙️ Step 2: Critical Settings</h4>
                            <p>1. To use the bot in groups, send <b>/setprivacy</b> to BotFather.</p>
                            <p>2. Select your bot and set it to <b>Disabled</b>. This allows LoLLMs to "hear" every message.</p>
                            <p>3. Send <b>/setjoingroups</b> and ensure it is <b>Enabled</b>.</p>
                        </section>

                        <section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
                            <h4 class="text-white font-bold mb-2">📱 Step 3: Install & Chat</h4>
                            <p>Download the official app to chat with your AI on the go:</p>
                            <div class="flex gap-4 mt-2">
                                <a href="https://apps.apple.com/app/telegram-messenger/id682253849" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
                                <a href="https://play.google.com/store/apps/details?id=org.telegram.messenger" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
                            </div>
                        </section>
                    </div>
                `
            },
            discord: {
                title: "DISCORD ARCHITECT GUIDE",
                content: `
                    <div class="space-y-6">
                        <section>
                            <h4 class="text-white font-bold mb-2">🔑 Step 1: Gateway Portal</h4>
                            <p>1. Go to the <a href="https://discord.com/developers/applications" class="text-indigo-400 underline" target="_blank">Discord Developer Portal</a>.</p>
                            <p>2. Click <b>New Application</b> and give it a name.</p>
                            <p>3. Navigate to the <b>Bot</b> tab in the sidebar.</p>
                            <p>4. Click <b>Reset Token</b> to reveal and copy your <b>Bot Token</b>.</p>
                        </section>

                        <section>
                            <h4 class="text-white font-bold mb-2">⚙️ Step 2: Permissions (Vital)</h4>
                            <p>1. Scroll down in the Bot tab to <b>Privileged Gateway Intents</b>.</p>
                            <p>2. Enable <b>MESSAGE CONTENT INTENT</b>. Without this, the AI will be deaf.</p>
                            <p>3. Go to <b>OAuth2 → URL Generator</b>.</p>
                            <p>4. Check <b>bot</b> and <b>Administrator</b> (or specific read/write permissions).</p>
                            <p>5. Copy the generated URL and paste it into your browser to invite the bot to your server.</p>
                        </section>

                        <section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
                            <h4 class="text-white font-bold mb-2">📱 Step 3: Mobile Experience</h4>
                            <p>Add your AI to your pocket for instant logic support:</p>
                            <div class="flex gap-4 mt-2">
                                <a href="https://apps.apple.com/app/discord-chat-talk-hangout/id985746746" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
                                <a href="https://play.google.com/store/apps/details?id=com.discord" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
                            </div>
                        </section>
                    </div>
                `
            },
            slack: {
                title: "SLACK ENTERPRISE DEPLOYMENT",
                content: `
                    <div class="space-y-6">
                        <section>
                            <h4 class="text-white font-bold mb-2">🔑 Step 1: App Creation</h4>
                            <p>1. Open the <a href="https://api.slack.com/apps" class="text-indigo-400 underline" target="_blank">Slack API Dashboard</a>.</p>
                            <p>2. Click <b>Create New App</b> → <b>From Scratch</b>.</p>
                            <p>3. Go to <b>Settings → Basic Information</b>.</p>
                            <p>4. Scroll to <b>App-Level Tokens</b>, create one with <b>connections:write</b> scope, and paste it into "App-Level Token".</p>
                        </section>

                        <section>
                            <h4 class="text-white font-bold mb-2">⚙️ Step 2: Socket Mode & Scopes</h4>
                            <p>1. Go to <b>Settings → Socket Mode</b> and enable it.</p>
                            <p>2. Go to <b>Features → OAuth & Permissions</b>.</p>
                            <p>3. Add <b>chat:write</b> and <b>app_mentions:read</b> to Bot Token Scopes.</p>
                            <p>4. Scroll up and <b>Install to Workspace</b> to get your <b>Bot User OAuth Token</b> (xoxb-...).</p>
                            <p>5. Go to <b>Features → Event Subscriptions</b>, enable, and add <b>message.channels</b> under bot events.</p>
                        </section>

                        <section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
                            <h4 class="text-white font-bold mb-2">📱 Step 3: Work Anywhere</h4>
                            <p>Install Slack to access your workflows from mobile:</p>
                            <div class="flex gap-4 mt-2">
                                <a href="https://apps.apple.com/app/slack/id618783545" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
                                <a href="https://play.google.com/store/apps/details?id=com.Slack" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
                            </div>
                        </section>
                    </div>
                `
            },
            whatsapp: {
                title: "WHATSAPP CLOUD SETUP",
                content: `
                    <div class="space-y-6">
                        <section>
                            <h4 class="text-white font-bold mb-2">🔑 Step 1: Meta Portal</h4>
                            <p>1. Register at <a href="https://developers.facebook.com" class="text-indigo-400 underline" target="_blank">Meta for Developers</a>.</p>
                            <p>2. Create a <b>Business</b> App Type.</p>
                            <p>3. Add the <b>WhatsApp</b> product to your app.</p>
                            <p>4. Go to <b>Getting Started</b> to find your <b>Phone Number ID</b> and <b>Temporary Access Token</b>.</p>
                        </section>

                        <section>
                            <h4 class="text-white font-bold mb-2">⚠️ Step 2: Webhook Connectivity</h4>
                            <p>1. WhatsApp requires an <b>HTTPS</b> callback URL.</p>
                            <p>2. If you are behind a NAT, use a tool like <b>ngrok</b> or <b>Cloudflare Tunnel</b> to expose your LoLLMs Hub port (8080).</p>
                            <p>3. Point Meta's Webhook URL to: <code>https://your-public-url.com/api/bot/whatsapp/webhook</code></p>
                        </section>

                        <section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
                            <h4 class="text-white font-bold mb-2">📱 Step 3: Mobile Access</h4>
                            <p>Use the standard WhatsApp messenger to talk to your bot:</p>
                            <div class="flex gap-4 mt-2">
                                <a href="https://apps.apple.com/app/whatsapp-messenger/id310633997" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
                                <a href="https://play.google.com/store/apps/details?id=com.whatsapp" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
                            </div>
                        </section>
                    </div>
                `
            }
        };

        function updateBotView() {
            const platform = document.getElementById('platform-select').value;
            const extra = document.getElementById('extra-fields');
            const slack = document.getElementById('slack-fields');
            const whatsapp = document.getElementById('whatsapp-fields');
            
            const helpTitle = document.getElementById('help-title');
            const helpContent = document.getElementById('help-content');

            // Toggle form fields
            extra.classList.add('hidden');
            slack.classList.add('hidden');
            whatsapp.classList.add('hidden');

            if (platform === 'slack') { extra.classList.remove('hidden'); slack.classList.remove('hidden'); }
            if (platform === 'whatsapp') { extra.classList.remove('hidden'); whatsapp.classList.remove('hidden'); }

            // Toggle help
            const guide = PLATFORM_GUIDE[platform];
            helpTitle.innerText = guide.title;
            helpContent.innerHTML = guide.content;
        }

        document.addEventListener('DOMContentLoaded', updateBotView);
    </script>

    <!-- Bot List -->
    <div class="card-style">
        <table class="w-full text-left">
            <thead>
                <tr class="text-gray-500 text-xs uppercase border-b border-white/10">
                    <th class="p-3">Bot Name</th>
                    <th class="p-3">Platform</th>
                    <th class="p-3">Workflow Target</th>
                    <th class="p-3">Status</th>
                    <th class="p-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                {% for b in bots %}
                <tr>
                    <td class="p-3 font-bold">{{ b.name }}</td>
                    <td class="p-3 text-xs uppercase font-black text-indigo-400">{{ b.platform }}</td>
                    <td class="p-3 font-mono text-xs">{{ b.target_workflow }}</td>
                    <td class="p-3">
                        {% if b.is_active %}
                        <span class="text-green-400 font-bold animate-pulse">● RUNNING</span>
                        {% else %}
                        <span class="text-gray-500">○ STOPPED</span>
                        {% endif %}
                    </td>
                    <td class="p-3 text-right">
                        <form action="{{ url_for('admin_toggle_bot', bot_id=b.id) }}" method="post">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <button type="submit" class="text-xs font-bold uppercase {{ 'text-red-400' if b.is_active else 'text-green-400' }}">
                                {{ 'Stop' if b.is_active else 'Start' }}
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}