@extends('layouts.admin')
@section('title', '帳號管理')
@section('content')

<!-- 統計卡片 -->
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3 mb-6">
    @php $statItems = [
        ['label' => '總帳號', 'value' => $stats['total'], 'color' => 'blue', 'filter' => ''],
        ['label' => '啟用', 'value' => $stats['active'], 'color' => 'green', 'filter' => 'active'],
        ['label' => '停用', 'value' => $stats['inactive'], 'color' => 'gray', 'filter' => 'inactive'],
        ['label' => '鎖定中', 'value' => $stats['locked'], 'color' => 'red', 'filter' => 'locked'],
        ['label' => '帳號到期', 'value' => $stats['expired'], 'color' => 'orange', 'filter' => 'expired'],
        ['label' => '密碼逾期', 'value' => $stats['pwd_expired'], 'color' => 'amber', 'filter' => 'pwd_expired'],
        ['label' => '從未登入', 'value' => $stats['no_login'], 'color' => 'purple', 'filter' => 'no_login'],
    ]; @endphp
    @foreach($statItems as $item)
    <a href="{{ $item['filter'] ? route('admin.users.index', ['status' => $item['filter']]) : '#' }}"
       class="bg-white dark:bg-slate-900 rounded-xl border border-gray-100 dark:border-slate-800 p-3 text-center {{ $item['filter'] ? 'hover:shadow-md transition-shadow cursor-pointer' : '' }}">
        <div class="text-2xl font-bold text-{{ $item['color'] }}-600 dark:text-{{ $item['color'] }}-400">{{ $item['value'] }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $item['label'] }}</div>
    </a>
    @endforeach
</div>

<!-- 工具列 -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="搜尋姓名或 Email..." class="px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
        <select name="role_id" onchange="this.form.submit()" class="px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有角色</option>
            @foreach($roles as $r)<option value="{{ $r->id }}" {{ request('role_id') == $r->id ? 'selected' : '' }}>{{ $r->name }}</option>@endforeach
        </select>
        <select name="school_id" onchange="this.form.submit()" class="px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有學校</option>
            @foreach($schools as $s)<option value="{{ $s->id }}" {{ request('school_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>@endforeach
        </select>
        <select name="status" onchange="this.form.submit()" class="px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
            <option value="">所有狀態</option>
            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>啟用</option>
            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>停用</option>
            <option value="locked" {{ request('status') === 'locked' ? 'selected' : '' }}>鎖定中</option>
            <option value="expired" {{ request('status') === 'expired' ? 'selected' : '' }}>帳號到期</option>
            <option value="pwd_expired" {{ request('status') === 'pwd_expired' ? 'selected' : '' }}>密碼逾期</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">搜尋</button>
        @if(request()->hasAny(['search', 'role_id', 'school_id', 'status']))
            <a href="{{ route('admin.users.index') }}" class="px-4 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm">清除</a>
        @endif
    </form>
    <div class="flex gap-2">
        <a href="{{ route('admin.users.security') }}" class="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm hover:bg-amber-700 font-medium whitespace-nowrap">資安總覽</a>
        <a href="{{ route('admin.users.import') }}" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 font-medium whitespace-nowrap">批次匯入</a>
        <a href="{{ route('admin.users.create') }}" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 font-medium whitespace-nowrap">+ 新增帳號</a>
    </div>
</div>

@if(session('import_errors'))
<div class="mb-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300 px-4 py-3 rounded-lg">
    <p class="font-semibold mb-2">匯入部分失敗：</p>
    <ul class="text-sm list-disc list-inside space-y-1">
        @foreach(session('import_errors') as $err)<li>{{ $err }}</li>@endforeach
    </ul>
</div>
@endif

@include('components.pagination-bar', ['paginator' => $users])

@php
$roleBadge = fn($slug) => match($slug) {
    'admin' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    'school_admin' => 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
    'homeroom' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    'teacher' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
    default => 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
};
@endphp
<div x-data="{ selected: [] }" class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
    <!-- 批次操作工具列 -->
    <div x-show="selected.length > 0" x-cloak class="px-4 py-2 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800 flex items-center gap-3">
        <span class="text-sm text-blue-700 dark:text-blue-300 font-medium" x-text="'已選 ' + selected.length + ' 筆'"></span>
        <form method="POST" action="{{ route('admin.users.bulk_toggle') }}" class="inline">
            @csrf
            <template x-for="id in selected"><input type="hidden" name="user_ids[]" :value="id"></template>
            <button type="submit" name="action" value="activate" class="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700">批次啟用</button>
            <button type="submit" name="action" value="deactivate" class="px-3 py-1 bg-red-600 text-white rounded text-xs hover:bg-red-700 ml-1">批次停用</button>
        </form>
        <form method="POST" action="{{ route('admin.users.bulk_unlock') }}" class="inline">
            @csrf
            <template x-for="id in selected"><input type="hidden" name="user_ids[]" :value="id"></template>
            <button type="submit" class="px-3 py-1 bg-amber-600 text-white rounded text-xs hover:bg-amber-700">批次解鎖</button>
        </form>
    </div>

    <div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-slate-800"><tr>
            <th class="px-3 py-3 text-left"><input type="checkbox" @change="selected = $event.target.checked ? {{ $users->pluck('id') }} : []" class="w-4 h-4 rounded"></th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">ID</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">姓名</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">Email</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">角色</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">學校</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">允許類別</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">狀態</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">最後登入</th>
            <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">操作</th>
        </tr></thead>
        <tbody>
        @forelse($users as $u)
        <tr class="border-t border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800/50">
            <td class="px-3 py-3"><input type="checkbox" :value="{{ $u->id }}" x-model.number="selected" class="w-4 h-4 rounded"></td>
            <td class="px-4 py-3 text-gray-500">{{ $u->id }}</td>
            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
                {{ $u->name }}
                @if($u->force_password_change)<span class="ml-1 text-xs text-amber-600" title="需變更密碼">*</span>@endif
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ $u->email }}</td>
            <td class="px-4 py-3"><span class="px-2 py-0.5 text-xs rounded-full font-bold {{ $roleBadge($u->role->slug ?? '') }}">{{ $u->role->name ?? '-' }}</span></td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">{{ $u->school->name ?? '-' }}</td>
            <td class="px-4 py-3 text-xs">
                @if($u->examCategories->isEmpty())
                    <span class="text-gray-400">不限</span>
                @else
                    <div class="flex flex-wrap gap-1">
                        @foreach($u->examCategories->take(3) as $cat)
                            <span class="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400 rounded text-xs">{{ $cat->name }}</span>
                        @endforeach
                        @if($u->examCategories->count() > 3)
                            <span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 rounded text-xs">+{{ $u->examCategories->count() - 3 }}</span>
                        @endif
                    </div>
                @endif
            </td>
            <td class="px-4 py-3">
                @if($u->isLockedOut())
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">鎖定</span>
                @elseif(!$u->is_active)
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400">停用</span>
                @elseif($u->isAccountExpired())
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">到期</span>
                @elseif($u->password_expired_disabled)
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">密碼逾期</span>
                @else
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">啟用</span>
                @endif
            </td>
            <td class="px-4 py-3 text-gray-500 text-xs">{{ $u->last_login_at ? $u->last_login_at->format('m/d H:i') : '從未' }}</td>
            <td class="px-4 py-3">
                <div class="flex gap-2">
                    <a href="{{ route('admin.users.edit', $u) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">編輯</a>
                    @if($u->id !== auth()->id())
                    <form action="{{ route('admin.users.destroy', $u) }}" method="POST" onsubmit="return confirm('確定刪除此帳號？')">@csrf @method('DELETE')<button class="text-red-600 hover:text-red-800 text-sm font-medium">刪除</button></form>
                    @endif
                </div>
            </td>
        </tr>
        @empty
        <tr><td colspan="10" class="px-4 py-8 text-center text-gray-500">尚無帳號</td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
</div>
<div class="mt-4">@include('components.pagination-bar', ['paginator' => $users])</div>
@endsection