@extends('admin.layout')

@section('title', 'WhatsApp Log')

@section('content')
<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbc4d2;
        border-radius: 10px;
    }

    .amber-glow {
        filter: drop-shadow(0 0 8px rgba(232, 168, 56, 0.4));
    }
</style>

<div class="space-y-6 flex-grow">
    <!-- Header -->
    <div class="flex items-center gap-4 flex-wrap">
        <h2 class="font-headline-md text-2xl text-primary font-bold">Monitor WhatsApp Bot</h2>
        <div class="flex items-center gap-2 px-4 py-1.5 bg-[#F0FDF4] border border-[#BBF7D0] rounded-full ml-0 md:ml-4 shadow-sm">
            <span class="w-2 h-2 rounded-full bg-[#22C55E] animate-pulse"></span>
            <span class="text-sm font-bold text-[#15803D]">Fonnte: ✅ Online</span>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <div class="bg-surface rounded-xl p-4 border border-outline-variant shadow-sm hover:shadow-md transition-shadow">
            <p class="text-xs font-bold text-on-surface-variant mb-2">Total</p>
            <div class="flex items-end justify-between">
                <span class="font-headline-lg text-3xl font-bold text-primary">{{ $logs->total() }}</span>
                <span class="material-symbols-outlined text-primary/30 text-3xl">outbox</span>
            </div>
        </div>
        <div class="bg-surface rounded-xl p-4 border border-outline-variant shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-[#22C55E]">
            <p class="text-xs font-bold text-on-surface-variant mb-2">Delivered</p>
            <div class="flex items-end justify-between">
                <span class="font-headline-lg text-3xl font-bold text-[#16A34A]">{{ $successCount }}</span>
                <span class="material-symbols-outlined text-[#16A34A]/30 text-3xl">done_all</span>
            </div>
        </div>
        <div class="bg-surface rounded-xl p-4 border border-outline-variant shadow-sm hover:shadow-md transition-shadow border-l-4 border-l-error">
            <p class="text-xs font-bold text-on-surface-variant mb-2">Failed</p>
            <div class="flex items-end justify-between">
                <span class="font-headline-lg text-3xl font-bold text-error">{{ $failedCount }}</span>
                <span class="material-symbols-outlined text-error/30 text-3xl">error_outline</span>
            </div>
        </div>
        <div class="bg-surface rounded-xl p-4 border border-outline-variant shadow-sm hover:shadow-md transition-shadow">
            <p class="text-xs font-bold text-on-surface-variant mb-2">Pending</p>
            <div class="flex items-end justify-between">
                <span class="font-headline-lg text-3xl font-bold text-on-surface-variant">0</span>
                <span class="material-symbols-outlined text-on-surface-variant/30 text-3xl">schedule</span>
            </div>
        </div>
        <div class="bg-surface rounded-xl p-4 border border-outline-variant shadow-sm hover:shadow-md transition-shadow bg-tertiary-container/10">
            <p class="text-xs font-bold text-on-surface-variant mb-2">Delivery Rate</p>
            <div class="flex items-end justify-between">
                @php
                $totalProcessed = $successCount + $failedCount;
                $rate = $totalProcessed > 0 ? round(($successCount / $totalProcessed) * 100, 1) : 0;
                @endphp
                <span class="font-headline-lg text-3xl font-bold text-tertiary">{{ $rate }}%</span>
                <div class="w-12 h-12 relative flex items-center justify-center">
                    <svg class="w-full h-full -rotate-90">
                        <circle cx="24" cy="24" fill="transparent" r="20" stroke="#e6e0e9" stroke-width="4"></circle>
                        <circle cx="24" cy="24" fill="transparent" r="20" stroke="#E8A838" stroke-dasharray="125.6" stroke-dashoffset="{{ 125.6 - ($rate / 100 * 125.6) }}" stroke-width="4"></circle>
                    </svg>
                    <span class="absolute text-[10px] font-bold text-tertiary">{{ round($rate) }}%</span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Log Table Area -->
        <div class="flex-grow space-y-4 w-full lg:w-2/3">
            <!-- Filters -->
            <form method="GET" action="{{ route('admin.whatsapp-log') }}" class="bg-surface rounded-xl p-4 border border-outline-variant flex flex-wrap items-center gap-4 shadow-sm">
                <div class="flex-grow min-w-[200px] relative">
                    <span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-lg">search</span>
                    <input name="search" value="{{ request('search') }}" class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-lg text-sm focus:ring-2 focus:ring-primary-container outline-none placeholder:text-outline-variant transition-all focus:bg-surface-container-lowest focus:shadow-sm" placeholder="Cari Nomor WA atau Pesan..." type="text" />
                </div>
                <!-- 
                <select class="bg-surface-container-low border-none rounded-lg text-sm py-2 px-8 focus:ring-2 focus:ring-primary-container outline-none cursor-pointer font-medium text-on-surface">
                    <option>Semua</option>
                    <option>Consumer</option>
                    <option>Mitra</option>
                </select>
                <select class="bg-surface-container-low border-none rounded-lg text-sm py-2 px-8 focus:ring-2 focus:ring-primary-container outline-none cursor-pointer font-medium text-on-surface">
                    <option>Semua</option>
                    <option>SENT</option>
                    <option>DELIVERED</option>
                    <option>FAILED</option>
                </select>
                -->
                <button type="submit" class="bg-primary text-on-primary px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 hover:shadow-lg active:scale-95 transition-all">
                    <span class="material-symbols-outlined text-sm">filter_alt</span>
                    Terapkan
                </button>
            </form>

            <!-- Notification Table -->
            <div class="bg-surface rounded-xl border border-outline-variant overflow-hidden shadow-sm">
                <div class="overflow-x-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse min-w-[700px]">
                        <thead>
                            <tr class="bg-surface-container-low border-b border-outline-variant">
                                <th class="px-4 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Waktu</th>
                                <th class="px-4 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Penerima</th>
                                <th class="px-4 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Tipe Notif</th>
                                <th class="px-4 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Status</th>
                                <th class="px-4 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Retry</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-outline-variant/30">
                            @forelse($logs as $log)
                            @php
                            $isFailed = $log->status !== 'success';

                            $rowClass = 'hover:bg-surface-container transition-colors';
                            if ($isFailed) {
                            $rowClass = 'bg-error-container/20 hover:bg-error-container/40 transition-colors border-l-2 border-l-error';
                            }

                            $statusBg = 'bg-primary-container';
                            $statusText = 'text-primary';
                            $statusIcon = 'done_all';
                            $statusColor = 'text-[#0D9488]';
                            $statusLabel = 'DELIVERED';

                            if ($isFailed) {
                            $statusBg = 'bg-error/10';
                            $statusText = 'text-error';
                            $statusIcon = 'error';
                            $statusColor = 'text-error';
                            $statusLabel = 'FAILED';
                            }
                            @endphp
                            <tr class="{{ $rowClass }}">
                                <td class="px-4 py-3">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold {{ $isFailed ? 'text-error' : 'text-on-surface' }}">{{ $log->created_at->format('H:i:s') }}</span>
                                        <span class="text-[10px] {{ $isFailed ? 'text-error/70' : 'text-on-surface-variant' }} mt-0.5 font-bold">{{ $log->created_at->format('d M Y') }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-on-surface">{{ $log->recipient_name ?? 'Unknown Guest' }}</span>
                                        <span class="text-[11px] font-mono text-on-surface-variant mt-0.5">{{ $log->recipient_number }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 {{ $statusBg }} {{ $statusText }} rounded-md text-[11px] font-bold">SYSTEM_MSG</span>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex flex-col">
                                        <div class="flex items-center gap-1.5 {{ $statusColor }}">
                                            <span class="material-symbols-outlined text-sm">{{ $statusIcon }}</span>
                                            <span class="text-xs font-bold">{{ $statusLabel }}</span>
                                        </div>
                                        @if($isFailed)
                                        @php
                                        $errorReason = 'API Error';
                                        if(is_array($log->response) && isset($log->response['reason'])){
                                        $errorReason = $log->response['reason'];
                                        }
                                        @endphp
                                        <span class="text-[10px] text-error/80 mt-0.5 font-bold">{{ Str::limit($errorReason, 30) }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    @if($isFailed)
                                    <button class="flex items-center gap-1.5 text-primary bg-primary-container/50 hover:bg-primary-container px-3 py-1.5 rounded-full text-xs font-bold transition-all active:scale-95 shadow-sm">
                                        <span class="material-symbols-outlined text-sm">refresh</span>
                                        Retry
                                    </button>
                                    @else
                                    <span class="text-on-surface-variant">--</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="p-8 text-center text-on-surface-variant">
                                    Belum ada log WhatsApp.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-4 border-t border-outline-variant bg-surface-container-low">
                    {{ $logs->links() }}
                </div>
            </div>
        </div>

        <!-- Sidebar Analysis -->
        <div class="w-full lg:w-1/3 space-y-6">
            <!-- Failed Summary Panel -->
            <div class="bg-surface rounded-2xl border border-error/30 overflow-hidden shadow-md flex flex-col h-fit sticky top-[100px]">
                <div class="bg-error-container/30 p-6 border-b border-error/20">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2 text-error">
                            <span class="material-symbols-outlined">report_problem</span>
                            <h3 class="text-xl font-bold">{{ $failedCount }} Notifikasi Gagal</h3>
                        </div>
                        <span class="bg-error text-on-error px-2 py-0.5 rounded text-[10px] font-bold">PRIORITY</span>
                    </div>
                    @if($failedCount > 0)
                    <p class="text-xs text-error font-bold leading-relaxed">Terdapat {{ $failedCount }} kegagalan pada pengiriman notifikasi. Segera lakukan pengecekan pada konektivitas Fonnte atau kredensial akun.</p>
                    @else
                    <p class="text-xs text-primary font-bold leading-relaxed">Sistem beroperasi dengan normal.</p>
                    @endif
                </div>
                <div class="p-6 space-y-6">
                    <div class="space-y-4">
                        <h4 class="text-sm font-bold text-on-surface-variant uppercase tracking-wider">Penyebab Kegagalan</h4>
                        <div class="space-y-3">
                            <div class="p-4 rounded-xl bg-surface-container border border-outline-variant/30 flex items-center justify-between">
                                <div class="flex flex-col">
                                    <span class="text-sm font-bold text-on-surface">API Error / Invalid</span>
                                    <span class="text-[11px] font-bold text-on-surface-variant mt-0.5">Total response gagal</span>
                                </div>
                                <span class="text-xl font-bold text-error">{{ $failedCount }}</span>
                            </div>
                        </div>
                    </div>
                    <button class="w-full {{ $failedCount > 0 ? 'bg-error text-on-error hover:opacity-90 shadow-error/30' : 'bg-surface-container-low text-on-surface-variant cursor-not-allowed' }} py-4 rounded-xl text-sm font-bold flex items-center justify-center gap-3 active:scale-[0.98] transition-all shadow-lg group" id="retry-all-btn" {{ $failedCount == 0 ? 'disabled' : '' }}>
                        <span class="material-symbols-outlined group-hover:rotate-180 transition-transform duration-500">sync</span>
                        Retry All Failed ({{ $failedCount }})
                    </button>
                    <div class="pt-4 border-t border-outline-variant/30 text-center">
                        <p class="text-xs font-bold text-on-surface-variant">Last checked: <span class="font-bold text-on-surface" id="clock">--:--:--</span></p>
                    </div>
                </div>
            </div>

            <!-- Atmospheric Animation Element (Small) -->
            <div class="bg-surface rounded-2xl p-4 border border-outline-variant/30 relative overflow-hidden h-48 shadow-sm">
                <div class="absolute inset-0 opacity-10 bg-primary/5"></div>
                <div class="relative z-10 flex flex-col h-full justify-center items-center text-center">
                    <span class="material-symbols-outlined text-primary text-4xl mb-3 animate-bounce">rocket_launch</span>
                    <p class="text-sm font-bold text-on-surface">Sistem Stabil</p>
                    <p class="text-[11px] font-bold text-on-surface-variant px-4 mt-1">Server cluster JKT-01 beroperasi dengan latensi 42ms</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Micro-interactions
    const retryBtn = document.getElementById('retry-all-btn');
    if (retryBtn) {
        retryBtn.addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> Memproses...';
            btn.classList.add('opacity-70', 'pointer-events-none');

            setTimeout(() => {
                btn.innerHTML = '<span class="material-symbols-outlined">check_circle</span> Berhasil Dikirim Ulang';
                btn.classList.remove('bg-error', 'shadow-error/30');
                btn.classList.add('bg-[#16A34A]', 'shadow-[#16A34A]/30');

                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.classList.add('bg-error', 'shadow-error/30');
                    btn.classList.remove('bg-[#16A34A]', 'shadow-[#16A34A]/30', 'opacity-70', 'pointer-events-none');
                }, 2000);
            }, 1500);
        });
    }

    // Live Clock
    function updateClock() {
        const clockEl = document.getElementById('clock');
        if (clockEl) {
            const now = new Date();
            const timeString = now.toLocaleTimeString('id-ID', {
                hour12: false
            });
            clockEl.textContent = timeString;
        }
    }
    setInterval(updateClock, 1000);
    updateClock();
</script>
@endsection