@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6" x-data="monitoringDashboard()" x-init="init()">

    <!-- =============================================== -->
    <!-- HEADER -->
    <!-- =============================================== -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">System Monitoring</h1>
            <p class="text-db-text-secondary mt-1">Real-time system health and metrics</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-db-text-muted">Last updated: <span x-text="lastUpdated"></span></span>
            <button @click="refresh()" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-db-surface hover:bg-db-card-hover text-db-text-secondary hover:text-db-text-primary border border-db-border transition-colors text-sm">
                <svg class="w-4 h-4" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Refresh
            </button>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- WORKER STATUS BANNER -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center {{ $worker['running'] ? 'bg-emerald-500/15' : 'bg-red-500/15' }}">
                    @if($worker['running'])
                    <svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    @else
                    <svg class="w-6 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="M6 18L18 6M6 6l12 12" />
                    </svg>
                    @endif
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="text-lg font-semibold text-db-text-primary">DayBot Worker</h3>
                        @if($worker['running'])
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/15 text-emerald-400 border border-emerald-500/25">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            Running
                        </span>
                        @else
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-red-500/15 text-red-400 border border-red-500/25">
                            <span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>
                            Stopped
                        </span>
                        @endif
                    </div>
                    <p class="text-sm text-db-text-muted mt-0.5">
                        @if($worker['running'])
                        Uptime: {{ gmdate('H:i:s', $worker['uptime'] ?? 0) }} | Memory: {{ $worker['memory_mb'] ?? 0 }} MB
                        @else
                        Worker is not responding
                        @endif
                    </p>
                </div>
            </div>
            <a href="{{ route('admin.health') }}" class="text-sm text-db-accent-primary hover:text-db-accent-secondary transition-colors">
                View Health Details &rarr;
            </a>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- GLOBAL METRICS CARDS -->
    <!-- =============================================== -->
    <div>
        <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-4">Global Metrics (24h)</h3>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Messages 24h -->
            <div class="bg-db-card border border-db-border rounded-xl p-4 hover:border-db-accent-primary/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-db-text-muted uppercase tracking-wide">Messages 24h</span>
                    <div class="w-8 h-8 rounded-lg bg-db-accent-primary/10 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>
                </div>
                <div class="text-3xl font-bold text-db-text-primary">{{ number_format($global->messages_last_24h ?? 0) }}</div>
                <p class="text-xs text-db-text-muted mt-1">{{ number_format($global->messages_last_10m ?? 0) }} in last 10m</p>
            </div>

            <!-- Active Tenants -->
            <div class="bg-db-card border border-db-border rounded-xl p-4 hover:border-emerald-500/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-db-text-muted uppercase tracking-wide">Active Bots</span>
                    <div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                        <svg class="w-4 h-4 text-emerald-400" 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>
                    </div>
                </div>
                <div class="text-3xl font-bold text-db-text-primary">{{ $global->active_tenants ?? 0 }}</div>
                <p class="text-xs text-db-text-muted mt-1">Currently running</p>
            </div>

            <!-- AI Calls -->
            <div class="bg-db-card border border-db-border rounded-xl p-4 hover:border-cyan-500/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-db-text-muted uppercase tracking-wide">AI Calls 24h</span>
                    <div class="w-8 h-8 rounded-lg bg-cyan-500/10 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                </div>
                <div class="text-3xl font-bold text-db-text-primary">{{ number_format($global->ai_calls_last_24h ?? 0) }}</div>
                <p class="text-xs text-db-text-muted mt-1">Avg latency: {{ $global->avg_ai_latency_ms ?? 0 }}ms</p>
            </div>

            <!-- AI Errors -->
            <div class="bg-db-card border border-db-border rounded-xl p-4 hover:border-red-500/30 transition-colors">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs font-medium text-db-text-muted uppercase tracking-wide">AI Errors 24h</span>
                    <div class="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center">
                        <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
                <div class="text-3xl font-bold text-db-text-primary {{ ($global->ai_errors_last_24h ?? 0) > 0 ? 'text-red-400' : '' }}">{{ $global->ai_errors_last_24h ?? 0 }}</div>
                <p class="text-xs text-db-text-muted mt-1">YT errors: {{ $global->yt_errors_last_24h ?? 0 }}</p>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- CHARTS SECTION -->
    <!-- =============================================== -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Message Activity Chart -->
        <div class="bg-db-card border border-db-border rounded-xl p-6">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-4">Message Activity (6h)</h3>
            <div class="h-48">
                <canvas id="messageChart"></canvas>
            </div>
        </div>

        <!-- Error Trend Chart -->
        <div class="bg-db-card border border-db-border rounded-xl p-6">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-4">Error Trend (24h)</h3>
            <div class="h-48">
                <canvas id="errorChart"></canvas>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- PER-TENANT STATS TABLE -->
    <!-- =============================================== -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Per-Tenant Statistics</h3>
            <span class="text-xs text-db-text-muted bg-db-surface px-2 py-1 rounded-lg">{{ $tenants->count() }} tenants</span>
        </div>

        <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-db-border bg-db-surface/50">
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Channel</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Status</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden sm:table-cell">Msgs (60m)</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden md:table-cell">AI Calls</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden lg:table-cell">Errors</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden xl:table-cell">Last Message</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">AI</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-db-border">
                        @forelse($tenants as $tenant)
                        <tr class="hover:bg-db-surface/30 transition-colors">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    @if($tenant->channel_avatar_url)
                                    <img src="{{ $tenant->channel_avatar_url }}" class="w-8 h-8 rounded-lg object-cover" alt="Avatar">
                                    @else
                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-db-accent-primary to-db-accent-secondary flex items-center justify-center">
                                        <span class="text-white text-xs font-bold">{{ strtoupper(substr($tenant->channel_title, 0, 1)) }}</span>
                                    </div>
                                    @endif
                                    <div class="min-w-0">
                                        <p class="text-sm font-semibold text-db-text-primary truncate">{{ $tenant->channel_title }}</p>
                                        <p class="text-xs text-db-text-muted font-mono truncate">{{ $tenant->user->name ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                @if($tenant->status === 'running' && $tenant->live_chat_id)
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/15 text-emerald-400 border border-emerald-500/25">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                                    Live
                                </span>
                                @elseif($tenant->status === 'running')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-db-accent-primary/15 text-db-accent-primary border border-db-accent-primary/25">
                                    <span class="w-1.5 h-1.5 rounded-full bg-db-accent-primary"></span>
                                    Active
                                </span>
                                @elseif($tenant->status === 'error')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-red-500/15 text-red-400 border border-red-500/25">
                                    <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.5 py-1 rounded-full text-xs font-semibold bg-db-surface text-db-text-muted border border-db-border">
                                    <span class="w-1.5 h-1.5 rounded-full bg-zinc-500"></span>
                                    Stopped
                                </span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden sm:table-cell">
                                <span class="text-sm font-medium text-db-text-primary">{{ $tenant->messages_60m ?? 0 }}</span>
                            </td>
                            <td class="px-5 py-4 hidden md:table-cell">
                                <span class="text-sm text-db-text-secondary">{{ $tenant->ai_calls_24h ?? 0 }}</span>
                            </td>
                            <td class="px-5 py-4 hidden lg:table-cell">
                                @if(($tenant->errors_24h ?? 0) > 0)
                                <span class="text-sm text-red-400 font-medium">{{ $tenant->errors_24h }}</span>
                                @else
                                <span class="text-sm text-db-text-muted">0</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden xl:table-cell">
                                @if($tenant->last_message_at)
                                <span class="text-sm text-db-text-muted" title="{{ $tenant->last_message_at }}">{{ $tenant->last_message_at->diffForHumans() }}</span>
                                @else
                                <span class="text-sm text-db-text-muted">-</span>
                                @endif
                            </td>
                            <td class="px-5 py-4">
                                @if($tenant->ai_enabled ?? false)
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500/15 text-emerald-400">
                                    <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="M5 13l4 4L19 7" />
                                    </svg>
                                </span>
                                @else
                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-db-surface text-db-text-muted">
                                    <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="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-5 py-16 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mb-4">
                                        <svg class="w-8 h-8 text-db-text-muted" 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>
                                    <p class="text-db-text-muted">No tenants found</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- RECENT ALERTS -->
    <!-- =============================================== -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Recent Alerts</h3>
            <span class="text-xs text-db-text-muted bg-db-surface px-2 py-1 rounded-lg">Last 20</span>
        </div>

        <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
            @if($alerts->isEmpty())
            <div class="px-5 py-16 text-center">
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-4">
                        <svg class="w-8 h-8 text-emerald-400" 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>
                    </div>
                    <p class="text-db-text-muted">No recent alerts</p>
                </div>
            </div>
            @else
            <div class="divide-y divide-db-border max-h-96 overflow-y-auto">
                @foreach($alerts as $alert)
                <div class="px-5 py-4 hover:bg-db-surface/30 transition-colors">
                    <div class="flex items-start gap-4">
                        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0
                            {{ $alert->level === 'critical' ? 'bg-red-500/15' : ($alert->level === 'error' ? 'bg-red-500/15' : ($alert->level === 'warning' ? 'bg-amber-500/15' : 'bg-blue-500/15')) }}">
                            @if($alert->level === 'critical' || $alert->level === 'error')
                            <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            @elseif($alert->level === 'warning')
                            <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="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>
                            @else
                            <svg class="w-4 h-4 text-blue-400" 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>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold uppercase
                                    {{ $alert->level === 'critical' ? 'bg-red-500/15 text-red-400' : ($alert->level === 'error' ? 'bg-red-500/15 text-red-400' : ($alert->level === 'warning' ? 'bg-amber-500/15 text-amber-400' : 'bg-blue-500/15 text-blue-400')) }}">
                                    {{ $alert->level }}
                                </span>
                                <span class="text-xs text-db-text-muted">{{ $alert->created_at->diffForHumans() }}</span>
                                @if($alert->tenant)
                                <span class="text-xs text-db-text-muted">| {{ $alert->tenant->channel_title }}</span>
                                @endif
                            </div>
                            <p class="text-sm font-medium text-db-text-primary">{{ $alert->title }}</p>
                            <p class="text-xs text-db-text-muted mt-0.5 truncate">{{ $alert->message }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function monitoringDashboard() {
    return {
        loading: false,
        lastUpdated: '{{ $lastUpdated instanceof \Carbon\Carbon ? $lastUpdated->format("H:i:s") : now()->format("H:i:s") }}',
        messageChart: null,
        errorChart: null,

        init() {
            this.initCharts();
            // Auto-refresh every 30 seconds
            setInterval(() => this.refresh(), 30000);
        },

        async refresh() {
            this.loading = true;
            try {
                const response = await fetch('{{ route("admin.monitoring.json") }}');
                const data = await response.json();
                this.lastUpdated = new Date().toLocaleTimeString();
                // Note: Full page refresh would be needed for complete data update
                // For now, just update the timestamp
            } catch (error) {
                console.error('Failed to refresh monitoring data:', error);
            }
            this.loading = false;
        },

        initCharts() {
            const chartColors = {
                primary: 'rgb(99, 102, 241)',
                primaryBg: 'rgba(99, 102, 241, 0.1)',
                red: 'rgb(239, 68, 68)',
                redBg: 'rgba(239, 68, 68, 0.1)',
                grid: 'rgba(255, 255, 255, 0.05)',
                text: 'rgba(255, 255, 255, 0.5)'
            };

            // Message Activity Chart
            const messageCtx = document.getElementById('messageChart');
            if (messageCtx) {
                this.messageChart = new Chart(messageCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: {!! json_encode(array_column($messageChart, 'time')) !!},
                        datasets: [{
                            label: 'Messages',
                            data: {!! json_encode(array_column($messageChart, 'count')) !!},
                            borderColor: chartColors.primary,
                            backgroundColor: chartColors.primaryBg,
                            fill: true,
                            tension: 0.4,
                            pointRadius: 0,
                            pointHoverRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: {
                                grid: { color: chartColors.grid },
                                ticks: { color: chartColors.text, maxRotation: 0 }
                            },
                            y: {
                                beginAtZero: true,
                                grid: { color: chartColors.grid },
                                ticks: { color: chartColors.text }
                            }
                        }
                    }
                });
            }

            // Error Trend Chart
            const errorCtx = document.getElementById('errorChart');
            if (errorCtx) {
                this.errorChart = new Chart(errorCtx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode(array_column($errorChart, 'time')) !!},
                        datasets: [{
                            label: 'Errors',
                            data: {!! json_encode(array_column($errorChart, 'count')) !!},
                            backgroundColor: chartColors.redBg,
                            borderColor: chartColors.red,
                            borderWidth: 1,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                ticks: { color: chartColors.text, maxRotation: 0 }
                            },
                            y: {
                                beginAtZero: true,
                                grid: { color: chartColors.grid },
                                ticks: { color: chartColors.text, stepSize: 1 }
                            }
                        }
                    }
                });
            }
        }
    };
}
</script>
@endpush
@endsection