@extends('layouts.admin')

@section('title', 'Telegram AIO Manager')

@section('content')
    <style>
        @keyframes pulse-soft {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        @keyframes glow-indigo {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(79, 70, 229, 0.2);
            }

            50% {
                box-shadow: 0 0 40px rgba(79, 70, 229, 0.4);
            }
        }

        .premium-card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .premium-card:hover {
            transform: translateY(-8px) scale(1.01);
            border-color: rgba(99, 102, 241, 0.3);
            background: rgba(30, 41, 59, 0.6);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }

        .status-pulse {
            animation: pulse-soft 2s infinite ease-in-out;
        }

        .glow-indigo {
            animation: glow-indigo 4s infinite ease-in-out;
        }

        .glass-icon {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>

    <div class="max-w-7xl mx-auto space-y-10 pb-12">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div class="space-y-2">
                <div class="flex items-center gap-3">
                    <span
                        class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-[10px] font-bold uppercase tracking-[0.2em] border border-indigo-500/20">System
                        AIO</span>
                    <div class="w-1.5 h-1.5 rounded-full bg-green-500 status-pulse"></div>
                </div>
                <h1 class="text-5xl font-black tracking-tight text-white">Telegram Manager</h1>
                <p class="text-white/40 text-lg">Orchestrate your bots, channels, and databases with modern precision.</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.telegram.broadcast') }}"
                    class="group relative px-8 py-4 bg-indigo-600 rounded-2xl font-bold text-white transition-all hover:bg-indigo-500 active:scale-95 overflow-hidden">
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 -translate-x-full group-hover:animate-[shimmer_2s_infinite]">
                    </div>
                    <span class="relative flex items-center gap-2">
                        <i class="fas fa-bullhorn transition-transform group-hover:rotate-12"></i> Broadcast
                    </span>
                </a>
                <a href="{{ route('admin.telegram.setup') }}"
                    class="px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/5 rounded-2xl font-bold text-white transition-all active:scale-95 flex items-center gap-2">
                    <i class="fas fa-magic text-indigo-400"></i> Wizard
                </a>
            </div>
        </div>

        @if(isset($botInfo['ok']) && $botInfo['ok'])
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Main Bot Identity Card -->
                <div
                    class="lg:col-span-2 premium-card rounded-[2.5rem] p-10 relative overflow-hidden flex flex-col justify-between group">
                    <div
                        class="absolute -top-20 -right-20 w-80 h-80 bg-indigo-600/10 rounded-full blur-[100px] group-hover:bg-indigo-600/20 transition-all duration-700">
                    </div>
                    <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-purple-600/10 rounded-full blur-[80px]"></div>

                    <div class="relative z-10 flex flex-col md:flex-row items-center md:items-start gap-10">
                        <div class="relative">
                            <div
                                class="w-32 h-32 rounded-[2.5rem] bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-2xl shadow-indigo-500/40 transform -rotate-3 group-hover:rotate-0 transition-transform duration-500">
                                <i class="fab fa-telegram text-5xl"></i>
                            </div>
                            <div
                                class="absolute -bottom-2 -right-2 w-10 h-10 rounded-2xl bg-slate-900 border-4 border-[#0f172a] flex items-center justify-center text-green-400 text-xs">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>

                        <div class="text-center md:text-left space-y-4 flex-1">
                            <div>
                                <h2 class="text-3xl font-black text-white mb-1">{{ $botInfo['result']['first_name'] }}</h2>
                                <p class="text-indigo-400/80 font-mono text-sm tracking-wider">@
                                    {{ $botInfo['result']['username'] }}
                                </p>
                            </div>
                            <div class="flex flex-wrap gap-2 justify-center md:justify-start">
                                <span
                                    class="px-4 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white/60 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
                                    <i class="fas fa-link text-indigo-400 text-[10px]"></i> Webhook Mode
                                </span>
                                <span
                                    class="px-4 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white/60 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
                                    <i class="fas fa-shield-virus text-indigo-400 text-[10px]"></i> SSL Secure
                                </span>
                            </div>
                            <p class="text-white/30 text-sm leading-relaxed max-w-md">Your bot is currently operational and
                                synchronizing data via Laravel Webhook. Responses are real-time.</p>
                        </div>
                    </div>

                    <div class="mt-12 flex items-center justify-between border-t border-white/5 pt-8">
                        <div class="flex gap-10">
                            <div class="space-y-1">
                                <span class="block text-[10px] font-bold text-white/20 uppercase tracking-[0.2em]">Connected
                                    Since</span>
                                <span class="text-sm font-medium text-white/60">Active Session</span>
                            </div>
                            <div class="space-y-1">
                                <span class="block text-[10px] font-bold text-white/20 uppercase tracking-[0.2em]">Health
                                    Status</span>
                                <span class="text-sm font-bold text-green-400">Excellent</span>
                            </div>
                        </div>
                        <a href="{{ route('admin.settings') }}"
                            class="w-12 h-12 rounded-2xl glass-icon flex items-center justify-center text-white/40 hover:text-white transition-all">
                            <i class="fas fa-cog"></i>
                        </a>
                    </div>
                </div>

                <!-- Metric Card -->
                <div
                    class="premium-card rounded-[2.5rem] p-10 flex flex-col items-center justify-center text-center relative overflow-hidden glow-indigo">
                    <div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 to-transparent"></div>
                    <div class="relative z-10 space-y-6">
                        <div
                            class="w-20 h-20 rounded-[2rem] bg-indigo-500/10 flex items-center justify-center text-indigo-400 mb-2">
                            <i class="fas fa-user-friends text-3xl"></i>
                        </div>
                        <div class="space-y-1">
                            <h3 class="text-white/40 text-xs font-bold uppercase tracking-[0.3em]">Audience Reach</h3>
                            <div class="text-6xl font-black text-white tracking-tighter">
                                {{ number_format($stats['total_users']) }}
                            </div>
                        </div>
                        <p class="text-white/20 text-xs px-10">Total unique users identified in the system database.</p>
                        <div class="pt-4 flex gap-1">
                            @for($i = 0; $i < 5; $i++)
                                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500/{{ 60 - ($i * 10) }}"></div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>

            <!-- Secondary Management Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- Force Sub Modules -->
                <div class="premium-card rounded-[3rem] p-12 space-y-10 group/sub">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <div
                                class="w-14 h-14 rounded-2xl bg-indigo-600/20 flex items-center justify-center text-indigo-400 group-hover/sub:bg-indigo-600 transition-all duration-500">
                                <i class="fas fa-fingerprint text-2xl group-hover/sub:text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-black">Gatekeeper</h3>
                                <p class="text-white/30 text-xs">Force subscribe management</p>
                            </div>
                        </div>
                        <span
                            class="px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-[10px] font-bold">Active
                            Shield</span>
                    </div>

                    <div class="space-y-4">
                        @forelse($channels as $chan)
                            <div
                                class="flex items-center justify-between p-6 rounded-[2rem] bg-white/5 border border-white/5 hover:bg-white/[0.08] hover:border-white/10 transition-all group/item">
                                <div class="flex items-center gap-5">
                                    <div
                                        class="w-12 h-12 rounded-2xl glass-icon flex items-center justify-center text-indigo-400 shadow-inner">
                                        <i class="fab fa-telegram-plane"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-white">{{ $chan['title'] }}</h4>
                                        <p class="text-xs text-white/20">@ {{ $chan['username'] ?? 'Private ID' }} • <span
                                                class="text-indigo-400">{{ ucfirst($chan['type']) }}</span></p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
                                    <span class="text-[10px] font-bold text-white/40 uppercase tracking-widest">Linked</span>
                                </div>
                            </div>
                        @empty
                            <div class="py-12 text-center space-y-4 bg-white/5 rounded-[2rem] border border-dashed border-white/10">
                                <i class="fas fa-unlink text-3xl text-white/10"></i>
                                <p class="text-white/20 text-sm font-medium">No active force-sub restrictions found.</p>
                            </div>
                        @endforelse
                    </div>

                    <a href="{{ route('admin.settings') }}"
                        class="block w-full text-center py-4 rounded-2xl bg-white/5 hover:bg-white/10 text-white/40 hover:text-white font-bold text-sm transition-all border border-transparent hover:border-white/5">
                        Configure Channels
                    </a>
                </div>

                <!-- Data Core Module -->
                <div class="premium-card rounded-[3rem] p-12 space-y-10 group/data">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <div
                                class="w-14 h-14 rounded-2xl bg-purple-600/20 flex items-center justify-center text-purple-400 group-hover/data:bg-purple-600 transition-all duration-500">
                                <i class="fas fa-layer-group text-2xl group-hover/data:text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-black">Cluster Core</h3>
                                <p class="text-white/30 text-xs">Storage and data parameters</p>
                            </div>
                        </div>
                        <div
                            class="flex items-center gap-2 px-4 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20">
                            <div class="w-2 h-2 rounded-full bg-purple-500 animate-ping"></div>
                            <span class="text-purple-400 text-[10px] font-bold tracking-widest">SYNCING</span>
                        </div>
                    </div>

                    <div
                        class="p-8 rounded-[2.5rem] bg-gradient-to-br from-indigo-500/10 to-purple-600/10 border border-indigo-500/20 relative overflow-hidden">
                        <div class="relative z-10 flex flex-col space-y-6">
                            <div class="flex justify-between items-center">
                                <span class="text-xs font-bold text-white/40 uppercase tracking-widest">Main Cluster ID</span>
                                <code
                                    class="px-3 py-1 bg-black/30 rounded-lg text-indigo-400 text-[10px] font-mono border border-white/5">{{ $stats['channel_id'] }}</code>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between text-xs font-medium">
                                    <span class="text-white/60">Storage Integrity</span>
                                    <span class="text-indigo-400">99.9%</span>
                                </div>
                                <div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
                                    <div class="h-full w-[99.9%] bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-6 rounded-[2rem] bg-white/5 border border-white/5 hover:border-white/10 transition-all">
                            <span
                                class="block text-white/40 text-[10px] font-bold uppercase tracking-widest mb-2">Payloads</span>
                            <div class="flex items-baseline gap-2">
                                <span class="text-3xl font-black text-white">{{ $stats['total_files'] }}</span>
                                <span class="text-xs text-indigo-400 font-bold">Files</span>
                            </div>
                        </div>
                        <div class="p-6 rounded-[2rem] bg-white/5 border border-white/5 hover:border-white/10 transition-all">
                            <span
                                class="block text-white/40 text-[10px] font-bold uppercase tracking-widest mb-2">Encryption</span>
                            <div class="flex items-baseline gap-2">
                                <span class="text-3xl font-black text-white">TLS</span>
                                <span class="text-xs text-green-400 font-bold">v1.3</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="premium-card rounded-[3rem] p-20 text-center space-y-8">
                <div
                    class="w-32 h-32 rounded-[2.5rem] bg-red-500/10 border border-red-500/20 flex items-center justify-center text-red-500 mx-auto transform rotate-12">
                    <i class="fas fa-unlink text-5xl"></i>
                </div>
                <div class="space-y-4">
                    <h2 class="text-4xl font-black text-white">System Offline</h2>
                    <p class="text-white/40 max-w-lg mx-auto text-lg leading-relaxed">The Telegram API link has been severed.
                        Please verify your Bot Identity and Token to restore management capabilities.</p>
                </div>
                <a href="{{ route('admin.settings') }}"
                    class="inline-flex items-center gap-3 bg-white text-black px-12 py-5 rounded-[1.5rem] font-black text-lg hover:scale-105 transition-all shadow-2xl shadow-white/10">
                    Restore Connection <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        @endif
    </div>
@endsection