@extends('admin.layouts.app')

@section('title', 'Users')
@section('page-title', 'User Management')
@section('page-title-jp', 'ユーザー管理')

@section('content')

{{-- Stats Overview --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
        <div class="text-xs font-semibold text-gray-500 tracking-widest">TOTAL USERS</div>
        <div class="mt-2 flex items-baseline gap-2">
            <span class="text-3xl font-semibold text-gray-900">{{ number_format($stats['total']) }}</span>
        </div>
        <div class="text-[11px] text-gray-400 mt-1">All registered accounts</div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
        <div class="text-xs font-semibold text-emerald-600 tracking-widest">EMAIL VERIFIED</div>
        <div class="mt-2 flex items-baseline gap-2">
            <span class="text-3xl font-semibold text-gray-900">{{ number_format($stats['email_verified']) }}</span>
            <span class="text-sm text-gray-500">/ {{ number_format($stats['total']) }}</span>
        </div>
        <div class="mt-1 h-1.5 bg-emerald-100 rounded-full overflow-hidden">
            <div class="h-1.5 bg-emerald-500 rounded-full" style="width: {{ $stats['total'] ? round(($stats['email_verified'] / $stats['total']) * 100) : 0 }}%"></div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
        <div class="text-xs font-semibold text-teal-600 tracking-widest">WHATSAPP VERIFIED</div>
        <div class="mt-2 flex items-baseline gap-2">
            <span class="text-3xl font-semibold text-gray-900">{{ number_format($stats['whatsapp_verified']) }}</span>
            <span class="text-sm text-gray-500">/ {{ number_format($stats['total']) }}</span>
        </div>
        <div class="mt-1 h-1.5 bg-teal-100 rounded-full overflow-hidden">
            <div class="h-1.5 bg-teal-500 rounded-full" style="width: {{ $stats['total'] ? round(($stats['whatsapp_verified'] / $stats['total']) * 100) : 0 }}%"></div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
        <div class="text-xs font-semibold text-violet-600 tracking-widest">ADMINS</div>
        <div class="mt-2 flex items-baseline gap-2">
            <span class="text-3xl font-semibold text-gray-900">{{ number_format($stats['admins']) }}</span>
        </div>
        <div class="text-[11px] text-gray-400 mt-1">With elevated privileges</div>
    </div>
</div>

{{-- Main Table --}}
<x-admin.data-table
    :headers="[
        ['label' => 'User', 'width' => '24%'],
        ['label' => 'WhatsApp', 'width' => '16%'],
        ['label' => 'Role', 'width' => '10%'],
        ['label' => 'Verification', 'width' => '24%'],
        ['label' => 'Created', 'width' => '12%'],
        ['label' => 'Actions', 'sortable' => false, 'align' => 'right', 'width' => '14%'],
    ]"
    :searchable="true"
    searchPlaceholder="Search by name or email..."
    :hoverable="true"
    :paginator="$users">

    <x-slot name="filters">
        <select name="role">
            <option value="">All Roles</option>
            @foreach ($roles as $role)
                <option value="{{ $role->slug }}" {{ request('role') === $role->slug ? 'selected' : '' }}>{{ $role->name }}</option>
            @endforeach
        </select>

        <select name="email_verified">
            <option value="">Email: Any</option>
            <option value="1" {{ request('email_verified') === '1' ? 'selected' : '' }}>Email Verified</option>
            <option value="0" {{ request('email_verified') === '0' ? 'selected' : '' }}>Email Unverified</option>
        </select>

        <select name="whatsapp_verified">
            <option value="">WA: Any</option>
            <option value="1" {{ request('whatsapp_verified') === '1' ? 'selected' : '' }}>WA Verified</option>
            <option value="0" {{ request('whatsapp_verified') === '0' ? 'selected' : '' }}>WA Unverified</option>
        </select>
    </x-slot>

    @foreach ($users as $user)
    <tr x-data='userVerification({{ $user->email_verified_at ? "true" : "false" }}, {{ $user->whatsapp_verified_at ? "true" : "false" }}, "{{ route('admin.users.toggle-verification', $user) }}")'>
        {{-- User --}}
        <td>
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 ring-2 ring-white shadow-sm">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div class="min-w-0">
                    <div class="font-semibold text-gray-900 truncate">{{ $user->name }}</div>
                    <div class="text-xs text-gray-500 truncate">{{ $user->email }}</div>
                </div>
            </div>
        </td>

        {{-- WhatsApp --}}
        <td>
            @if($user->whatsapp_number)
                <div class="flex items-center gap-2">
                    <span class="text-emerald-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012-2m-6 9v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2a2 2 0 012-2h2a2 2 0 012 2z" />
                        </svg>
                    </span>
                    <span class="font-mono text-sm text-gray-700">{{ $user->whatsapp_number }}</span>
                </div>
            @else
                <span class="text-gray-400 text-sm">—</span>
            @endif
        </td>

        {{-- Role --}}
        <td>
            @if($user->is_admin)
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">Admin</span>
            @else
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-gray-200 text-gray-600">User</span>
            @endif
        </td>

        {{-- Verification Status + Quick Toggles --}}
        <td>
            <div class="space-y-2">
                {{-- Email --}}
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <span class="text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </span>
                        <span class="text-xs font-medium text-gray-600">Email</span>
                        <span 
                            :class="emailVerified ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-200 text-gray-500'"
                            class="inline-flex items-center px-2 py-px rounded text-[10px] font-bold tracking-wider">
                            <span x-text="emailVerified ? 'VERIFIED' : 'PENDING'"></span>
                        </span>
                    </div>

                    @if (auth()->user()->hasPermission('users.update'))
                    <button 
                        type="button"
                        @click="toggle('email')"
                        :disabled="loadingEmail"
                        class="text-[10px] font-semibold px-2 py-0.5 rounded border transition active:scale-[0.985]"
                        :class="emailVerified 
                            ? 'border-red-200 text-red-600 hover:bg-red-50' 
                            : 'border-emerald-200 text-emerald-600 hover:bg-emerald-50'">
                        <span x-text="loadingEmail ? '...' : (emailVerified ? 'Revoke' : 'Verify')"></span>
                    </button>
                    @endif
                </div>

                {{-- WhatsApp --}}
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <span class="text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                        </span>
                        <span class="text-xs font-medium text-gray-600">WhatsApp</span>
                        <span 
                            :class="waVerified ? 'bg-teal-100 text-teal-700' : 'bg-gray-200 text-gray-500'"
                            class="inline-flex items-center px-2 py-px rounded text-[10px] font-bold tracking-wider">
                            <span x-text="waVerified ? 'VERIFIED' : 'PENDING'"></span>
                        </span>
                    </div>

                    @if (auth()->user()->hasPermission('users.update'))
                    <button 
                        type="button"
                        @click="toggle('whatsapp')"
                        :disabled="loadingWa"
                        class="text-[10px] font-semibold px-2 py-0.5 rounded border transition active:scale-[0.985]"
                        :class="waVerified 
                            ? 'border-red-200 text-red-600 hover:bg-red-50' 
                            : 'border-emerald-200 text-emerald-600 hover:bg-emerald-50'">
                        <span x-text="loadingWa ? '...' : (waVerified ? 'Revoke' : 'Verify')"></span>
                    </button>
                    @endif
                </div>
            </div>
        </td>

        {{-- Created --}}
        <td>
            <div class="text-sm text-gray-600">{{ $user->created_at->format('M d, Y') }}</div>
            <div class="text-[10px] text-gray-400">{{ $user->created_at->format('H:i') }}</div>
        </td>

        {{-- Actions --}}
        <td class="text-right">
            <div class="inline-flex items-center gap-1">
                <a href="{{ route('admin.users.show', $user) }}" 
                   class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-gray-300 text-gray-600 hover:bg-gray-50 transition">
                    View
                </a>

                @if (auth()->user()->hasPermission('users.update'))
                    <a href="{{ route('admin.users.edit', $user) }}" 
                       class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-blue-200 text-blue-600 hover:bg-blue-50 transition">
                        Edit
                    </a>
                @endif

                @if (auth()->user()->hasPermission('users.delete'))
                    <form action="{{ route('admin.users.destroy', $user) }}" method="POST" class="inline" onsubmit="return confirm('Delete this user permanently?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition">
                            Delete
                        </button>
                    </form>
                @endif
            </div>
        </td>
    </tr>
    @endforeach
</x-admin.data-table>

@endsection