@extends('layouts.dashboard')

@section('title', 'سجل التدقيق')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">📋 سجل التدقيق</h1>
            <p class="text-gray-600">تتبع جميع التغييرات والوصول للإعدادات الحساسة</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('audit-logs.export', request()->all()) }}" 
               class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition flex items-center gap-2">
                📥 تصدير CSV
            </a>
        </div>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-blue-500">
            <p class="text-gray-500 text-sm">إجمالي السجلات</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($stats['total']) }}</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-green-500">
            <p class="text-gray-500 text-sm">اليوم</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($stats['today']) }}</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-amber-500">
            <p class="text-gray-500 text-sm">تعديلات</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($stats['updates']) }}</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-red-500">
            <p class="text-gray-500 text-sm">حساسة</p>
            <p class="text-2xl font-bold text-gray-800">{{ number_format($stats['sensitive']) }}</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm p-4">
        <form method="GET" class="flex flex-wrap gap-4">
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="بحث..."
                   class="flex-1 min-w-[150px] rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
            
            <select name="action" class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
                <option value="">كل الإجراءات</option>
                <option value="view" {{ request('action') === 'view' ? 'selected' : '' }}>عرض</option>
                <option value="create" {{ request('action') === 'create' ? 'selected' : '' }}>إنشاء</option>
                <option value="update" {{ request('action') === 'update' ? 'selected' : '' }}>تعديل</option>
                <option value="delete" {{ request('action') === 'delete' ? 'selected' : '' }}>حذف</option>
                <option value="login" {{ request('action') === 'login' ? 'selected' : '' }}>تسجيل دخول</option>
            </select>

            <select name="model" class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
                <option value="">كل الأنواع</option>
                @foreach($modelTypes as $type)
                    <option value="{{ $type }}" {{ request('model') === $type ? 'selected' : '' }}>{{ $type }}</option>
                @endforeach
            </select>

            <label class="flex items-center gap-2 px-3 py-2 bg-red-50 rounded-lg cursor-pointer">
                <input type="checkbox" name="sensitive" value="1" {{ request('sensitive') ? 'checked' : '' }}
                       class="rounded border-red-300 text-red-600 focus:ring-red-500">
                <span class="text-red-700 text-sm">حساس فقط</span>
            </label>

            <input type="date" name="date_from" value="{{ request('date_from') }}"
                   class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
            
            <input type="date" name="date_to" value="{{ request('date_to') }}"
                   class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">

            <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition">
                🔍 بحث
            </button>

            @if(request()->hasAny(['search', 'action', 'model', 'sensitive', 'date_from', 'date_to']))
                <a href="{{ route('audit-logs.index') }}" class="text-gray-600 hover:text-gray-800 py-2">
                    ✕ إلغاء
                </a>
            @endif
        </form>
    </div>

    <!-- Logs Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">التاريخ</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">المستخدم</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">الإجراء</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">النوع</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">الوصف</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-gray-600">IP</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($logs as $log)
                        <tr class="hover:bg-gray-50 transition {{ $log->is_sensitive ? 'bg-red-50/50' : '' }}">
                            <td class="px-4 py-3 text-sm text-gray-500">
                                {{ $log->created_at->format('Y-m-d H:i') }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="text-gray-800">{{ $log->user_name }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 rounded-full text-xs font-medium {{ $log->action_color }}">
                                    {{ $log->action_label }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-600">
                                {{ $log->model_type }}
                                @if($log->model_name)
                                    <span class="text-gray-400">→</span>
                                    <span class="font-mono text-xs bg-gray-100 px-1 rounded">{{ $log->model_name }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600 max-w-xs truncate">
                                @if($log->is_sensitive)
                                    <span class="text-red-500">🔒</span>
                                @endif
                                {{ $log->description ?? '-' }}
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-400 font-mono">
                                {{ $log->ip_address ?? '-' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                                <span class="text-4xl block mb-2">📋</span>
                                لا توجد سجلات
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">
                {{ $logs->withQueryString()->links() }}
            </div>
        @endif
    </div>

    <!-- Danger Zone -->
    @if(auth()->user()->isAdmin())
    <div class="bg-red-50 border border-red-200 rounded-xl p-6">
        <h3 class="text-lg font-bold text-red-800 mb-2">⚠️ منطقة الخطر</h3>
        <p class="text-red-600 mb-4">حذف السجلات القديمة لا يمكن التراجع عنه</p>
        
        <form method="POST" action="{{ route('audit-logs.clear') }}" 
              onsubmit="return confirm('هل أنت متأكد من حذف السجلات القديمة؟')">
            @csrf
            <div class="flex items-center gap-4">
                <label class="text-red-700">حذف السجلات الأقدم من</label>
                <select name="days" class="rounded-lg border-red-300 focus:border-red-500 focus:ring-red-500">
                    <option value="30">30 يوم</option>
                    <option value="60">60 يوم</option>
                    <option value="90" selected>90 يوم</option>
                    <option value="180">180 يوم</option>
                    <option value="365">سنة</option>
                </select>
                <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition">
                    🗑️ حذف السجلات القديمة
                </button>
            </div>
        </form>
    </div>
    @endif
</div>
@endsection