@extends('layout')

@section('title', 'Activity Log')

@section('content')
<div class="px-4 py-4 sm:px-6 lg:px-8">

    {{-- Header --}}
    <div class="flex flex-col mb-8 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="mb-2 text-2xl font-bold text-gray-900 md:text-3xl">
                Activity Log
            </h1>
            <p class="text-sm text-gray-600 md:text-base">
                Monitor semua aktivitas sistem
            </p>
        </div>

        <button
            onclick="cleanOldLogs()"
            class="inline-flex items-center px-4 py-2 mt-4 text-sm font-medium text-orange-700 bg-orange-100 border border-orange-300 rounded-lg md:mt-0 hover:bg-orange-200">
            <i class="mr-2 fas fa-broom"></i>
            Bersihkan Log Lama
        </button>
    </div>

    {{-- Statistics --}}
    <div class="grid grid-cols-1 gap-4 mb-6 sm:grid-cols-2 lg:grid-cols-4">
        @php
            $cards = [
                ['Total Aktivitas', $statistics['total_activities'], 'blue', 'fa-history'],
                ['Hari Ini', $statistics['today_activities'], 'green', 'fa-calendar-day'],
                ['Registrasi User', $statistics['user_registrations'], 'purple', 'fa-user-plus'],
                ['Update Konten', $statistics['content_updates'], 'yellow', 'fa-edit'],
            ];
        @endphp

        @foreach($cards as [$label, $value, $color, $icon])
        <div class="p-4 bg-white border rounded-lg shadow-sm">
            <div class="flex items-center gap-4">
                <div class="p-3 bg-{{ $color }}-100 rounded-lg">
                    <i class="fas {{ $icon }} text-{{ $color }}-600"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-600">{{ $label }}</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $value }}</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Filter --}}
    <div class="p-4 mb-6 bg-white border rounded-lg shadow-sm">
        <form method="GET" class="flex flex-col gap-3 sm:flex-row sm:items-center">

            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="Cari aktivitas..."
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200">

            <select
                name="action"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg sm:w-48">
                <option value="">Semua Aksi</option>
                <option value="created" @selected($action === 'created')>Dibuat</option>
                <option value="updated" @selected($action === 'updated')>Diupdate</option>
                <option value="deleted" @selected($action === 'deleted')>Dihapus</option>
                <option value="login" @selected($action === 'login')>Login</option>
                <option value="user_created" @selected($action === 'user_created')>User Baru</option>
            </select>

            <button class="px-4 py-2 text-white bg-blue-600 rounded-lg">
                Filter
            </button>

            <a href="{{ route('activity_logs.index') }}"
               class="px-4 py-2 text-center text-gray-700 bg-gray-100 border rounded-lg">
                Reset
            </a>
        </form>
    </div>

    {{-- Desktop Table --}}
    <div class="hidden overflow-x-auto bg-white border rounded-lg shadow-sm md:block">
        <table class="min-w-full divide-y">
            <thead class="text-xs text-gray-500 uppercase bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left">User</th>
                    <th class="px-6 py-3 text-left">Aksi</th>
                    <th class="px-6 py-3 text-left">Deskripsi</th>
                    <th class="px-6 py-3 text-left">Waktu</th>
                    <th class="px-6 py-3 text-left">IP</th>
                    <th class="px-6 py-3 text-left">User Agent</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($activities as $activity)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <div class="font-medium">
                            {{ $activity->user->name ?? 'System' }}
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ $activity->user->email ?? '-' }}
                        </div>
                    </td>

                    <td class="px-6 py-4">
                        <span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded {{ $activity->action_color_class }}">
                            <i class="{{ $activity->action_icon }}"></i>
                            {{ str_replace('_', ' ', $activity->action) }}
                        </span>
                    </td>

                    <td class="px-6 py-4 text-sm">
                        {{ $activity->description }}
                    </td>

                    <td class="px-6 py-4 text-sm">
                        {{ $activity->created_at->format('d M Y H:i') }}
                    </td>

                    <td class="px-6 py-4 text-sm">
                        {{ $activity->ip_address ?? '-' }}
                    </td>

                    <td class="px-6 py-4 text-xs text-gray-600">
                        @if($activity->user_agent)
                            <button
                                type="button"
                                class="text-blue-600 underline ua-btn"
                                data-ua="{{ $activity->user_agent }}">
                                Lihat User Agent
                            </button>
                        @else
                            -
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="py-12 text-center text-gray-500">
                        Belum ada aktivitas
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Mobile Card --}}
    <div class="space-y-4 md:hidden">
        @foreach($activities as $activity)
            <div class="p-4 bg-white border rounded-lg shadow-sm">
                {{-- User --}}
                <div class="font-semibold">
                    {{ $activity->user->name ?? 'System' }}
                </div>
                <div class="text-xs text-gray-500">
                    {{ $activity->user->email ?? '-' }}
                </div>

                {{-- Action + Time --}}
                <div class="flex items-center justify-between mt-2 text-xs text-gray-600">
                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded {{ $activity->action_color_class }}">
                        <i class="{{ $activity->action_icon }}"></i>
                        {{ str_replace('_', ' ', $activity->action) }}
                    </span>
                    <span>{{ $activity->created_at->format('d M Y H:i') }}</span>
                </div>

                {{-- Description --}}
                <p class="mt-2 text-sm text-gray-700">
                    {{ $activity->description }}
                </p>

                {{-- IP --}}
                <p class="mt-2 text-xs text-gray-500">
                    <span class="font-medium">IP:</span>
                    {{ $activity->ip_address ?? '-' }}
                </p>

                {{-- User Agent --}}
                @if($activity->user_agent)
                    <button
                        type="button"
                        class="mt-2 text-xs text-blue-600 underline ua-btn"
                        data-ua="{{ $activity->user_agent }}">
                        Lihat User Agent
                    </button>
                @endif
            </div>
        @endforeach
    </div>

    <div id="uaModal" class="fixed inset-0 z-50 flex items-end justify-center hidden p-2 bg-black/40 sm:items-center sm:p-4">
        <div class="w-full sm:max-w-md bg-white rounded-t-xl sm:rounded-lg shadow-xl max-h-[85vh] sm:max-h-[70vh] flex flex-col">
            <div class="flex items-center justify-between px-4 py-2 border-b">
                <h3 class="text-sm font-semibold text-gray-800">
                    User Agent
                </h3>
            </div>

            <div class="p-3 overflow-y-auto text-xs text-gray-700 sm:p-4">
                <pre id="uaModalContent" class="leading-relaxed break-all whitespace-pre-wrap"></pre>
            </div>

            <div class="flex justify-end px-4 py-2 border-t">
                <button type="button" id="uaModalCloseBtn"
                        class="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    <div class="mt-6">
        @include('partials.pagination', ['data' => $activities])
    </div>
</div>

<script nonce="{{ $cspNonce }}">
    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('uaModal');
        const content = document.getElementById('uaModalContent');
        const closeBtns = [
            //document.getElementById('uaModalClose'),
            document.getElementById('uaModalCloseBtn'),
        ];

        // OPEN MODAL
        document.querySelectorAll('.ua-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                content.textContent = btn.dataset.ua || '-';
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            });
        });

        // CLOSE MODAL
        closeBtns.forEach(btn => {
            if (!btn) return;
            btn.addEventListener('click', () => {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        });

        // Klik backdrop untuk menutup
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        });
    });
    
    function cleanOldLogs() {
        if (confirm('Bersihkan log aktivitas yang lebih lama dari 90 hari?')) {
            fetch('{{ route("activity_logs.clean") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Log lama berhasil dibersihkan: ' + data.deleted + ' records dihapus');
                    location.reload();
                } else {
                    alert('Gagal membersihkan log');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat membersihkan log');
            });
        }
    }
</script>
@endsection