@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('page_header', 'Dashboard Overview')

@section('content')
<div class="space-y-8">
    
    <!-- Welcome Banner -->
    <div class="relative bg-gradient-to-r from-slate-900 via-emerald-950 to-slate-900 rounded-3xl p-8 text-white shadow-xl overflow-hidden">
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl"></div>
        <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div class="space-y-2 max-w-xl">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-wider">
                    Humanity Welfare Society (NGO)
                </div>
                <h2 class="text-3xl font-extrabold text-white tracking-tight">Welcome back, {{ Auth::user()->name }} 👋</h2>
                <p class="text-slate-300 text-sm leading-relaxed">
                    Manage intern student records, generate QR-verified certificates with custom college logos, and inspect live authenticity verification logs.
                </p>
            </div>
            
            <a href="{{ route('admin.certificates.create') }}" 
               class="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white font-bold text-sm px-6 py-3.5 rounded-2xl shadow-xl shadow-emerald-600/30 transition-all hover:scale-105 flex items-center gap-2.5 flex-shrink-0">
                <i data-lucide="plus-circle" class="w-5 h-5"></i>
                <span>Issue New Certificate</span>
            </a>
        </div>
    </div>

    <!-- Stat Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        
        <!-- Total Certificates -->
        <div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-sm hover:shadow-md transition-all hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-bold uppercase text-slate-400 tracking-wider">Total Certificates</span>
                    <h3 class="text-3xl font-extrabold text-slate-900 mt-2">{{ number_format($totalCertificates) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold">
                    <i data-lucide="award" class="w-6 h-6"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
                <span class="text-emerald-700 font-semibold">🟢 {{ $activeCertificates }} Active</span>
                <span class="text-rose-600 font-semibold">🔴 {{ $revokedCertificates }} Revoked</span>
            </div>
        </div>

        <!-- Total Intern Students -->
        <div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-sm hover:shadow-md transition-all hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-bold uppercase text-slate-400 tracking-wider">Intern Students</span>
                    <h3 class="text-3xl font-extrabold text-slate-900 mt-2">{{ number_format($totalStudents) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
                    <i data-lucide="users" class="w-6 h-6"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-slate-100 text-xs text-slate-500">
                Registered student interns
            </div>
        </div>

        <!-- Partner Colleges -->
        <div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-sm hover:shadow-md transition-all hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-bold uppercase text-slate-400 tracking-wider">Partner Colleges</span>
                    <h3 class="text-3xl font-extrabold text-slate-900 mt-2">{{ number_format($totalColleges) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-2xl bg-purple-50 text-purple-600 flex items-center justify-center font-bold">
                    <i data-lucide="building-2" class="w-6 h-6"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-slate-100 text-xs text-slate-500">
                Universities & Institutions
            </div>
        </div>

        <!-- Internship Domains -->
        <div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-sm hover:shadow-md transition-all hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-bold uppercase text-slate-400 tracking-wider">Courses / Domains</span>
                    <h3 class="text-3xl font-extrabold text-slate-900 mt-2">{{ number_format($totalCourses) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center font-bold">
                    <i data-lucide="book-open" class="w-6 h-6"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-slate-100 text-xs text-slate-500">
                Available Internship Programs
            </div>
        </div>
    </div>

    <!-- Recent Certificates Table & Top Colleges Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Recent Issued Certificates (2 cols) -->
        <div class="lg:col-span-2 bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-6">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Recently Issued Certificates</h3>
                    <p class="text-xs text-slate-500">Latest generated certificates with status indicators</p>
                </div>
                <a href="{{ route('admin.certificates.index') }}" class="text-xs font-bold text-emerald-600 hover:text-emerald-800 flex items-center gap-1">
                    <span>View All</span>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50 text-slate-500 uppercase tracking-wider font-bold border-b border-slate-200">
                        <tr>
                            <th class="p-3">Student Name</th>
                            <th class="p-3">Certificate ID</th>
                            <th class="p-3">Course</th>
                            <th class="p-3 text-center">Email</th>
                            <th class="p-3 text-center">Status</th>
                            <th class="p-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium">
                        @forelse($recentCertificates as $cert)
                        <tr class="hover:bg-slate-50/80 transition-colors">
                            <td class="p-3 font-bold text-slate-900">
                                {{ $cert->student->full_name }}
                                <span class="block text-[11px] font-normal text-slate-500">{{ $cert->student->college->name ?? 'N/A' }}</span>
                            </td>
                            <td class="p-3">
                                <span class="font-mono font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded border border-emerald-200">
                                    {{ $cert->certificate_uuid }}
                                </span>
                            </td>
                            <td class="p-3 text-slate-700">{{ $cert->course->title ?? 'N/A' }}</td>
                            <td class="p-3 text-center">
                                @if($cert->email_sent)
                                    <span class="inline-flex items-center gap-1 text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full text-[10px] font-bold border border-emerald-200">
                                        <i data-lucide="mail-check" class="w-3 h-3"></i> Sent
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full text-[10px] font-bold">
                                        Not Sent
                                    </span>
                                @endif
                            </td>
                            <td class="p-3 text-center">
                                @if($cert->status === 'active')
                                    <span class="inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 px-2.5 py-1 rounded-full text-[11px] font-bold">
                                        🟢 Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-rose-700 bg-rose-100 px-2.5 py-1 rounded-full text-[11px] font-bold">
                                        🔴 Revoked
                                    </span>
                                @endif
                            </td>
                            <td class="p-3 text-right">
                                <a href="{{ route('admin.certificates.show', $cert->id) }}" class="p-1.5 text-slate-500 hover:text-emerald-600 hover:bg-slate-100 rounded-lg inline-block" title="View Details">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="p-8 text-center text-slate-400">No certificates generated yet.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top Partnered Colleges & System Activity (1 col) -->
        <div class="space-y-6">
            
            <!-- Top Colleges Widget -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h3 class="text-base font-bold text-slate-900 border-b border-slate-100 pb-3">Top Partnered Colleges</h3>
                
                <div class="space-y-3">
                    @foreach($topColleges as $col)
                    <div class="flex items-center justify-between p-3 rounded-2xl bg-slate-50 border border-slate-100">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-xl bg-purple-100 text-purple-700 flex items-center justify-center font-extrabold text-xs">
                                {{ strtoupper(substr($col->name, 0, 2)) }}
                            </div>
                            <div class="min-w-0">
                                <h4 class="text-xs font-bold text-slate-900 truncate">{{ $col->name }}</h4>
                                <span class="text-[11px] text-slate-400">{{ $col->city_state ?? 'India' }}</span>
                            </div>
                        </div>
                        <span class="text-xs font-extrabold text-purple-700 bg-purple-50 px-2.5 py-1 rounded-lg border border-purple-200">
                            {{ $col->students_count }} Students
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Recent Security Logs Widget -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h3 class="text-base font-bold text-slate-900 border-b border-slate-100 pb-3">Recent Security Activity</h3>
                
                <div class="space-y-3 text-xs">
                    @foreach($recentLogs as $log)
                    <div class="flex items-start gap-3 p-2.5 rounded-xl hover:bg-slate-50">
                        <div class="w-2 h-2 rounded-full bg-emerald-500 mt-1.5 flex-shrink-0"></div>
                        <div>
                            <p class="font-semibold text-slate-800">{{ $log->action }}</p>
                            <p class="text-[11px] text-slate-500">{{ $log->details }}</p>
                            <span class="text-[10px] text-slate-400">{{ $log->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

        </div>

    </div>

</div>
@endsection