@extends('layouts.admin')

@section('title', 'Admin Dashboard')
@section('header_title', 'KYM Operations Overview')

@section('header_badge')
    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-teal-50 text-teal-700 border border-teal-200">
        <span class="w-2 h-2 rounded-full bg-teal-500 animate-pulse"></span>
        Live KYM Verification Engine
    </span>
@endsection

@section('content')
<div class="space-y-8">

    <!-- Top KPI Metric Cards (Section 6) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        <!-- Total Members -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Members</p>
                    <h3 class="text-3xl font-extrabold text-navy-900 mt-1.5">{{ number_format($totalMembers) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center text-xl">
                    <i class="fa-solid fa-address-book"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-slate-100 flex items-center justify-between text-xs">
                <span class="text-slate-500">Verified Rate: <strong class="text-emerald-700">{{ $completionRate }}%</strong></span>
                <a href="{{ route('admin.members.index') }}" class="font-medium text-teal-600 hover:text-teal-700">View All →</a>
            </div>
        </div>

        <!-- Verified Members -->
        <div class="bg-white p-5 rounded-2xl border border-emerald-200/80 shadow-sm hover:shadow-md transition bg-gradient-to-br from-white via-white to-emerald-50/30">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-emerald-700 uppercase tracking-wider">KYM Verified</p>
                    <h3 class="text-3xl font-extrabold text-emerald-800 mt-1.5">{{ number_format($verified) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center text-xl shadow-sm">
                    <i class="fa-solid fa-circle-check"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-emerald-100/60 flex items-center justify-between text-xs">
                <span class="text-emerald-700 font-medium">Fully Authenticated</span>
                <a href="{{ route('admin.members.index', ['kym_status' => 'verified']) }}" class="font-semibold text-emerald-700 hover:text-emerald-800">Filter →</a>
            </div>
        </div>

        <!-- Pending Verification Queue -->
        <div class="bg-white p-5 rounded-2xl border border-blue-200/80 shadow-sm hover:shadow-md transition bg-gradient-to-br from-white via-white to-blue-50/30">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-blue-700 uppercase tracking-wider">Pending Action</p>
                    <h3 class="text-3xl font-extrabold text-blue-800 mt-1.5">{{ number_format($totalPendingReview) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center text-xl shadow-sm">
                    <i class="fa-solid fa-hourglass-half"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-blue-100/60 flex items-center justify-between text-xs">
                <span class="text-slate-500">Submitted / Under Review</span>
                <a href="{{ route('admin.verification.index') }}" class="font-semibold text-blue-700 hover:text-blue-800">Review Queue →</a>
            </div>
        </div>

        <!-- Changes Required -->
        <div class="bg-white p-5 rounded-2xl border border-orange-200/80 shadow-sm hover:shadow-md transition bg-gradient-to-br from-white via-white to-orange-50/30">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-orange-700 uppercase tracking-wider">Changes Required</p>
                    <h3 class="text-3xl font-extrabold text-orange-800 mt-1.5">{{ number_format($changesRequired) }}</h3>
                </div>
                <div class="w-12 h-12 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center text-xl shadow-sm">
                    <i class="fa-solid fa-pen-to-square"></i>
                </div>
            </div>
            <div class="mt-4 pt-3 border-t border-orange-100/60 flex items-center justify-between text-xs">
                <span class="text-slate-500">Waiting for Member Correction</span>
                <a href="{{ route('admin.verification.index', ['status' => 'changes_required']) }}" class="font-semibold text-orange-700 hover:text-orange-800">View →</a>
            </div>
        </div>
    </div>

    <!-- Secondary Status Metrics Bar -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-xl border border-slate-200 text-center">
            <span class="text-xs text-slate-500 font-medium">Not Started</span>
            <p class="text-xl font-bold text-slate-700 mt-1">{{ number_format($notStarted) }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-slate-200 text-center">
            <span class="text-xs text-slate-500 font-medium">Draft in Progress</span>
            <p class="text-xl font-bold text-slate-700 mt-1">{{ number_format($inProgress) }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-slate-200 text-center">
            <span class="text-xs text-slate-500 font-medium">Resubmitted</span>
            <p class="text-xl font-bold text-blue-700 mt-1">{{ number_format($resubmitted) }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-slate-200 text-center">
            <span class="text-xs text-slate-500 font-medium">KYM Rejected</span>
            <p class="text-xl font-bold text-rose-700 mt-1">{{ number_format($rejected) }}</p>
        </div>
    </div>

    <!-- Overall Verification Progress Bar -->
    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm">
        <div class="flex items-center justify-between mb-3">
            <div>
                <h4 class="text-sm font-bold text-slate-800">Overall Community Verification Progress</h4>
                <p class="text-xs text-slate-500">{{ $verified }} of {{ $totalMembers }} members verified</p>
            </div>
            <span class="text-lg font-extrabold text-teal-600">{{ $completionRate }}% Complete</span>
        </div>
        <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
            <div class="bg-gradient-to-r from-teal-500 to-emerald-500 h-3 rounded-full transition-all duration-500" style="width: {{ min(100, max(4, $completionRate)) }}%"></div>
        </div>
    </div>

    <!-- Grid: Recent Submissions & Recent Audit Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left: Recent KYM Submissions (2 cols) -->
        <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col">
            <div class="p-5 border-b border-slate-200 flex items-center justify-between">
                <div>
                    <h3 class="font-bold text-slate-800 text-base">Recent KYM Submissions</h3>
                    <p class="text-xs text-slate-500">Members awaiting or recently under verifier review</p>
                </div>
                <a href="{{ route('admin.verification.index') }}" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-teal-700 bg-teal-50 hover:bg-teal-100 transition border border-teal-200">
                    Open Queue
                </a>
            </div>

            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                            <th class="py-3 px-4">Member Name & Code</th>
                            <th class="py-3 px-4">Primary Contact</th>
                            <th class="py-3 px-4">Status</th>
                            <th class="py-3 px-4">Submitted</th>
                            <th class="py-3 px-4 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm">
                        @forelse($recentSubmissions as $item)
                            <tr class="hover:bg-slate-50/80 transition">
                                <td class="py-3.5 px-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-xs shrink-0">
                                            {{ substr($item->full_name, 0, 1) }}
                                        </div>
                                        <div>
                                            <a href="{{ route('admin.members.show', $item) }}" class="font-semibold text-slate-800 hover:text-teal-600 transition block">
                                                {{ $item->full_name }}
                                            </a>
                                            <span class="text-xs text-slate-500 font-mono">{{ $item->member_code }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3.5 px-4 text-xs">
                                    <p class="font-medium text-slate-700">{{ $item->masked_mobile }}</p>
                                    <p class="text-slate-400 text-[11px]">{{ $item->association?->code ?? 'ASIA' }}</p>
                                </td>
                                <td class="py-3.5 px-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border {{ $item->status_badge_class }}">
                                        {{ $item->status_label }}
                                    </span>
                                </td>
                                <td class="py-3.5 px-4 text-xs text-slate-500">
                                    {{ $item->updated_at->diffForHumans() }}
                                </td>
                                <td class="py-3.5 px-4 text-right">
                                    <a href="{{ route('admin.verification.show', $item) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-900 hover:bg-teal-600 text-white transition shadow-sm">
                                        <i class="fa-solid fa-magnifying-glass text-[10px]"></i> Review
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-8 text-center text-slate-400 text-sm">
                                    No pending submissions in queue.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Right: Recent Activity Stream (1 col) -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-5 flex flex-col">
            <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
                <div>
                    <h3 class="font-bold text-slate-800 text-base">Audit Trail Stream</h3>
                    <p class="text-xs text-slate-500">Live verification & admin actions</p>
                </div>
                <a href="{{ route('admin.audit_logs.index') }}" class="text-xs font-semibold text-teal-600 hover:text-teal-700">View All</a>
            </div>

            <div class="space-y-4 overflow-y-auto max-h-[460px] custom-scrollbar pr-1">
                @forelse($recentLogs as $log)
                    <div class="flex items-start gap-3 text-xs pb-3 border-b border-slate-100 last:border-0 last:pb-0">
                        <div class="w-7 h-7 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center shrink-0 mt-0.5 border border-teal-100 font-bold text-[11px]">
                            <i class="fa-solid fa-bolt text-[10px]"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-slate-800">{{ str_replace('_', ' ', $log->action) }}</p>
                            <p class="text-slate-600 text-[11px] mt-0.5 leading-snug line-clamp-2">{{ $log->description }}</p>
                            <div class="flex items-center gap-2 mt-1 text-[10px] text-slate-400 font-medium">
                                <span><i class="fa-solid fa-user text-[9px] mr-1"></i>{{ $log->actor_name }}</span>
                                <span>•</span>
                                <span>{{ $log->created_at->diffForHumans() }}</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-slate-400 text-xs py-8">No recent activity recorded.</p>
                @endforelse
            </div>
        </div>

    </div>

    <!-- Recent Import Batches Section -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-200 flex items-center justify-between">
            <div>
                <h3 class="font-bold text-slate-800 text-base">Recent Member Imports</h3>
                <p class="text-xs text-slate-500">History of bulk roster imports and batch reconciliation</p>
            </div>
            <a href="{{ route('admin.import.index') }}" class="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 transition">
                <i class="fa-solid fa-upload mr-1.5"></i> New Import
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-sm">
                <thead>
                    <tr class="bg-slate-50 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3 px-5">Batch ID</th>
                        <th class="py-3 px-5">Source File</th>
                        <th class="py-3 px-5">Total Rows</th>
                        <th class="py-3 px-5">Imported / Updated</th>
                        <th class="py-3 px-5">Skipped / Duplicates</th>
                        <th class="py-3 px-5">Imported By</th>
                        <th class="py-3 px-5">Date</th>
                        <th class="py-3 px-5 text-right">Details</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($recentImports as $batch)
                        <tr class="hover:bg-slate-50/80">
                            <td class="py-3.5 px-5 font-mono font-semibold text-slate-700">#{{ $batch->id }}</td>
                            <td class="py-3.5 px-5 font-medium text-slate-800">{{ $batch->original_filename }}</td>
                            <td class="py-3.5 px-5 text-slate-600 font-bold">{{ $batch->total_rows }}</td>
                            <td class="py-3.5 px-5 text-emerald-700 font-medium">{{ $batch->successful_rows }} created / {{ $batch->updated_rows }} updated</td>
                            <td class="py-3.5 px-5 text-amber-700 font-medium">{{ $batch->skipped_rows }} skipped / {{ $batch->duplicate_rows }} duplicates</td>
                            <td class="py-3.5 px-5 text-slate-600">{{ $batch->importedBy?->name ?? 'System' }}</td>
                            <td class="py-3.5 px-5 text-slate-500">{{ $batch->created_at->format('M d, Y H:i') }}</td>
                            <td class="py-3.5 px-5 text-right">
                                <a href="{{ route('admin.import.show', $batch) }}" class="text-teal-600 hover:text-teal-800 font-semibold">Inspect →</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-6 text-center text-slate-400">No member import batches run yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection