@extends('layouts.app-sidebar')

{{--
================================================================================
DAYBOT DASHBOARD - DESIGN SYSTEM
================================================================================

COLOR TOKENS:
- Background: bg-db-body (#05060a)
- Card: bg-db-card (#0f1015) with border-db-border
- Surface: bg-db-surface (#1a1b23)
- Primary: text-db-accent-primary (#10b981) / emerald
- Secondary: text-db-accent-secondary (#06b6d4) / cyan

CARD PATTERNS:
- Standard: bg-db-card border border-db-border rounded-2xl
- Interactive: + hover:border-db-border-hover hover:bg-db-card-hover transition-all
- Elevated: + shadow-xl shadow-black/20

SPACING:
- Section gap: space-y-8
- Card padding: p-5 or p-6
- Grid gap: gap-4 or gap-5

TYPOGRAPHY:
- Page title: text-2xl sm:text-3xl font-bold
- Section title: text-lg font-semibold
- Card title: text-sm font-medium
- Body: text-sm text-db-text-secondary
- Muted: text-xs text-db-text-muted

================================================================================
--}}

@section('content')

{{-- ============================================== --}}
{{-- FIRST TIME SETUP GUIDE MODAL --}}
{{-- ============================================== --}}
@if(!auth()->user()->setup_completed)
<div id="setupGuideModal" class="fixed inset-0 z-50 overflow-y-auto" x-data="{ open: true }" x-show="open" x-cloak>
    <div class="fixed inset-0 bg-black/80 backdrop-blur-sm" @click="open = false"></div>
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-db-card rounded-2xl max-w-xl w-full border border-db-border shadow-2xl"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95 translate-y-4"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0">

            {{-- Gradient Header --}}
            <div class="relative px-6 py-8 rounded-t-2xl overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-db-accent-primary/20 via-db-accent-secondary/10 to-transparent"></div>
                <div class="relative flex items-center gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-db-accent-primary to-db-accent-secondary flex items-center justify-center shadow-lg shadow-db-accent-primary/25">
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-db-text-primary">Welcome to DayBot!</h2>
                        <p class="text-sm text-db-text-secondary mt-1">Let's get your bot running in 3 simple steps</p>
                    </div>
                </div>
            </div>

            {{-- Steps --}}
            <div class="px-6 py-6 space-y-5">
                {{-- Step 1 --}}
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-db-accent-primary/20 flex items-center justify-center ring-4 ring-db-accent-primary/10">
                        <span class="text-sm font-bold text-db-accent-primary">1</span>
                    </div>
                    <div class="flex-1 pt-1">
                        <h3 class="font-semibold text-db-text-primary">Add DayBot as Moderator</h3>
                        <p class="text-sm text-db-text-muted mt-1 leading-relaxed">Go to YouTube Studio → Settings → Community → Moderators</p>
                        <a href="https://www.youtube.com/@Daybot_01" target="_blank"
                           class="inline-flex items-center gap-2 mt-3 px-4 py-2 bg-db-surface hover:bg-db-card-hover rounded-lg text-db-accent-primary text-sm font-mono transition-colors">
                            @Daybot_01
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                            </svg>
                        </a>
                    </div>
                </div>

                {{-- Step 2 --}}
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-db-accent-primary/20 flex items-center justify-center ring-4 ring-db-accent-primary/10">
                        <span class="text-sm font-bold text-db-accent-primary">2</span>
                    </div>
                    <div class="flex-1 pt-1">
                        <h3 class="font-semibold text-db-text-primary">Start Your Bot</h3>
                        <p class="text-sm text-db-text-muted mt-1 leading-relaxed">Click the green "Start DayBot" button. It will auto-connect when you go live.</p>
                    </div>
                </div>

                {{-- Step 3 --}}
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-db-accent-primary/20 flex items-center justify-center ring-4 ring-db-accent-primary/10">
                        <span class="text-sm font-bold text-db-accent-primary">3</span>
                    </div>
                    <div class="flex-1 pt-1">
                        <h3 class="font-semibold text-db-text-primary">Customize Everything</h3>
                        <p class="text-sm text-db-text-muted mt-1 leading-relaxed">Add commands, timers, moderation rules, and enable AI features.</p>
                    </div>
                </div>

                {{-- Warning --}}
                <div class="p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <p class="text-sm text-amber-300/90">Without moderator permissions, DayBot cannot send messages in your chat.</p>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="px-6 py-5 border-t border-db-border flex items-center justify-between bg-db-surface/30 rounded-b-2xl">
                <a href="https://studio.youtube.com" target="_blank" class="text-sm text-db-text-muted hover:text-db-accent-primary transition-colors">
                    Open YouTube Studio
                </a>
                <button type="button"
                        @click="open = false; markSetupComplete()"
                        class="px-6 py-2.5 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-semibold rounded-xl transition-all shadow-lg shadow-db-accent-primary/25">
                    Got it, let's go!
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function markSetupComplete() {
    fetch('/user/setup-complete', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    });
}
</script>
@endif

{{-- ============================================== --}}
{{-- EMPTY STATE - NO CHANNELS --}}
{{-- ============================================== --}}
@if($tenants->isEmpty())
<div class="flex items-center justify-center min-h-[70vh]">
    <div class="text-center max-w-md px-4">
        <div class="w-24 h-24 mx-auto mb-8 rounded-3xl bg-gradient-to-br from-db-accent-primary/20 to-db-accent-secondary/20 flex items-center justify-center ring-4 ring-db-accent-primary/10">
            <svg class="w-12 h-12 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
        </div>
        <h2 class="text-3xl font-bold text-db-text-primary mb-3">Welcome to DayBot</h2>
        <p class="text-db-text-secondary mb-8 leading-relaxed">Connect your YouTube channel to start managing your AI-powered chat bot and engage with your community.</p>
        <a href="{{ route('oauth.google.redirect') }}"
           class="inline-flex items-center gap-3 px-8 py-4 bg-white hover:bg-gray-50 text-gray-800 font-semibold rounded-2xl shadow-xl shadow-white/10 hover:shadow-2xl hover:shadow-white/20 transition-all hover:-translate-y-0.5">
            <svg class="w-6 h-6" viewBox="0 0 24 24">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            Connect with Google
        </a>
    </div>
</div>
@else

{{-- ============================================== --}}
{{-- MAIN DASHBOARD CONTENT --}}
{{-- ============================================== --}}
@foreach($dashboardData as $data)
@php
    $tenant = $data['tenant'];
    $stats = $data['stats'];
    $quota = $data['quota'];
    $roastingMode = $data['roasting_mode'];
    $hour = (int) date('H');
    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 18 ? 'Good Afternoon' : 'Good Evening');
    $quotaPercent = $quota['per_minute']['limit'] > 0 ? round(($quota['per_minute']['used'] / $quota['per_minute']['limit']) * 100) : 0;
@endphp

<div class="space-y-5 sm:space-y-8 mb-12 sm:mb-16 last:mb-0">

    {{-- ============================================== --}}
    {{-- HERO SECTION - Greeting & Add Channel --}}
    {{-- ============================================== --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-4">
        <div class="min-w-0">
            <h1 class="text-xl xs:text-2xl sm:text-3xl font-bold text-db-text-primary tracking-tight truncate mobile-text-wrap">
                {{ $greeting }}, {{ explode(' ', auth()->user()->name)[0] }}
            </h1>
            <p class="text-db-text-secondary mt-1 text-sm">Here's what's happening with your bot today</p>
        </div>
        <a href="{{ route('oauth.google.redirect') }}"
           class="inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-db-card hover:bg-db-card-hover active:bg-db-surface border border-db-border hover:border-db-border-hover rounded-xl text-sm font-medium text-db-text-secondary hover:text-db-text-primary transition-all group flex-shrink-0 mobile-tap-target">
            <svg class="w-4 h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            <span class="hidden xs:inline">Add Channel</span>
            <span class="xs:hidden">Add</span>
        </a>
    </div>

    {{-- ============================================== --}}
    {{-- STATS CARDS - Mobile: Horizontal Scroll, Desktop: Grid --}}
    {{-- ============================================== --}}
    {{-- Mobile: Horizontal scrolling stats --}}
    <div class="sm:hidden -mx-4 px-4">
        <div class="flex gap-3 overflow-x-auto pb-2 mobile-scroll-container">
            {{-- Messages Card - Mobile --}}
            <div class="flex-shrink-0 w-[140px] bg-db-card border border-db-border rounded-2xl p-4 mobile-animate-in" style="animation-delay: 0ms;">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 rounded-lg bg-db-accent-primary/15 flex items-center justify-center">
                        <svg class="w-4 h-4 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                    </div>
                    <span class="text-[10px] font-bold text-db-text-muted uppercase tracking-wide">Messages</span>
                </div>
                <div class="text-2xl font-bold text-db-text-primary">{{ number_format($stats['last_5min']) }}</div>
                <p class="text-[10px] text-db-text-muted mt-1">Last 5 min</p>
            </div>

            {{-- Commands Card - Mobile --}}
            <div class="flex-shrink-0 w-[140px] bg-db-card border border-db-border rounded-2xl p-4 mobile-animate-in" style="animation-delay: 50ms;">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 rounded-lg bg-cyan-500/15 flex items-center justify-center">
                        <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <span class="text-[10px] font-bold text-db-text-muted uppercase tracking-wide">Commands</span>
                </div>
                <div class="text-2xl font-bold text-db-text-primary">{{ number_format($stats['last_1min']) }}</div>
                <p class="text-[10px] text-db-text-muted mt-1">Last min</p>
            </div>

            {{-- Viewers Card - Mobile --}}
            <div class="flex-shrink-0 w-[140px] bg-db-card border border-db-border rounded-2xl p-4 mobile-animate-in" style="animation-delay: 100ms;">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 rounded-lg bg-purple-500/15 flex items-center justify-center">
                        <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </div>
                    <span class="text-[10px] font-bold text-db-text-muted uppercase tracking-wide">Viewers</span>
                </div>
                <div class="text-2xl font-bold text-db-text-primary">{{ number_format($stats['unique_viewers_1h']) }}</div>
                <p class="text-[10px] text-db-text-muted mt-1">Unique (1h)</p>
            </div>

            {{-- Quota Card - Mobile --}}
            <div class="flex-shrink-0 w-[140px] bg-db-card border border-db-border rounded-2xl p-4 mobile-animate-in" style="animation-delay: 150ms;">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 rounded-lg bg-amber-500/15 flex items-center justify-center">
                        <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <span class="text-[10px] font-bold text-db-text-muted uppercase tracking-wide">Quota</span>
                </div>
                <div class="text-2xl font-bold text-db-text-primary">{{ $quotaPercent }}%</div>
                <div class="mt-2 h-1.5 bg-db-surface rounded-full overflow-hidden">
                    <div class="h-full rounded-full {{ $quotaPercent > 80 ? 'bg-red-500' : ($quotaPercent > 50 ? 'bg-amber-500' : 'bg-db-accent-primary') }}"
                         style="width: {{ min($quotaPercent, 100) }}%"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Desktop: Grid layout --}}
    <div class="hidden sm:grid grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- Messages Card --}}
        <div class="group relative bg-db-card border border-db-border rounded-2xl p-5 hover:border-db-accent-primary/30 transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-db-accent-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-semibold text-db-text-muted uppercase tracking-wider">Messages</span>
                    <div class="w-10 h-10 rounded-xl bg-db-accent-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-db-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-db-text-primary tracking-tight">{{ number_format($stats['last_5min']) }}</div>
                <p class="text-xs text-db-text-muted mt-2">Last 5 minutes</p>
            </div>
        </div>

        {{-- Commands Card --}}
        <div class="group relative bg-db-card border border-db-border rounded-2xl p-5 hover:border-cyan-500/30 transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-semibold text-db-text-muted uppercase tracking-wider">Commands</span>
                    <div class="w-10 h-10 rounded-xl bg-cyan-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-db-text-primary tracking-tight">{{ number_format($stats['last_1min']) }}</div>
                <p class="text-xs text-db-text-muted mt-2">Last minute</p>
            </div>
        </div>

        {{-- Viewers Card --}}
        <div class="group relative bg-db-card border border-db-border rounded-2xl p-5 hover:border-purple-500/30 transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-semibold text-db-text-muted uppercase tracking-wider">Viewers</span>
                    <div class="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                        </svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-db-text-primary tracking-tight">{{ number_format($stats['unique_viewers_1h']) }}</div>
                <p class="text-xs text-db-text-muted mt-2">Unique (1 hour)</p>
            </div>
        </div>

        {{-- Quota Card --}}
        <div class="group relative bg-db-card border border-db-border rounded-2xl p-5 hover:border-amber-500/30 transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div class="relative">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-semibold text-db-text-muted uppercase tracking-wider">API Quota</span>
                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                </div>
                <div class="text-4xl font-bold text-db-text-primary tracking-tight">{{ $quotaPercent }}%</div>
                <div class="mt-3 h-2 bg-db-surface rounded-full overflow-hidden">
                    <div class="h-full rounded-full transition-all duration-500 {{ $quotaPercent > 80 ? 'bg-gradient-to-r from-red-500 to-red-400' : ($quotaPercent > 50 ? 'bg-gradient-to-r from-amber-500 to-amber-400' : 'bg-gradient-to-r from-db-accent-primary to-emerald-400') }}"
                         style="width: {{ min($quotaPercent, 100) }}%"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================== --}}
    {{-- BOT STATUS BANNER --}}
    {{-- ============================================== --}}
    @if($tenant->status !== 'running')
    <div class="relative overflow-hidden bg-gradient-to-r from-amber-500/10 via-orange-500/10 to-amber-500/10 border border-amber-500/20 rounded-2xl p-4 sm:p-6">
        {{-- Background Pattern --}}
        <div class="absolute inset-0 opacity-5">
            <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                    <path d="M 10 0 L 0 0 0 10" fill="none" stroke="currentColor" stroke-width="0.5"/>
                </pattern>
                <rect width="100%" height="100%" fill="url(#grid)" class="text-amber-500"/>
            </svg>
        </div>

        <div class="relative flex flex-col sm:flex-row sm:items-center gap-4">
            {{-- Icon --}}
            <div class="flex-shrink-0">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-amber-500/20 flex items-center justify-center">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
            </div>

            {{-- Content --}}
            <div class="flex-1 min-w-0">
                <h3 class="text-base sm:text-lg font-bold text-amber-400">DayBot is Currently Offline</h3>
                <p class="text-sm text-amber-300/80 mt-1 leading-relaxed">
                    Your DayBot is not running. By default, DayBot is enabled for all users. If you've turned it off, simply click "Start DayBot" below to activate it and connect to your live streams.
                </p>
                <div class="flex flex-wrap items-center gap-2 mt-3">
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-amber-500/15 rounded-lg text-xs font-medium text-amber-300">
                        <svg class="w-3.5 h-3.5" 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" />
                        </svg>
                        Auto-connects when you go live
                    </span>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-amber-500/15 rounded-lg text-xs font-medium text-amber-300">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        All features ready
                    </span>
                </div>
            </div>

            {{-- Action Button --}}
            <div class="flex-shrink-0">
                <form method="POST" action="{{ route('tenant.start', $tenant) }}">
                    @csrf
                    <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary text-white text-sm font-bold rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all hover:scale-105 active:scale-100">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                        Start DayBot
                    </button>
                </form>
            </div>
        </div>
    </div>
    @else
    {{-- Bot is Running - Show Success Banner --}}
    <div class="relative overflow-hidden bg-gradient-to-r from-emerald-500/10 via-green-500/10 to-emerald-500/10 border border-emerald-500/20 rounded-2xl p-4 sm:p-5">
        <div class="relative flex items-center gap-3 sm:gap-4">
            {{-- Icon with pulse --}}
            <div class="flex-shrink-0 relative">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-emerald-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                </div>
                <span class="absolute -top-1 -right-1 w-3 h-3 bg-emerald-400 rounded-full stat-live"></span>
            </div>

            {{-- Content --}}
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    <h3 class="text-sm sm:text-base font-bold text-emerald-400">DayBot is Active</h3>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-500/20 rounded-full text-[10px] sm:text-xs font-semibold text-emerald-300 uppercase tracking-wide">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 stat-live"></span>
                        Online
                    </span>
                </div>
                <p class="text-xs sm:text-sm text-emerald-300/70 mt-0.5">
                    @if($tenant->live_chat_id)
                        Connected to your live stream and monitoring chat
                    @else
                        Running and waiting for your stream to go live
                    @endif
                </p>
            </div>
        </div>
    </div>
    @endif

    {{-- ============================================== --}}
    {{-- CHANNEL STATUS CARD --}}
    {{-- ============================================== --}}
    <div class="bg-db-card border border-db-border rounded-2xl overflow-hidden shadow-xl shadow-black/10">
        {{-- Channel Header --}}
        <div class="px-4 py-4 sm:px-6 sm:py-5 border-b border-db-border">
            <div class="flex flex-col gap-4">
                {{-- Top row: Avatar, Info, and Badges --}}
                <div class="flex items-start gap-3 sm:gap-4">
                    {{-- Channel Avatar --}}
                    <div class="relative flex-shrink-0">
                        <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center shadow-lg">
                            <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                            </svg>
                        </div>
                        @if($tenant->status === 'running')
                        <div class="absolute -bottom-1 -right-1 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-db-card border-2 border-db-card flex items-center justify-center">
                            <span class="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-emerald-400 stat-live"></span>
                        </div>
                        @endif
                    </div>

                    {{-- Channel Info --}}
                    <div class="flex-1 min-w-0">
                        <h2 class="text-lg sm:text-xl font-bold text-db-text-primary truncate mobile-text-wrap">{{ $tenant->channel_title }}</h2>
                        {{-- Badges - Horizontal scroll on mobile --}}
                        <div class="flex items-center gap-2 mt-2 overflow-x-auto mobile-scroll-container pb-1 -mb-1">
                            {{-- Status Badge --}}
                            @if($tenant->status === 'running')
                            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-emerald-500/15 text-emerald-400 text-[11px] sm:text-xs font-semibold flex-shrink-0">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 stat-live"></span>
                                Running
                            </span>
                            @elseif($tenant->status === 'error')
                            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-red-500/15 text-red-400 text-[11px] sm:text-xs font-semibold flex-shrink-0">
                                <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>
                                Error
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-zinc-500/15 text-zinc-400 text-[11px] sm:text-xs font-semibold flex-shrink-0">
                                <span class="w-1.5 h-1.5 rounded-full bg-zinc-500"></span>
                                Stopped
                            </span>
                            @endif

                            {{-- LIVE Badge --}}
                            @if($tenant->live_chat_id)
                            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-red-500/15 text-red-400 text-[11px] sm:text-xs font-bold uppercase tracking-wide flex-shrink-0">
                                <span class="w-1.5 h-1.5 rounded-full bg-red-500 stat-live"></span>
                                Live
                            </span>
                            @endif

                            {{-- Game Badge --}}
                            @if($tenant->current_game)
                            <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg bg-db-surface text-db-text-secondary text-[11px] sm:text-xs font-medium flex-shrink-0">
                                <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
                                </svg>
                                {{ $tenant->current_game }}
                            </span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Start/Stop Button - Full width on mobile --}}
                @if($tenant->status === 'running')
                <form method="POST" action="{{ route('tenant.stop', $tenant) }}" class="w-full sm:w-auto">
                    @csrf
                    <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3 bg-red-500/10 hover:bg-red-500/20 active:bg-red-500/25 text-red-400 text-sm font-semibold rounded-xl border border-red-500/20 hover:border-red-500/30 transition-all mobile-tap-target">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <rect x="6" y="6" width="12" height="12" rx="2" stroke-width="2"/>
                        </svg>
                        Stop DayBot
                    </button>
                </form>
                @else
                <form method="POST" action="{{ route('tenant.start', $tenant) }}" class="w-full sm:w-auto">
                    @csrf
                    <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-3 bg-gradient-to-r from-db-accent-primary to-emerald-600 hover:from-emerald-600 hover:to-db-accent-primary active:from-emerald-700 active:to-emerald-700 text-white text-sm font-semibold rounded-xl shadow-lg shadow-db-accent-primary/25 transition-all mobile-tap-target">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                        Start DayBot
                    </button>
                </form>
                @endif
            </div>
        </div>

        {{-- Quick Controls Row --}}
        <div class="px-4 py-3 sm:px-6 sm:py-4 bg-db-surface/30">
            {{-- Mobile: Horizontal scroll, Desktop: Flex wrap --}}
            <div class="flex gap-2 sm:gap-3 overflow-x-auto sm:overflow-visible sm:flex-wrap mobile-scroll-container pb-1 -mb-1 sm:pb-0 sm:mb-0">
                {{-- Roasting Toggle --}}
                <div class="flex-shrink-0 inline-flex items-center gap-2 sm:gap-3 px-3 py-2 sm:px-4 sm:py-2.5 bg-db-card border border-db-border rounded-xl mobile-tap-target" id="roasting-container-{{ $tenant->id }}">
                    <div class="flex items-center gap-1.5 sm:gap-2">
                        <svg class="w-4 h-4 {{ $roastingMode ? 'text-orange-400' : 'text-db-text-muted' }}" id="roasting-icon-{{ $tenant->id }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                        </svg>
                        <span class="text-xs sm:text-sm font-medium text-db-text-secondary whitespace-nowrap">Roast</span>
                    </div>
                    <button type="button"
                            onclick="toggleRoasting{{ $tenant->id }}()"
                            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500/50"
                            id="roasting-btn-{{ $tenant->id }}"
                            role="switch"
                            aria-checked="{{ $roastingMode ? 'true' : 'false' }}"
                            style="background-color: {{ $roastingMode ? '#f97316' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $roastingMode ? 'translate-x-6' : 'translate-x-1' }}"
                              id="roasting-switch-{{ $tenant->id }}"></span>
                    </button>
                </div>

                {{-- AI Replies Toggle --}}
                <div class="flex-shrink-0 inline-flex items-center gap-2 sm:gap-3 px-3 py-2 sm:px-4 sm:py-2.5 bg-db-card border border-db-border rounded-xl mobile-tap-target" id="ai-replies-container-{{ $tenant->id }}">
                    <div class="flex items-center gap-1.5 sm:gap-2">
                        <svg class="w-4 h-4 {{ $tenant->ai_replies_enabled ?? true ? 'text-violet-400' : 'text-db-text-muted' }}" id="ai-replies-icon-{{ $tenant->id }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                        </svg>
                        <span class="text-xs sm:text-sm font-medium text-db-text-secondary whitespace-nowrap">AI</span>
                    </div>
                    <button type="button"
                            onclick="toggleAiReplies{{ $tenant->id }}()"
                            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500/50"
                            id="ai-replies-btn-{{ $tenant->id }}"
                            role="switch"
                            aria-checked="{{ $tenant->ai_replies_enabled ?? true ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->ai_replies_enabled ?? true ? '#8b5cf6' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->ai_replies_enabled ?? true ? 'translate-x-6' : 'translate-x-1' }}"
                              id="ai-replies-switch-{{ $tenant->id }}"></span>
                    </button>
                </div>

                {{-- Bot Personality --}}
                <div class="flex-shrink-0 inline-flex items-center gap-2 sm:gap-3 px-3 py-2 sm:px-4 sm:py-2.5 bg-db-card border border-db-border rounded-xl mobile-tap-target" id="personality-container-{{ $tenant->id }}">
                    <div class="flex items-center gap-1.5 sm:gap-2">
                        <svg class="w-4 h-4 {{ $tenant->bot_personality === 'female' ? 'text-pink-400' : 'text-blue-400' }}" id="personality-icon-{{ $tenant->id }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span class="text-xs sm:text-sm font-medium text-db-text-secondary whitespace-nowrap hidden xs:inline">Voice</span>
                    </div>
                    <div class="flex items-center gap-0.5 p-0.5 bg-db-surface rounded-lg">
                        <button type="button"
                                onclick="setPersonality{{ $tenant->id }}('male')"
                                id="personality-male-{{ $tenant->id }}"
                                class="px-2.5 py-1.5 text-[11px] sm:text-xs font-semibold rounded-md transition-all {{ $tenant->bot_personality === 'male' ? 'bg-blue-500 text-white shadow-sm' : 'text-db-text-muted hover:text-db-text-primary' }}">
                            Male
                        </button>
                        <button type="button"
                                onclick="setPersonality{{ $tenant->id }}('female')"
                                id="personality-female-{{ $tenant->id }}"
                                class="px-2.5 py-1.5 text-[11px] sm:text-xs font-semibold rounded-md transition-all {{ $tenant->bot_personality === 'female' ? 'bg-pink-500 text-white shadow-sm' : 'text-db-text-muted hover:text-db-text-primary' }}">
                            Female
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Inline Scripts for Toggle Functions --}}
        <script>
            let roastingMode{{ $tenant->id }} = {{ $roastingMode ? 'true' : 'false' }};
            function toggleRoasting{{ $tenant->id }}() {
                fetch('/tenants/{{ $tenant->id }}/settings/toggle/roasting_mode', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json', 'Content-Type': 'application/json' }
                }).then(r => r.json()).then(d => {
                    roastingMode{{ $tenant->id }} = !roastingMode{{ $tenant->id }};
                    const btn = document.getElementById('roasting-btn-{{ $tenant->id }}');
                    const sw = document.getElementById('roasting-switch-{{ $tenant->id }}');
                    const icon = document.getElementById('roasting-icon-{{ $tenant->id }}');
                    if (roastingMode{{ $tenant->id }}) {
                        btn.style.backgroundColor = '#f97316';
                        btn.setAttribute('aria-checked', 'true');
                        sw.classList.remove('translate-x-1');
                        sw.classList.add('translate-x-6');
                        icon.classList.remove('text-db-text-muted');
                        icon.classList.add('text-orange-400');
                    } else {
                        btn.style.backgroundColor = '#3f3f46';
                        btn.setAttribute('aria-checked', 'false');
                        sw.classList.add('translate-x-1');
                        sw.classList.remove('translate-x-6');
                        icon.classList.add('text-db-text-muted');
                        icon.classList.remove('text-orange-400');
                    }
                }).catch(e => console.error('Failed to toggle roasting mode'));
            }

            let aiRepliesMode{{ $tenant->id }} = {{ $tenant->ai_replies_enabled ?? true ? 'true' : 'false' }};
            function toggleAiReplies{{ $tenant->id }}() {
                fetch('/tenants/{{ $tenant->id }}/settings/toggle/ai_replies_enabled', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json', 'Content-Type': 'application/json' }
                }).then(r => r.json()).then(d => {
                    aiRepliesMode{{ $tenant->id }} = !aiRepliesMode{{ $tenant->id }};
                    const btn = document.getElementById('ai-replies-btn-{{ $tenant->id }}');
                    const sw = document.getElementById('ai-replies-switch-{{ $tenant->id }}');
                    const icon = document.getElementById('ai-replies-icon-{{ $tenant->id }}');
                    if (aiRepliesMode{{ $tenant->id }}) {
                        btn.style.backgroundColor = '#8b5cf6';
                        btn.setAttribute('aria-checked', 'true');
                        sw.classList.remove('translate-x-1');
                        sw.classList.add('translate-x-6');
                        icon.classList.remove('text-db-text-muted');
                        icon.classList.add('text-violet-400');
                    } else {
                        btn.style.backgroundColor = '#3f3f46';
                        btn.setAttribute('aria-checked', 'false');
                        sw.classList.add('translate-x-1');
                        sw.classList.remove('translate-x-6');
                        icon.classList.add('text-db-text-muted');
                        icon.classList.remove('text-violet-400');
                    }
                }).catch(e => console.error('Failed to toggle AI replies'));
            }

            function setPersonality{{ $tenant->id }}(personality) {
                fetch('/tenants/{{ $tenant->id }}/settings/personality', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json', 'Content-Type': 'application/json' },
                    body: JSON.stringify({ personality: personality })
                }).then(r => r.json()).then(d => {
                    if (d.success) {
                        const maleBtn = document.getElementById('personality-male-{{ $tenant->id }}');
                        const femaleBtn = document.getElementById('personality-female-{{ $tenant->id }}');
                        const icon = document.getElementById('personality-icon-{{ $tenant->id }}');
                        if (personality === 'male') {
                            maleBtn.className = 'px-3 py-1.5 text-xs font-semibold rounded-md transition-all bg-blue-500 text-white shadow-sm';
                            femaleBtn.className = 'px-3 py-1.5 text-xs font-semibold rounded-md transition-all text-db-text-muted hover:text-db-text-primary';
                            icon.classList.remove('text-pink-400');
                            icon.classList.add('text-blue-400');
                        } else {
                            femaleBtn.className = 'px-3 py-1.5 text-xs font-semibold rounded-md transition-all bg-pink-500 text-white shadow-sm';
                            maleBtn.className = 'px-3 py-1.5 text-xs font-semibold rounded-md transition-all text-db-text-muted hover:text-db-text-primary';
                            icon.classList.remove('text-blue-400');
                            icon.classList.add('text-pink-400');
                        }
                    }
                }).catch(e => console.error('Failed to set personality'));
            }
        </script>
    </div>

    {{-- ============================================== --}}
    {{-- ALERT SECTION (Waiting/Error) --}}
    {{-- ============================================== --}}
    @php
        $isWaiting = ($tenant->last_error && str_contains($tenant->last_error, 'Waiting')) ||
                     ($tenant->status === 'running' && !$tenant->live_chat_id);
        $showAlert = $tenant->last_error || ($tenant->status === 'running' && !$tenant->live_chat_id);
    @endphp
    @if($showAlert)
    <div class="rounded-xl sm:rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4 {{ $isWaiting ? 'bg-blue-500/10 border border-blue-500/20' : 'bg-red-500/10 border border-red-500/20' }}">
        <div class="flex items-start gap-3 sm:gap-4">
            <div class="w-10 h-10 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 {{ $isWaiting ? 'bg-blue-500/20' : 'bg-red-500/20' }}">
                @if($isWaiting)
                <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                @else
                <svg class="w-5 h-5 sm:w-6 sm:h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                @endif
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm sm:text-base font-semibold {{ $isWaiting ? 'text-blue-400' : 'text-red-400' }}">
                    {{ $isWaiting ? 'Waiting for Stream' : 'Bot Error' }}
                </p>
                <p class="text-xs sm:text-sm {{ $isWaiting ? 'text-blue-300/80' : 'text-red-300/80' }} mt-1 leading-relaxed mobile-text-wrap">
                    {{ $tenant->last_error ?? 'DayBot is running and waiting for you to go live' }}
                </p>
                @if($isWaiting)
                <p class="text-[10px] sm:text-xs text-blue-400/60 mt-1.5 sm:mt-2">Auto-connects when you go live</p>
                @endif
            </div>
        </div>
        @if(!$isWaiting && $tenant->last_error && (str_contains($tenant->last_error, 'OAuth') || str_contains($tenant->last_error, 'forbidden')))
        <a href="{{ route('oauth.google.redirect') }}" class="flex-shrink-0 w-full sm:w-auto text-center px-4 py-2.5 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700 text-sm font-semibold rounded-xl transition-colors shadow-sm mobile-tap-target">
            Reconnect
        </a>
        @endif
    </div>
    @endif

    {{-- ============================================== --}}
    {{-- AI FEATURES SECTION --}}
    {{-- ============================================== --}}
    <div>
        <div class="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-5">
            <h3 class="text-base sm:text-lg font-semibold text-db-text-primary">AI Features</h3>
            <span class="px-1.5 py-0.5 bg-amber-500/15 text-amber-400 text-[9px] sm:text-[10px] font-bold uppercase tracking-wide rounded">Beta</span>
        </div>

        {{-- Mobile: Compact 2-column grid, Desktop: 3-column grid --}}
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
            {{-- Memory System --}}
            <div class="group bg-db-card border border-db-border rounded-xl sm:rounded-2xl p-3 sm:p-5 hover:border-purple-500/30 active:bg-db-card-hover transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center sm:items-start gap-3 sm:gap-4">
                        <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl bg-purple-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-xs sm:text-sm font-semibold text-db-text-primary truncate">Memory</p>
                            <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5 sm:mt-1 leading-snug hidden sm:block">Remember user context</p>
                        </div>
                    </div>
                    <button type="button"
                            onclick="toggleFeature({{ $tenant->id }}, 'memory_enabled', this)"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none self-center sm:self-start mobile-tap-target"
                            role="switch"
                            aria-checked="{{ $tenant->memory_enabled ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->memory_enabled ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->memory_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>

            {{-- XP & Leveling --}}
            <div class="group bg-db-card border border-db-border rounded-xl sm:rounded-2xl p-3 sm:p-5 hover:border-yellow-500/30 active:bg-db-card-hover transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center sm:items-start gap-3 sm:gap-4">
                        <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl bg-yellow-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-xs sm:text-sm font-semibold text-db-text-primary truncate">XP System</p>
                            <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5 sm:mt-1 leading-snug hidden sm:block">Track engagement</p>
                        </div>
                    </div>
                    <button type="button"
                            onclick="toggleFeature({{ $tenant->id }}, 'xp_enabled', this)"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none self-center sm:self-start mobile-tap-target"
                            role="switch"
                            aria-checked="{{ $tenant->xp_enabled ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->xp_enabled ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->xp_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>

            {{-- Auto Greetings --}}
            <div class="group bg-db-card border border-db-border rounded-xl sm:rounded-2xl p-3 sm:p-5 hover:border-green-500/30 active:bg-db-card-hover transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center sm:items-start gap-3 sm:gap-4">
                        <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl bg-green-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-xs sm:text-sm font-semibold text-db-text-primary truncate">Greetings</p>
                            <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5 sm:mt-1 leading-snug hidden sm:block">Welcome viewers</p>
                        </div>
                    </div>
                    <button type="button"
                            onclick="toggleFeature({{ $tenant->id }}, 'greetings_enabled', this)"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none self-center sm:self-start mobile-tap-target"
                            role="switch"
                            aria-checked="{{ $tenant->greetings_enabled ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->greetings_enabled ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->greetings_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>

            {{-- Auto Reactions --}}
            <div class="group bg-db-card border border-db-border rounded-xl sm:rounded-2xl p-3 sm:p-5 hover:border-orange-500/30 active:bg-db-card-hover transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center sm:items-start gap-3 sm:gap-4">
                        <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl bg-orange-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-xs sm:text-sm font-semibold text-db-text-primary truncate">Reactions</p>
                            <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5 sm:mt-1 leading-snug hidden sm:block">gg, pog, hype</p>
                        </div>
                    </div>
                    <button type="button"
                            onclick="toggleFeature({{ $tenant->id }}, 'reactions_enabled', this)"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none self-center sm:self-start mobile-tap-target"
                            role="switch"
                            aria-checked="{{ $tenant->reactions_enabled ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->reactions_enabled ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->reactions_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>

            {{-- Announcements --}}
            <div class="group bg-db-card border border-db-border rounded-xl sm:rounded-2xl p-3 sm:p-5 hover:border-blue-500/30 active:bg-db-card-hover transition-all duration-300">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                    <div class="flex items-center sm:items-start gap-3 sm:gap-4">
                        <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-lg sm:rounded-xl bg-blue-500/15 flex items-center justify-center flex-shrink-0">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <p class="text-xs sm:text-sm font-semibold text-db-text-primary truncate">Announce</p>
                            <p class="text-[10px] sm:text-xs text-db-text-muted mt-0.5 sm:mt-1 leading-snug hidden sm:block">Auto messages</p>
                        </div>
                    </div>
                    <button type="button"
                            onclick="toggleFeature({{ $tenant->id }}, 'smart_announcements_enabled', this)"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus:outline-none self-center sm:self-start mobile-tap-target"
                            role="switch"
                            aria-checked="{{ $tenant->smart_announcements_enabled ? 'true' : 'false' }}"
                            style="background-color: {{ $tenant->smart_announcements_enabled ? '#10b981' : '#3f3f46' }}">
                        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200 {{ $tenant->smart_announcements_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                    </button>
                </div>
            </div>

        </div>
    </div>

</div>
@endforeach
@endif

{{-- ============================================== --}}
{{-- GLOBAL FEATURE TOGGLE SCRIPT --}}
{{-- ============================================== --}}
<script>
function toggleFeature(tenantId, feature, button) {
    const currentState = button.getAttribute('aria-checked') === 'true';
    const newState = !currentState;
    const span = button.querySelector('span');

    // Optimistic UI update
    button.setAttribute('aria-checked', newState);
    button.style.backgroundColor = newState ? '#10b981' : '#3f3f46';
    span.classList.toggle('translate-x-6', newState);
    span.classList.toggle('translate-x-1', !newState);

    fetch(`/dashboard/tenant/${tenantId}/toggle-feature`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ feature: feature, enabled: newState })
    })
    .then(r => r.json())
    .then(d => {
        if (!d.success) {
            // Revert on failure
            button.setAttribute('aria-checked', currentState);
            button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
            span.classList.toggle('translate-x-6', currentState);
            span.classList.toggle('translate-x-1', !currentState);
        }
    })
    .catch(() => {
        // Revert on error
        button.setAttribute('aria-checked', currentState);
        button.style.backgroundColor = currentState ? '#10b981' : '#3f3f46';
        span.classList.toggle('translate-x-6', currentState);
        span.classList.toggle('translate-x-1', !currentState);
    });
}
</script>
@endsection