@extends('layouts.admin')
@section('title', '帳號資安總覽')
@section('content')

<!-- 統計卡片 -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
    @php $cards = [
        ['label' => '總帳號數', 'value' => $stats['total'], 'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z', 'color' => 'blue'],
        ['label' => '鎖定中', 'value' => $stats['locked'], 'icon' => 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z', 'color' => 'red'],
        ['label' => '密碼逾期停用', 'value' => $stats['pwd_expired'], 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', 'color' => 'amber'],
        ['label' => '帳號已到期', 'value' => $stats['account_expired'], 'icon' => 'M6 18L18 6M6 6l12 12', 'color' => 'orange'],
        ['label' => '從未登入', 'value' => $stats['never_login'], 'icon' => 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', 'color' => 'purple'],
    ]; @endphp
    @foreach($cards as $card)
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-{{ $card['color'] }}-100 dark:bg-{{ $card['color'] }}-900/30 flex items-center justify-center">
                <svg class="w-5 h-5 text-{{ $card['color'] }}-600 dark:text-{{ $card['color'] }}-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $card['icon'] }}"/></svg>
            </div>
            <div>
                <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $card['value'] }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">{{ $card['label'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- 預警資訊 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    @if($stats['pwd_expiring_soon'] > 0)
    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-5">
        <div class="flex items-center gap-2 mb-3">
            <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <h3 class="font-bold text-yellow-700 dark:text-yellow-300">密碼即將到期（{{ $stats['pwd_expiring_soon'] }} 人）</h3>
        </div>
        @foreach($pwdExpiringUsers as $u)
        <div class="flex justify-between items-center py-1.5 text-sm">
            <span class="text-yellow-800 dark:text-yellow-200">{{ $u->name }}（{{ $u->email }}）</span>
            <span class="text-xs text-yellow-600 dark:text-yellow-400">剩餘 {{ 90 - $u->passwordAgeDays() }} 天</span>
        </div>
        @endforeach
    </div>
    @endif

    @if($stats['account_expiring_soon'] > 0)
    <div class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-xl p-5">
        <div class="flex items-center gap-2 mb-3">
            <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <h3 class="font-bold text-orange-700 dark:text-orange-300">帳號即將到期（{{ $stats['account_expiring_soon'] }} 人）</h3>
        </div>
        @foreach($accountExpiringUsers as $u)
        <div class="flex justify-between items-center py-1.5 text-sm">
            <span class="text-orange-800 dark:text-orange-200">{{ $u->name }}（{{ $u->email }}）</span>
            <span class="text-xs text-orange-600 dark:text-orange-400">{{ $u->account_expires_at->format('Y-m-d') }}</span>
        </div>
        @endforeach
    </div>
    @endif
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- 鎖定帳號 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-800 flex justify-between items-center">
            <h3 class="font-bold text-gray-900 dark:text-white">鎖定中的帳號</h3>
            @if($lockedUsers->count() > 0)
            <form method="POST" action="{{ route('admin.users.bulk_unlock') }}">
                @csrf
                @foreach($lockedUsers as $u)<input type="hidden" name="user_ids[]" value="{{ $u->id }}">@endforeach
                <button type="submit" class="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700">全部解鎖</button>
            </form>
            @endif
        </div>
        <div class="p-5">
            @forelse($lockedUsers as $u)
            <div class="flex justify-between items-center py-2 {{ !$loop->last ? 'border-b border-gray-100 dark:border-slate-800' : '' }}">
                <div>
                    <div class="font-medium text-gray-900 dark:text-white text-sm">{{ $u->name }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $u->email }}</div>
                </div>
                <div class="text-right">
                    <div class="text-xs text-red-600 dark:text-red-400 font-medium">失敗 {{ $u->failed_login_attempts }} 次</div>
                    <div class="text-xs text-gray-500">解鎖於 {{ $u->locked_until->format('H:i') }}</div>
                </div>
            </div>
            @empty
            <p class="text-gray-500 dark:text-gray-400 text-sm text-center py-4">目前無鎖定帳號</p>
            @endforelse
        </div>
    </div>

    <!-- 近期登入失敗紀錄 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-800">
            <h3 class="font-bold text-gray-900 dark:text-white">近期登入失敗紀錄</h3>
        </div>
        <div class="p-5 max-h-96 overflow-y-auto">
            @forelse($recentFailedLogins as $log)
            <div class="flex justify-between items-start py-2 {{ !$loop->last ? 'border-b border-gray-100 dark:border-slate-800' : '' }}">
                <div>
                    <div class="text-sm text-gray-900 dark:text-white">{{ $log->user_name }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $log->description }}</div>
                </div>
                <div class="text-right flex-shrink-0 ml-3">
                    <div class="text-xs text-gray-500">{{ $log->created_at->format('m/d H:i') }}</div>
                    <div class="text-xs text-gray-400">{{ $log->ip_address }}</div>
                </div>
            </div>
            @empty
            <p class="text-gray-500 dark:text-gray-400 text-sm text-center py-4">近期無登入失敗紀錄</p>
            @endforelse
        </div>
    </div>
</div>

<!-- 待處理待辦 -->
<div class="mt-8 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5">
    <h3 class="font-bold text-gray-900 dark:text-white mb-4">待處理項目摘要</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="flex items-center gap-3 bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
            <div class="w-3 h-3 rounded-full bg-red-500"></div>
            <div>
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $stats['locked'] }} 個帳號被鎖定</div>
                <a href="{{ route('admin.users.index', ['status' => 'locked']) }}" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">前往處理</a>
            </div>
        </div>
        <div class="flex items-center gap-3 bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
            <div class="w-3 h-3 rounded-full bg-amber-500"></div>
            <div>
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $stats['pwd_expired'] }} 個密碼逾期</div>
                <a href="{{ route('admin.users.index', ['status' => 'pwd_expired']) }}" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">前往處理</a>
            </div>
        </div>
        <div class="flex items-center gap-3 bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
            <div class="w-3 h-3 rounded-full bg-orange-500"></div>
            <div>
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $stats['account_expired'] }} 個帳號到期</div>
                <a href="{{ route('admin.users.index', ['status' => 'expired']) }}" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">前往處理</a>
            </div>
        </div>
        <div class="flex items-center gap-3 bg-gray-50 dark:bg-slate-800 rounded-lg p-3">
            <div class="w-3 h-3 rounded-full bg-blue-500"></div>
            <div>
                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $stats['force_pwd_change'] }} 個待變更密碼</div>
                <span class="text-xs text-gray-500 dark:text-gray-400">首次登入時處理</span>
            </div>
        </div>
    </div>
</div>

<div class="mt-4 flex gap-3">
    <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 font-medium">返回帳號管理</a>
    <a href="{{ route('admin.activity-logs.index') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">查看完整操作日誌</a>
</div>
@endsection