<!--
  Mudabbir Dashboard - Channels Modal (Two-Column Sidebar)

  Redesigned: 2026-02-10
  - Two-column sidebar layout (mirrors Settings pattern)
  - Shared status badge + start/stop buttons (deduplicated)
  - "Setup Guide" links per channel
  - Mobile responsive: list/content toggle with back button
  - 9 channels: Discord / Slack / WhatsApp / Telegram / Signal / Matrix / Teams / Google Chat / Webhooks
-->
<!-- Channels Modal -->
<div
  class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4"
  x-show="showChannels"
  x-transition.opacity
  @click.self="showChannels = false"
>
<div class="w-full max-w-[720px] flex flex-col bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] overflow-hidden" style="height: min(600px, 85vh);" @click.stop>

    <!-- Header -->
    <div class="flex items-center justify-between px-5 py-3.5 border-b border-[var(--glass-border)] shrink-0">
        <div class="flex items-center gap-2.5">
            <!-- Mobile: back button -->
            <button
                x-show="channelsMobileView === 'content'"
                class="md:hidden p-1.5 -ml-1 rounded-lg text-white/60 hover:text-white hover:bg-white/10 transition-colors"
                @click="channelsMobileView = 'list'"
            >
                <i data-lucide="arrow-left" class="w-4.5 h-4.5"></i>
            </button>
            <i data-lucide="radio-tower" class="w-4.5 h-4.5 opacity-70"></i>
            <h2 class="text-[16px] font-semibold">Channels</h2>
        </div>
        <button class="p-1.5 -mr-1.5 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showChannels = false">
            <i data-lucide="x" class="w-4.5 h-4.5"></i>
        </button>
    </div>

    <!-- Body: sidebar + content -->
    <div class="flex flex-1 min-h-0 overflow-hidden">

        <!-- Sidebar nav -->
        <nav
            class="channels-nav shrink-0 py-2 px-1.5 overflow-y-auto"
            :class="channelsMobileView === 'list' ? 'is-visible' : 'is-hidden'"
        >
            <template x-for="tab in ['discord', 'slack', 'whatsapp', 'telegram', 'signal', 'matrix', 'teams', 'google_chat', 'webhooks']" :key="tab">
                <button
                    class="channels-nav-item flex items-center gap-2.5 w-full px-2.5 py-[7px] rounded-lg text-[13px] font-medium transition-all text-left mb-px"
                    :class="channelsTab === tab
                        ? 'bg-white/10 text-white'
                        : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
                    @click="channelsTab = tab; channelsMobileView = 'content'; $nextTick(() => { if (window.refreshIcons) window.refreshIcons(); })"
                >
                    <i :data-lucide="channelIcon(tab)" class="w-4 h-4 shrink-0 opacity-70"></i>
                    <span class="flex-1" x-text="channelDisplayName(tab)"></span>
                    <!-- Status dot -->
                    <span
                        class="w-2 h-2 rounded-full shrink-0"
                        :class="channelStatus[tab]?.running ? 'bg-[var(--success-color)]' : (channelStatus[tab]?.configured ? 'bg-[var(--warning-color)]' : 'bg-white/20')"
                        x-show="tab !== 'webhooks'"
                    ></span>
                </button>
            </template>
        </nav>

        <!-- Content area -->
        <div
            class="channels-content flex-1 overflow-y-auto px-5 py-4"
            :class="channelsMobileView === 'content' ? 'is-visible' : 'is-hidden'"
        >
            <!-- Shared Status Badge (not for webhooks) -->
            <template x-if="channelsTab !== 'webhooks'">
                <div class="flex flex-col gap-5">
                    <div class="flex items-center justify-between">
                        <span class="text-[13px] text-white/60">Status</span>
                        <span class="text-[11px] font-bold px-2.5 py-1 rounded-full border"
                            :class="channelStatus[channelsTab]?.running
                                ? 'bg-[var(--success-color)]/20 text-white border-[var(--success-color)]/30'
                                : (channelStatus[channelsTab]?.configured
                                    ? 'bg-[var(--warning-color)]/20 text-white border-[var(--warning-color)]/30'
                                    : 'bg-white/5 text-white/50 border-white/10')"
                            x-text="channelStatus[channelsTab]?.running
                                ? (channelsTab === 'whatsapp' && whatsappConnected ? 'CONNECTED' : 'RUNNING')
                                : (channelStatus[channelsTab]?.configured ? 'CONFIGURED' : 'NOT CONFIGURED')">
                        </span>
                    </div>

                    <!-- Setup Guide Link (when not configured) -->
                    <div x-show="!channelStatus[channelsTab]?.configured && channelGuideUrl(channelsTab)" class="flex items-center gap-2 py-2 px-3 bg-white/5 rounded-[10px] border border-white/10">
                        <i data-lucide="book-open" class="w-4 h-4 text-white/60 shrink-0"></i>
                        <div class="flex-1 min-w-0">
                            <span class="text-[12px] text-white/60">Setup Guide: </span>
                            <a :href="channelGuideUrl(channelsTab)" target="_blank" rel="noopener"
                                class="text-[12px] font-medium text-[var(--accent-color)] hover:underline"
                                x-text="channelGuideLabel(channelsTab)"></a>
                        </div>
                        <i data-lucide="external-link" class="w-3 h-3 text-white/40 shrink-0"></i>
                    </div>
                </div>
            </template>

            <!-- ==================== Discord ==================== -->
            <div x-show="channelsTab === 'discord'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Bot Token</label>
                        <span x-show="channelStatus.discord?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <div class="flex gap-2">
                        <input type="password" x-model="channelForms.discord.bot_token"
                            :placeholder="channelStatus.discord?.configured ? '••••••••••••••••' : 'Paste Discord bot token...'"
                            class="flex-1 bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        <button class="bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white px-4 py-2 rounded-[8px] text-[13px] font-semibold transition-all active:scale-95 disabled:opacity-50"
                            @click="saveChannelConfig('discord')" :disabled="channelLoading || !channelForms.discord.bot_token">Save</button>
                    </div>
                </div>
            </div>

            <!-- ==================== Slack ==================== -->
            <div x-show="channelsTab === 'slack'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Bot Token (xoxb-...)</label>
                        <span x-show="channelStatus.slack?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <input type="password" x-model="channelForms.slack.bot_token"
                        :placeholder="channelStatus.slack?.configured ? '••••••••••••••••' : 'xoxb-...'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">App Token (xapp-...)</label>
                    <input type="password" x-model="channelForms.slack.app_token"
                        :placeholder="channelStatus.slack?.configured ? '••••••••••••••••' : 'xapp-...'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                    @click="saveChannelConfig('slack')" :disabled="channelLoading || (!channelForms.slack.bot_token && !channelForms.slack.app_token)">Save Slack Config</button>
            </div>

            <!-- ==================== WhatsApp ==================== -->
            <div x-show="channelsTab === 'whatsapp'" class="flex flex-col gap-5 mt-4">
                <!-- Mode Selector -->
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">Mode</label>
                    <div class="flex gap-2">
                        <button class="flex-1 py-2 px-3 rounded-[10px] text-[13px] font-medium transition-all border"
                            :class="channelStatus.whatsapp?.mode === 'personal' ? 'bg-[var(--accent-color)] text-white border-[var(--accent-color)]' : 'bg-black/20 text-white/50 border-[var(--glass-border)] hover:text-white/70 hover:bg-white/5'"
                            @click="saveWhatsAppMode('personal')">Personal (QR Scan)</button>
                        <button class="flex-1 py-2 px-3 rounded-[10px] text-[13px] font-medium transition-all border"
                            :class="channelStatus.whatsapp?.mode === 'business' ? 'bg-[var(--accent-color)] text-white border-[var(--accent-color)]' : 'bg-black/20 text-white/50 border-[var(--glass-border)] hover:text-white/70 hover:bg-white/5'"
                            @click="saveWhatsAppMode('business')">Business (Cloud API)</button>
                    </div>
                </div>

                <!-- Personal Mode -->
                <template x-if="channelStatus.whatsapp?.mode === 'personal'">
                    <div class="flex flex-col gap-4">
                        <p class="text-[12px] text-white/50">Scan the QR code with WhatsApp on your phone. No Meta account, webhooks, or tunnels needed.</p>
                        <!-- Not running yet — prompt to start -->
                        <div x-show="!channelStatus.whatsapp?.running && !whatsappConnected" class="flex flex-col items-center gap-3 py-4">
                            <div class="flex items-center justify-center w-12 h-12 rounded-full bg-white/5 border border-white/10">
                                <i data-lucide="qr-code" class="w-6 h-6 text-white/40"></i>
                            </div>
                            <span class="text-[13px] text-white/50 text-center">Start WhatsApp to generate a QR code for pairing</span>
                            <button
                                class="mt-1 bg-[var(--success-color)] hover:brightness-110 text-white py-2.5 px-6 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 flex items-center gap-2 disabled:opacity-50"
                                @click="toggleChannel('whatsapp')"
                                :disabled="channelLoading"
                            >
                                <i x-show="channelLoading" data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                                <i x-show="!channelLoading" data-lucide="play" class="w-4 h-4"></i>
                                <span>Start &amp; Pair</span>
                            </button>
                        </div>
                        <!-- Running, waiting for QR -->
                        <div x-show="channelStatus.whatsapp?.running && !whatsappQr && !whatsappConnected" class="flex items-center justify-center gap-2 py-4 text-white/50">
                            <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                            <span class="text-[13px]">Waiting for QR code...</span>
                        </div>
                        <!-- QR code visible -->
                        <div x-show="whatsappQr && !whatsappConnected" class="flex flex-col items-center gap-3 py-3">
                            <div class="bg-white p-3 rounded-xl">
                                <img :src="generateQrDataUrl(whatsappQr)" alt="WhatsApp QR" class="w-[200px] h-[200px]" />
                            </div>
                            <span class="text-[12px] text-white/50">Scan with WhatsApp &rarr; Linked Devices &rarr; Link a Device</span>
                        </div>
                        <!-- Connected -->
                        <div x-show="whatsappConnected" class="flex items-center justify-center gap-2 py-4 bg-[var(--success-color)]/10 rounded-[12px] border border-[var(--success-color)]/20">
                            <i data-lucide="check-circle" class="w-5 h-5 text-[var(--success-color)]"></i>
                            <span class="text-[14px] font-medium text-[var(--success-color)]">WhatsApp Connected</span>
                        </div>
                    </div>
                </template>

                <!-- Business Mode -->
                <template x-if="channelStatus.whatsapp?.mode === 'business'">
                    <div class="flex flex-col gap-4">
                        <div class="flex flex-col gap-2">
                            <div class="flex justify-between items-center">
                                <label class="text-[13px] font-medium text-[var(--text-secondary)]">Access Token</label>
                                <span x-show="channelStatus.whatsapp?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                                    <i data-lucide="check" class="w-3 h-3"></i> Saved
                                </span>
                            </div>
                            <input type="password" x-model="channelForms.whatsapp.access_token"
                                :placeholder="channelStatus.whatsapp?.configured ? '••••••••••••••••' : 'WhatsApp access token...'"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-[13px] font-medium text-[var(--text-secondary)]">Phone Number ID</label>
                            <input type="text" x-model="channelForms.whatsapp.phone_number_id"
                                :placeholder="channelStatus.whatsapp?.configured ? '••••••••' : '123456789012345'"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-[13px] font-medium text-[var(--text-secondary)]">Verify Token (optional)</label>
                            <input type="text" x-model="channelForms.whatsapp.verify_token" placeholder="Webhook verification token..."
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        </div>
                        <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                            @click="saveChannelConfig('whatsapp')" :disabled="channelLoading || (!channelForms.whatsapp.access_token && !channelForms.whatsapp.phone_number_id)">Save WhatsApp Config</button>
                    </div>
                </template>
            </div>

            <!-- ==================== Telegram ==================== -->
            <div x-show="channelsTab === 'telegram'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Bot Token</label>
                        <span x-show="channelStatus.telegram?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <div class="flex gap-2">
                        <input type="password" x-model="channelForms.telegram.bot_token"
                            :placeholder="channelStatus.telegram?.configured ? '••••••••••••••••' : 'Paste Telegram bot token...'"
                            class="flex-1 bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        <button class="bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white px-4 py-2 rounded-[8px] text-[13px] font-semibold transition-all active:scale-95 disabled:opacity-50"
                            @click="saveChannelConfig('telegram')" :disabled="channelLoading || (!channelForms.telegram.bot_token && !channelStatus.telegram?.configured)">Save</button>
                    </div>
                    <p class="text-[12px] text-white/50">
                        Get a token from <a href="https://t.me/BotFather" target="_blank" class="text-[var(--accent-color)] hover:underline">@BotFather</a>.
                        For the full pairing flow, use the <button class="text-[var(--accent-color)] hover:underline bg-transparent border-none cursor-pointer p-0 text-[12px]" @click="showChannels = false; openRemote(); remoteTab = 'telegram'">Remote &rarr; Telegram</button> tab.
                    </p>
                </div>

                <div class="flex items-center justify-between px-3 py-2.5 bg-black/20 border border-[var(--glass-border)] rounded-[10px]">
                    <div class="flex flex-col gap-0.5">
                        <span class="text-[13px] text-white/80 font-medium">Auto-start on dashboard startup</span>
                        <span class="text-[11px] text-white/40">Turn off if another Telegram poller uses the same token.</span>
                    </div>
                    <button
                        type="button"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                        :class="channelForms.telegram.autostart ? 'bg-[var(--success-color)]/70' : 'bg-white/20'"
                        @click="channelForms.telegram.autostart = !channelForms.telegram.autostart"
                        :aria-pressed="channelForms.telegram.autostart"
                        title="Toggle Telegram auto-start"
                    >
                        <span
                            class="inline-block h-5 w-5 transform rounded-full bg-white transition-transform"
                            :class="channelForms.telegram.autostart ? 'translate-x-5' : 'translate-x-1'"
                        ></span>
                    </button>
                </div>
            </div>

            <!-- ==================== Signal ==================== -->
            <div x-show="channelsTab === 'signal'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">Signal CLI REST API URL</label>
                    <input type="text" x-model="channelForms.signal.api_url" placeholder="http://localhost:8080"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Phone Number</label>
                        <span x-show="channelStatus.signal?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <input type="text" x-model="channelForms.signal.phone_number"
                        :placeholder="channelStatus.signal?.configured ? '••••••••' : '+1234567890'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                    @click="saveChannelConfig('signal')" :disabled="channelLoading || !channelForms.signal.phone_number">Save Signal Config</button>
            </div>

            <!-- ==================== Matrix ==================== -->
            <div x-show="channelsTab === 'matrix'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">Homeserver URL</label>
                    <input type="text" x-model="channelForms.matrix.homeserver" placeholder="https://matrix.org"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">User ID</label>
                    <input type="text" x-model="channelForms.matrix.user_id" placeholder="@bot:matrix.org"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Access Token</label>
                        <span x-show="channelStatus.matrix?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <input type="password" x-model="channelForms.matrix.access_token"
                        :placeholder="channelStatus.matrix?.configured ? '••••••••••••••••' : 'Matrix access token...'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                    @click="saveChannelConfig('matrix')" :disabled="channelLoading || (!channelForms.matrix.homeserver && !channelForms.matrix.access_token)">Save Matrix Config</button>
            </div>

            <!-- ==================== Teams ==================== -->
            <div x-show="channelsTab === 'teams'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">App ID (MS Bot Framework)</label>
                    <input type="text" x-model="channelForms.teams.app_id"
                        :placeholder="channelStatus.teams?.configured ? '••••••••' : 'Microsoft App ID...'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">App Password</label>
                        <span x-show="channelStatus.teams?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <input type="password" x-model="channelForms.teams.app_password"
                        :placeholder="channelStatus.teams?.configured ? '••••••••••••••••' : 'Microsoft App Password...'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                    @click="saveChannelConfig('teams')" :disabled="channelLoading || (!channelForms.teams.app_id && !channelForms.teams.app_password)">Save Teams Config</button>
            </div>

            <!-- ==================== Google Chat ==================== -->
            <div x-show="channelsTab === 'google_chat'" class="flex flex-col gap-5 mt-4">
                <div class="flex flex-col gap-2">
                    <label class="text-[13px] font-medium text-[var(--text-secondary)]">Mode</label>
                    <div class="flex gap-2">
                        <button class="flex-1 py-2 px-3 rounded-[10px] text-[13px] font-medium transition-all border"
                            :class="channelForms.google_chat._mode === 'webhook' ? 'bg-[var(--accent-color)] text-white border-[var(--accent-color)]' : 'bg-black/20 text-white/50 border-[var(--glass-border)] hover:text-white/70 hover:bg-white/5'"
                            @click="channelForms.google_chat._mode = 'webhook'">Webhook</button>
                        <button class="flex-1 py-2 px-3 rounded-[10px] text-[13px] font-medium transition-all border"
                            :class="channelForms.google_chat._mode === 'pubsub' ? 'bg-[var(--accent-color)] text-white border-[var(--accent-color)]' : 'bg-black/20 text-white/50 border-[var(--glass-border)] hover:text-white/70 hover:bg-white/5'"
                            @click="channelForms.google_chat._mode = 'pubsub'">Pub/Sub</button>
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Service Account Key Path</label>
                        <span x-show="channelStatus.google_chat?.configured" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                            <i data-lucide="check" class="w-3 h-3"></i> Saved
                        </span>
                    </div>
                    <input type="text" x-model="channelForms.google_chat.service_account_key"
                        :placeholder="channelStatus.google_chat?.configured ? '••••••••' : '/path/to/service-account.json'"
                        class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                </div>
                <template x-if="channelForms.google_chat._mode === 'pubsub'">
                    <div class="flex flex-col gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="text-[13px] font-medium text-[var(--text-secondary)]">GCP Project ID</label>
                            <input type="text" x-model="channelForms.google_chat.project_id" placeholder="my-project-id"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        </div>
                        <div class="flex flex-col gap-2">
                            <label class="text-[13px] font-medium text-[var(--text-secondary)]">Pub/Sub Subscription ID</label>
                            <input type="text" x-model="channelForms.google_chat.subscription_id" placeholder="my-subscription"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                        </div>
                    </div>
                </template>
                <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                    @click="saveChannelConfig('google_chat')" :disabled="channelLoading || !channelForms.google_chat.service_account_key">Save Google Chat Config</button>
            </div>

            <!-- Shared Start/Stop (not for webhooks; hidden for WhatsApp personal mode which has inline button) -->
            <template x-if="channelsTab !== 'webhooks' && !(channelsTab === 'whatsapp' && channelStatus.whatsapp?.mode === 'personal' && !channelStatus.whatsapp?.running)">
                <div class="flex gap-2 pt-4 mt-4 border-t border-[var(--glass-border)]">
                    <button
                        x-show="!channelStatus[channelsTab]?.running"
                        class="w-full bg-[var(--success-color)] hover:brightness-110 text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 flex items-center justify-center gap-2 disabled:opacity-50"
                        @click="toggleChannel(channelsTab)"
                        :disabled="channelLoading || !channelStatus[channelsTab]?.configured"
                    >
                        <i x-show="channelLoading" data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                        <i x-show="!channelLoading" data-lucide="play" class="w-4 h-4"></i>
                        <span x-text="'Start ' + channelDisplayName(channelsTab)"></span>
                    </button>
                    <button
                        x-show="channelStatus[channelsTab]?.running"
                        class="w-full bg-[var(--danger-color)] hover:brightness-110 text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 flex items-center justify-center gap-2 disabled:opacity-50"
                        @click="toggleChannel(channelsTab)"
                        :disabled="channelLoading"
                    >
                        <i x-show="channelLoading" data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                        <i x-show="!channelLoading" data-lucide="square" class="w-4 h-4"></i>
                        <span x-text="'Stop ' + channelDisplayName(channelsTab)"></span>
                    </button>
                </div>
            </template>

            <!-- ==================== Webhooks ==================== -->
            <div x-show="channelsTab === 'webhooks'" class="flex flex-col gap-5">
                <div class="flex items-center justify-between">
                    <span class="text-[13px] text-white/60" x-text="webhookSlots.length + ' webhook' + (webhookSlots.length !== 1 ? 's' : '') + ' configured'"></span>
                    <button class="text-[12px] font-medium text-[var(--accent-color)] hover:underline flex items-center gap-1"
                        @click="showAddWebhook = !showAddWebhook">
                        <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                        <span x-text="showAddWebhook ? 'Cancel' : 'Add Webhook'"></span>
                    </button>
                </div>

                <!-- Inline Add Form -->
                <div x-show="showAddWebhook" x-transition.opacity class="flex flex-col gap-3 p-4 bg-black/20 rounded-[12px] border border-[var(--glass-border)]">
                    <div class="flex flex-col gap-2">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Name</label>
                        <input type="text" x-model="newWebhookName" placeholder="github-events"
                            class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                    </div>
                    <div class="flex flex-col gap-2">
                        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Description (optional)</label>
                        <input type="text" x-model="newWebhookDescription" placeholder="GitHub push/PR events"
                            class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40" />
                    </div>
                    <button class="w-full bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-2.5 rounded-[10px] text-[13px] font-medium transition-all active:scale-95 disabled:opacity-50"
                        @click="addWebhook()" :disabled="channelLoading || !newWebhookName.trim()">Create Webhook</button>
                </div>

                <!-- Webhook Slots List -->
                <template x-if="webhookSlots.length === 0 && !showAddWebhook">
                    <div class="text-center py-8 text-white/50 text-[13px]">No webhooks configured yet. Click "Add Webhook" to create one.</div>
                </template>

                <template x-for="slot in webhookSlots" :key="slot.name">
                    <div class="flex flex-col gap-3 p-4 bg-black/20 rounded-[12px] border border-[var(--glass-border)]">
                        <div class="flex items-start justify-between">
                            <div>
                                <div class="text-[14px] font-medium text-white" x-text="slot.name"></div>
                                <div x-show="slot.description" class="text-[12px] text-white/50 mt-0.5" x-text="slot.description"></div>
                            </div>
                            <button class="p-1.5 text-white/50 hover:text-[var(--danger-color)] hover:bg-[var(--danger-color)]/10 rounded-lg transition-colors"
                                @click="removeWebhook(slot.name)" title="Remove webhook">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-medium text-white/50 uppercase tracking-wider">URL</label>
                            <div class="flex gap-2 items-center">
                                <code class="flex-1 text-[12px] text-[var(--accent-color)] bg-black/30 px-3 py-2 rounded-[8px] truncate" x-text="slot.url"></code>
                                <button class="shrink-0 p-2 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
                                    @click="copyToClipboard(slot.url)" title="Copy URL">
                                    <i data-lucide="copy" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-medium text-white/50 uppercase tracking-wider">Secret</label>
                            <div class="flex gap-2 items-center">
                                <code class="flex-1 text-[12px] text-white/50 bg-black/30 px-3 py-2 rounded-[8px] truncate" x-text="slot.secret.substring(0, 8) + '••••••••••••'"></code>
                                <button class="shrink-0 p-2 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
                                    @click="copyToClipboard(slot.secret)" title="Copy secret">
                                    <i data-lucide="copy" class="w-4 h-4"></i>
                                </button>
                                <button class="shrink-0 p-2 text-white/40 hover:text-[var(--warning-color)] hover:bg-[var(--warning-color)]/10 rounded-lg transition-colors"
                                    @click="regenerateWebhookSecret(slot.name)" title="Regenerate secret">
                                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </template>

                <div x-show="webhookSlots.length > 0" class="text-[11px] text-white/50 leading-relaxed">
                    <strong>Usage:</strong> <code class="text-[11px]">curl -X POST &lt;url&gt; -H "X-Webhook-Secret: &lt;secret&gt;" -H "Content-Type: application/json" -d '{"content": "hello"}'</code>
                    <br/>Add <code class="text-[11px]">?wait=true</code> to wait for the agent's response.
                </div>
            </div>

        </div>
    </div>

    <!-- Refresh icons when modal opens -->
    <div x-effect="showChannels && $nextTick(() => { if (window.refreshIcons) window.refreshIcons(); })"></div>

    <!-- Install Dependency Confirmation Overlay -->
    <div
        x-show="installPrompt"
        x-transition.opacity
        class="absolute inset-0 z-10 flex items-center justify-center bg-black/60 backdrop-blur-sm rounded-[20px]"
        @click.self="cancelInstall()"
    >
        <div class="w-full max-w-[340px] mx-4 bg-[#2a2a2e] border border-[var(--glass-border)] rounded-[16px] shadow-2xl p-5 flex flex-col gap-4" @click.stop>
            <!-- Icon + message -->
            <div class="flex flex-col items-center gap-3 text-center">
                <div class="flex items-center justify-center w-11 h-11 rounded-full bg-[var(--accent-color)]/15 border border-[var(--accent-color)]/25">
                    <i data-lucide="download" class="w-5 h-5 text-[var(--accent-color)]"></i>
                </div>
                <p class="text-[14px] text-white leading-snug">
                    <span x-text="channelDisplayName(installPrompt?.channel || '')" class="font-semibold"></span>
                    requires
                    <code class="text-[13px] bg-white/10 px-1.5 py-0.5 rounded" x-text="installPrompt?.package || ''"></code>.
                    Install it?
                </p>
                <p class="text-[11px] text-white/40" x-text="installPrompt?.pipSpec || ''"></p>
            </div>
            <!-- Loading state -->
            <div x-show="installLoading" class="flex items-center justify-center gap-2 py-2 text-white/60">
                <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                <span class="text-[13px]" x-text="'Installing ' + (installPrompt?.package || '') + '...'"></span>
            </div>
            <!-- Buttons -->
            <div x-show="!installLoading" class="flex gap-2">
                <button
                    class="flex-1 py-2.5 rounded-[10px] text-[13px] font-medium border border-[var(--glass-border)] text-white/70 hover:text-white hover:bg-white/10 transition-all active:scale-95"
                    @click="cancelInstall()"
                >Cancel</button>
                <button
                    class="flex-1 py-2.5 rounded-[10px] text-[13px] font-semibold bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white transition-all active:scale-95 flex items-center justify-center gap-1.5"
                    @click="confirmInstall()"
                >
                    <i data-lucide="download" class="w-4 h-4"></i>
                    Install
                </button>
            </div>
        </div>
    </div>
</div>
</div>
