@extends('layouts.admin')

@section('title', 'System Audit Trail')
@section('header_title', 'KYM Security & Workflow Audit Logs')

@section('header_badge')
    <span class="text-xs text-slate-500 font-medium">
        Total Recorded Events: <strong class="text-slate-800">{{ $logs->total() }}</strong>
    </span>
@endsection

@section('content')
<div class="space-y-6">

    <!-- Filter Bar -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <h3 class="text-base font-bold text-slate-800">Immutable Audit Trail</h3>
            <p class="text-xs text-slate-500">Every verification decision, photograph capture, document upload, and data reuse action is recorded.</p>
        </div>

        <form method="GET" action="{{ route('admin.audit_logs.index') }}" class="flex items-center gap-3">
            <select name="event_type" class="text-xs rounded-xl border border-slate-300 py-2 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                <option value="">All Event Categories</option>
                @foreach($eventTypes as $et)
                    <option value="{{ $et }}" {{ ($eventType ?? '') === $et ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $et)) }}</option>
                @endforeach
            </select>

            <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search action, actor, notes..." class="text-xs rounded-xl border border-slate-300 py-2 px-3 focus:ring-2 focus:ring-teal-500">

            <button type="submit" class="px-4 py-2 bg-navy-800 hover:bg-navy-900 text-white rounded-xl text-xs font-semibold transition">
                Filter Logs
            </button>
        </form>
    </div>

    <!-- Logs Table -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden" x-data="{ expanded: null }">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3 px-5">Timestamp</th>
                        <th class="py-3 px-4">Event Type</th>
                        <th class="py-3 px-4">Action</th>
                        <th class="py-3 px-4">Actor</th>
                        <th class="py-3 px-4">Target Member</th>
                        <th class="py-3 px-5">Description</th>
                        <th class="py-3 px-4 text-right">Details</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($logs as $log)
                        <tr class="hover:bg-slate-50/80 transition">
                            <td class="py-3.5 px-5 text-slate-500 font-mono whitespace-nowrap">
                                {{ $log->created_at->format('Y-m-d H:i:s') }}
                            </td>

                            <td class="py-3.5 px-4 font-mono font-semibold text-slate-700">
                                <span class="px-2 py-0.5 rounded bg-slate-100 border border-slate-200 text-[10px]">
                                    {{ $log->event_type }}
                                </span>
                            </td>

                            <td class="py-3.5 px-4 font-bold text-slate-900">
                                {{ str_replace('_', ' ', $log->action) }}
                            </td>

                            <td class="py-3.5 px-4">
                                <span class="font-semibold text-slate-800">{{ $log->actor_name }}</span>
                                <span class="text-[10px] text-slate-400 block capitalize">{{ str_replace('_', ' ', $log->actor_role) }}</span>
                            </td>

                            <td class="py-3.5 px-4">
                                @if($log->targetMember)
                                    <a href="{{ route('admin.members.show', $log->targetMember) }}" class="font-semibold text-teal-600 hover:text-teal-800">
                                        {{ $log->targetMember->full_name }}
                                    </a>
                                    <span class="text-[10px] text-slate-400 font-mono block">{{ $log->targetMember->member_code }}</span>
                                @else
                                    <span class="text-slate-400">—</span>
                                @endif
                            </td>

                            <td class="py-3.5 px-5 text-slate-700 max-w-sm">
                                {{ $log->description }}
                            </td>

                            <td class="py-3.5 px-4 text-right">
                                @if($log->metadata)
                                    <button type="button" @click="expanded = (expanded === {{ $log->id }} ? null : {{ $log->id }})" class="text-teal-600 hover:text-teal-800 font-bold underline">
                                        Metadata
                                    </button>
                                @else
                                    <span class="text-slate-300">—</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Metadata Row (Collapsible) -->
                        @if($log->metadata)
                            <tr x-show="expanded === {{ $log->id }}" class="bg-slate-900 text-slate-100" x-cloak>
                                <td colspan="7" class="p-4">
                                    <div class="space-y-1">
                                        <div class="flex items-center justify-between text-xs text-teal-400 pb-1 border-b border-slate-800">
                                            <span>Event Metadata Payload:</span>
                                            <span>IP: {{ $log->ip_address ?? 'N/A' }} • User-Agent: {{ Str::limit($log->user_agent, 60) }}</span>
                                        </div>
                                        <pre class="font-mono text-[11px] p-2 bg-slate-950 rounded-lg text-emerald-400 overflow-x-auto">{{ json_encode($log->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-slate-400">No audit logs matching search criteria.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
            <div class="px-6 py-4 border-t border-slate-200">
                {{ $logs->links() }}
            </div>
        @endif
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endpush