@extends('layouts.app')

@section('title', 'Control Panel Moderasi & KYC')

@section('content')
<div class="flex h-full min-h-screen bg-slate-50">
    @include('admin.partials.sidebar')

    {{-- Main Content --}}
    <div class="flex-1 overflow-x-hidden p-8">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-slate-800">Control Panel Moderasi Sistem</h1>
            <p class="text-slate-500 text-sm mt-1">Kelola verifikasi identitas (KYC) dan moderasi pengguna berbasis perlindungan privasi.</p>
        </div>

        @if(session('success'))
            <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl flex items-start gap-3 shadow-sm">
                <svg class="w-5 h-5 mt-0.5 shrink-0" 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"></path></svg>
                <p class="text-sm font-medium">{{ session('success') }}</p>
            </div>
        @endif
        @if(session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl flex items-start gap-3 shadow-sm">
                <svg class="w-5 h-5 mt-0.5 shrink-0" 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"></path></svg>
                <p class="text-sm font-medium">{{ session('error') }}</p>
            </div>
        @endif

        {{-- BAGIAN 1: ANTREAN VERIFIKASI KYC --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-10">
            <div class="p-6 border-b border-slate-200 bg-slate-50/80 flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path></svg>
                        Antrean Verifikasi e-KTP (KYC)
                    </h2>
                    <p class="text-xs text-slate-500 mt-1">Sesuai UU PDP, file foto KTP & Selfie akan otomatis terhapus permanen setelah disetujui.</p>
                </div>
                <span class="px-3 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full">{{ isset($kycQueue) ? $kycQueue->count() : 0 }} Menunggu</span>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-white border-b border-slate-100 text-xs font-bold text-slate-500 uppercase tracking-wider">
                            <th class="py-4 px-6">Nama Pendaftar</th>
                            <th class="py-4 px-6">Dokumen KTP</th>
                            <th class="py-4 px-6">Foto Selfie</th>
                            <th class="py-4 px-6 text-right">Aksi Moderasi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @if(isset($kycQueue) && $kycQueue->count() > 0)
                            @foreach($kycQueue as $queue)
                                <tr class="hover:bg-slate-50 transition-colors">
                                    <td class="py-4 px-6">
                                        <p class="font-bold text-slate-800">{{ $queue->nama }}</p>
                                        <p class="text-xs text-slate-400">{{ $queue->email }}</p>
                                    </td>
                                    <td class="py-4 px-6">
                                        @if($queue->ktp_path)
                                            <a href="{{ asset('storage/' . $queue->ktp_path) }}" target="_blank" class="inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-800 font-medium text-sm transition-colors">
                                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                                Lihat e-KTP
                                            </a>
                                        @else
                                            <span class="text-xs text-slate-400 italic">File KTP tidak ada</span>
                                        @endif
                                    </td>
                                    <td class="py-4 px-6">
                                        @if($queue->selfie_path)
                                            <a href="{{ asset('storage/' . $queue->selfie_path) }}" target="_blank" class="inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-800 font-medium text-sm transition-colors">
                                                <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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                Lihat Selfie
                                            </a>
                                        @else
                                            <span class="text-xs text-slate-400 italic">File Selfie tidak ada</span>
                                        @endif
                                    </td>
                                    <td class="py-4 px-6 text-right">
                                        <div class="flex items-center justify-end gap-2">
                                            <!-- PENTING: Sesuaikan nama route action dengan rute di web.php Anda (misal: 'admin.approve-kyc' atau 'admin.users.approve-kyc') -->
                                            <form action="{{ url('/admin/users/'.$queue->id.'/approve-kyc') }}" method="POST" onsubmit="return confirm('Setujui akun ini? Sesuai prinsip keamanan, file KTP & Selfie akan terhapus secara permanen dari server.');">
                                                @csrf
                                                <button type="submit" class="px-4 py-2 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white rounded-lg text-xs font-bold transition-all shadow-sm">Setujui KYC</button>
                                            </form>
                                            <form action="{{ url('/admin/users/'.$queue->id.'/reject-kyc') }}" method="POST" onsubmit="return confirm('Tolak akun ini? File yang diunggah akan dihapus.');">
                                                @csrf
                                                <button type="submit" class="px-4 py-2 bg-white border border-red-200 text-red-600 hover:bg-red-50 rounded-lg text-xs font-bold transition-all shadow-sm">Tolak</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="py-12 px-6 text-center">
                                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-50 text-slate-400 mb-3">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    </div>
                                    <p class="text-slate-500 font-medium">Tidak ada antrean verifikasi KYC saat ini.</p>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        {{-- BAGIAN 2: DAFTAR PENGGUNA --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="p-6 border-b border-slate-200 flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <svg class="w-5 h-5 text-red-600" 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"></path></svg>
                        Daftar Pengguna & Moderasi Akun
                    </h2>
                    <p class="text-xs text-slate-500 mt-1">Suspend/Ban akun bermasalah berdasarkan UUID Samaran tanpa perlu mengakses data privasi kependudukan.</p>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 border-b border-slate-100 text-xs font-bold text-slate-500 uppercase tracking-wider">
                            <th class="py-4 px-6">Identitas Publik / UUID Samaran</th>
                            <th class="py-4 px-6 text-center">Status KYC</th>
                            <th class="py-4 px-6 text-center">Aspirasi</th>
                            <th class="py-4 px-6 text-center">Status Akun</th>
                            <th class="py-4 px-6 text-right">Tindakan Moderasi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($users as $user)
                            <tr class="hover:bg-slate-50/50 transition-colors {{ $user->is_banned ? 'bg-red-50/30' : '' }}">
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 shadow-sm" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">
                                            {{ strtoupper(substr($user->nama, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-bold text-slate-800">{{ $user->nama }}</div>
                                            <div class="text-[11px] font-mono text-slate-400 mt-0.5" title="Token Identitas Unik (Verifiable Anonymity)">
                                                ID: {{ $user->token_anonim ?? $user->uuid_samaran ?? 'Belum ada UUID' }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    @if($user->status_kyc === 'verified')
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                                            Terverifikasi
                                        </span>
                                    @elseif($user->status_kyc === 'pending')
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800">
                                            Menunggu
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600">
                                            Belum KYC
                                        </span>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-center text-sm font-semibold text-slate-700">
                                    {{ $user->aspirasi_count ?? 0 }}
                                </td>
                                <td class="py-4 px-6 text-center">
                                    @if($user->is_banned)
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-red-100 text-red-800">
                                            Di-Banned
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800">
                                            Aktif
                                        </span>
                                    @endif
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <form action="{{ url('/admin/users/'.$user->id.'/toggle-ban') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin {{ $user->is_banned ? 'mengaktifkan kembali' : 'menangguhkan (banned)' }} akun ini?');">
                                        @csrf
                                        @if($user->is_banned)
                                            <button type="submit" class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white rounded-lg text-xs font-bold transition-all shadow-sm">
                                                Aktifkan Akun
                                            </button>
                                        @else
                                            <button type="submit" class="px-4 py-2 bg-red-50 text-red-600 hover:bg-red-600 hover:text-white rounded-lg text-xs font-bold transition-all border border-red-200 hover:border-red-600 shadow-sm">
                                                Suspend Akun
                                            </button>
                                        @endif
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-8 px-6 text-center text-slate-500">Belum ada data pengguna.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            @if(isset($users) && $users->hasPages())
                <div class="p-6 border-t border-slate-100">
                    {{ $users->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection