@extends('admin.layout')
@section('title', 'Beveiligingslog detail')

@section('content')
<div class="p-6 max-w-4xl mx-auto space-y-6">

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.logs', ['tab' => 'security']) }}" class="text-sm text-indigo-600 hover:underline">← Beveiliginglogs</a>
    </div>

    @php
        $actionColors = [
            'ban'                   => 'bg-red-100 text-red-700',
            'suspend'               => 'bg-orange-100 text-orange-700',
            'unsuspend'             => 'bg-green-100 text-green-800',
            'role_change'           => 'bg-blue-100 text-blue-700',
            'premium_update'        => 'bg-indigo-100 text-indigo-700',
            'user_delete'           => 'bg-red-100 text-red-700',
            'subscription_grant'    => 'bg-violet-100 text-violet-700',
            'subscription_extend'   => 'bg-violet-100 text-violet-700',
            'subscription_revoke'   => 'bg-orange-100 text-orange-700',
            'subscription_trial'    => 'bg-yellow-100 text-yellow-700',
            'subscription_manual'   => 'bg-gray-100 text-gray-700',
        ];
    @endphp

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{-- Linkerkolom: actie & timing --}}
        <div class="bg-white border border-gray-100 rounded-lg p-5 space-y-4">
            <div>
                <div class="text-xs text-gray-400 mb-1">Actie</div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $actionColors[$log->action] ?? 'bg-gray-100 text-gray-600' }}">
                    {{ $log->action }}
                </span>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Datum/tijd</div>
                <div class="text-sm font-mono text-gray-700">{{ $log->created_at->format('d/m/Y H:i:s') }}</div>
                <div class="text-xs text-gray-400">{{ $log->created_at->diffForHumans() }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Uitgevoerd door (admin)</div>
                @if($log->admin)
                    <a href="{{ route('admin.users.show', $log->admin) }}" class="text-indigo-600 hover:underline text-sm font-medium">{{ $log->admin->name }}</a>
                    <div class="text-xs text-gray-400">{{ $log->admin->email }}</div>
                @else
                    <span class="text-gray-400 text-sm">Onbekend / verwijderd</span>
                @endif
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">IP-adres admin</div>
                <div class="text-sm font-mono text-gray-700">{{ $log->ip ?? '—' }}</div>
            </div>
        </div>

        {{-- Rechterkolom: doelgebruiker & wijzigingen --}}
        <div class="bg-white border border-gray-100 rounded-lg p-5 space-y-4">
            <div>
                <div class="text-xs text-gray-400 mb-1">Doelgebruiker</div>
                @if($log->targetUser)
                    <a href="{{ route('admin.users.show', $log->targetUser) }}" class="text-indigo-600 hover:underline text-sm font-medium">{{ $log->targetUser->name }}</a>
                    <div class="text-xs text-gray-400">{{ $log->targetUser->email }} · ID {{ $log->target_user_id }}</div>
                @elseif($log->target_name || $log->target_email)
                    <div class="text-sm text-gray-700">{{ $log->target_name ?? '—' }}</div>
                    <div class="text-xs text-gray-500">{{ $log->target_email }} (account verwijderd)</div>
                @else
                    <span class="text-gray-300 text-sm">—</span>
                @endif
            </div>
            @if($log->old_value !== null || $log->new_value !== null)
            <div>
                <div class="text-xs text-gray-400 mb-1">Wijziging</div>
                <div class="flex items-center gap-2 text-sm">
                    <span class="px-2 py-0.5 bg-gray-100 rounded text-gray-600 font-mono">{{ $log->old_value ?? '—' }}</span>
                    <span class="text-gray-400">→</span>
                    <span class="px-2 py-0.5 bg-indigo-50 rounded text-indigo-700 font-mono font-medium">{{ $log->new_value ?? '—' }}</span>
                </div>
            </div>
            @endif
            @if($log->note)
            <div>
                <div class="text-xs text-gray-400 mb-1">Opmerking / reden</div>
                <div class="text-sm text-gray-700 whitespace-pre-wrap">{{ $log->note }}</div>
            </div>
            @endif
        </div>
    </div>

    {{-- Meta --}}
    @if($log->meta)
    <div class="bg-white border border-gray-100 rounded-lg p-5">
        <div class="text-xs text-gray-400 mb-2">Meta / extra context</div>
        <pre class="text-xs text-gray-600 bg-gray-50 rounded p-3 overflow-x-auto">{{ json_encode($log->meta, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
    </div>
    @endif

</div>
@endsection