@extends('backend.layouts.app')

@section('title', 'Purge Cache')

@section('content')
    @include('backend.module._index-reset-button')
    @php
        $pageTitle = 'Purge Cache';
        $indexRoute = 'admin.purge-cache.index';
        $indexLabel = 'Purge Cache';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">

        <!-- Summary cards -->
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">

            <!-- App Cache -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">App Cache (Database)</p>
                        <h3 class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $appCache['total'] }}</h3>
                    </div>
                    <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-brand-50 dark:bg-brand-500/10">
                        <svg class="fill-brand-500 dark:fill-brand-400" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm-1 11a1 1 0 112 0 1 1 0 01-2 0zm1-9a1 1 0 00-1 1v4a1 1 0 102 0V5a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    </span>
                </div>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">{{ $appCache['active'] }} active · {{ $appCache['expired'] }} expired · prefix: <code>{{ $cachePrefix }}</code></p>
            </div>

            <!-- View Cache -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Compiled Views</p>
                        <h3 class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $viewCache['total'] }}</h3>
                    </div>
                    <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-orange-50 dark:bg-orange-500/10">
                        <svg class="fill-orange-500 dark:fill-orange-400" width="20" height="20" viewBox="0 0 20 20"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V8l-6-5H4zm10 2.5L14.5 7H14V5.5zM6 9h8v2H6V9zm0 4h8v2H6v-2z"/></svg>
                    </span>
                </div>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">storage/framework/views · {{ number_format($viewCache['size'] / 1024, 1) }} KB</p>
            </div>


            <!-- Site Mirror -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Site Mirror Files</p>
                        <h3 class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $siteMirror['dirs']->sum('total') }}</h3>
                    </div>
                    <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-purple-50 dark:bg-purple-500/10">
                        <svg class="fill-purple-500 dark:fill-purple-400" width="20" height="20" viewBox="0 0 20 20"><path d="M2 4a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4z"/></svg>
                    </span>
                </div>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">site-meta.json: {{ $siteMirror['meta_exists'] ? 'updated ' . $siteMirror['meta_modified'] : 'MISSING' }}</p>
            </div>

            <!-- Stale tmp -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Stale .tmp Files</p>
                        <h3 class="mt-1 text-2xl font-semibold {{ $staleTmp->count() > 0 ? 'text-error-500' : 'text-gray-800 dark:text-white/90' }}">{{ $staleTmp->count() }}</h3>
                    </div>
                    <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-error-50 dark:bg-error-500/10">
                        <svg class="fill-error-500 dark:fill-error-400" width="20" height="20" 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 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    </span>
                </div>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">bootstrap/cache/*.tmp — removed automatically on flush</p>
            </div>
        </div>

        <!-- Flush button -->
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
                <div class="min-w-0 flex-1">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Flush All Cache</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Will rebuild the site mirror (DB → storage), clear the app cache, clear compiled config/route/view caches, and remove stale .tmp files.
                    </p>
                </div>
                <div class="grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:w-auto lg:min-w-[360px]">
                    <a href="{{ route('admin.purge-cache.logs') }}"
                    target ="_blank"
                        class="inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-theme-xs transition hover:border-brand-300 hover:bg-gray-50 hover:text-brand-600 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-brand-500 dark:hover:bg-gray-700 dark:hover:text-brand-400">
                        <svg class="shrink-0 stroke-current" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
                        View Laravel Log
                    </a>
                    <form id="form-flush" method="POST" action="{{ route('admin.purge-cache.flush') }}" class="w-full">
                        @csrf
                        <button type="button" id="btn-flush"
                            class="inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-lg bg-error-500 px-4 py-2.5 text-sm font-semibold text-white shadow-theme-xs transition hover:bg-error-600 focus:outline-none focus:ring-3 focus:ring-error-500/20">
                            <svg class="shrink-0 stroke-current" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z"/></svg>
                            Flush All Cache
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">

            <!-- App cache keys -->
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">App Cache Keys</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-100 text-center dark:border-gray-800">
                                <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">Key</th>
                                <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">Status</th>
                                <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">TTL</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($appCache['keys'] as $item)
                                <tr class="border-b border-gray-100 last:border-0 dark:border-gray-800">
                                    <td class="px-5 py-3 text-center text-gray-800 dark:text-white/90"><code>{{ $item['key'] }}</code></td>
                                    <td class="px-5 py-3 text-center">
                                        @if($item['expired'])
                                            <span class="inline-flex rounded-full bg-error-50 px-2.5 py-0.5 text-xs font-medium text-error-600 dark:bg-error-500/10">Expired</span>
                                        @else
                                            <span class="inline-flex rounded-full bg-success-50 px-2.5 py-0.5 text-xs font-medium text-success-600 dark:bg-success-500/10">Active</span>
                                        @endif
                                    </td>
                                    <td class="px-5 py-3 text-center text-gray-500 dark:text-gray-400">{{ $item['expired'] ? '-' : ($item['forever'] ? 'Never' : \Carbon\Carbon::now()->addSeconds($item['ttl'])->diffForHumans(null, true)) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">No cache entries.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    @if($appCache['more'] > 0)
                        <p class="px-5 py-3 text-center text-xs text-gray-400 dark:text-gray-500">+ {{ $appCache['more'] }} more keys...</p>
                    @endif
                </div>
            </div>

            <!-- Compiled caches & mirror -->
            <div class="space-y-6">

                <!-- Compiled framework caches — compact one-liner -->
                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4">
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Compiled Framework Caches</h3>
                        @php
                            $cachedCount = $compiledCaches->where('exists', true)->count() + $routeCacheFiles->count();
                            $totalCount = $compiledCaches->count() + $routeCacheFiles->count();
                        @endphp
                        <span class="inline-flex rounded-full {{ $cachedCount > 0 ? 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400' : 'bg-gray-100 text-gray-500 dark:bg-white/[0.03]' }} px-3 py-1 text-xs font-medium">
                            {{ $cachedCount }}/{{ $totalCount }} cached
                        </span>
                    </div>
                    <div class="flex flex-wrap gap-2 border-t border-gray-100 px-5 py-4 dark:border-gray-800">
                        @foreach($compiledCaches->merge($routeCacheFiles) as $file)
                            <span class="inline-flex items-center gap-1.5 rounded-lg border {{ $file['exists'] ? 'border-success-200 bg-success-50/50 dark:border-success-500/20 dark:bg-success-500/[0.06]' : 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-white/[0.02]' }} px-3 py-1.5 text-xs">
                                <span class="h-1.5 w-1.5 rounded-full {{ $file['exists'] ? 'bg-success-500' : 'bg-gray-400' }}"></span>
                                <code class="{{ $file['exists'] ? 'text-gray-800 dark:text-white/90' : 'text-gray-400 dark:text-gray-500' }}">{{ $file['name'] }}</code>
                                @if($file['exists'] && $file['modified'])
                                    <span class="text-gray-400 dark:text-gray-500">· {{ $file['modified'] }}</span>
                                @endif
                            </span>
                        @endforeach
                    </div>
                </div>

                <!-- Site mirror detail -->
                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Site Mirror (storage/app/private)</h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-100 text-center dark:border-gray-800">
                                    <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">Folder</th>
                                    <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">Files</th>
                                    <th class="px-5 py-3 text-center font-medium text-gray-500 dark:text-gray-400">Last Synced</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($siteMirror['dirs'] as $dir)
                                    <tr class="border-b border-gray-100 last:border-0 dark:border-gray-800">
                                        <td class="px-5 py-3 text-center text-gray-800 dark:text-white/90">{{ $dir['name'] }}</td>
                                        <td class="px-5 py-3 text-gray-500 dark:text-gray-400 text-center">{{ $dir['total'] }}</td>
                                        <td class="px-5 py-3 text-gray-500 dark:text-gray-400 text-center">{{ $dir['modified'] ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Stale tmp list -->
                @if($staleTmp->count() > 0)
                    <div class="rounded-2xl border border-error-200 bg-error-50/50 dark:border-error-500/20 dark:bg-error-500/[0.04]">
                        <div class="border-b border-error-100 px-5 py-4 dark:border-error-500/20">
                            <h3 class="text-base font-medium text-error-600 dark:text-error-400">Stale .tmp Files</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead>
                                    <tr class="border-b border-error-100 text-center dark:border-error-500/20">
                                        <th class="px-5 py-3 text-center font-medium text-error-600 dark:text-error-400">File</th>
                                        <th class="px-5 py-3 text-center font-medium text-error-600 dark:text-error-400">Size</th>
                                        <th class="px-5 py-3 text-center font-medium text-error-600 dark:text-error-400">Last Modified</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($staleTmp as $tmp)
                                        <tr class="border-b border-error-100 last:border-0 dark:border-error-500/20">
                                            <td class="px-5 py-3 text-center text-gray-800 dark:text-white/90"><code>{{ $tmp['name'] }}</code></td>
                                            <td class="px-5 py-3 text-gray-500 dark:text-gray-400 text-center">{{ number_format($tmp['size'] / 1024, 1) }} KB</td>
                                            <td class="px-5 py-3 text-gray-500 dark:text-gray-400 text-center">{{ $tmp['modified'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('btn-flush').addEventListener('click', function () {
            Swal.fire({
                title: 'Flush all caches?',
                html: 'The site mirror will be <strong>rebuilt</strong>, the app cache and compiled config/route/view caches will be <strong>cleared</strong>, and stale .tmp files will be removed.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d92d20',
                cancelButtonColor: '#667085',
                confirmButtonText: 'Yes, flush now!',
                cancelButtonText: 'Cancel'
            }).then(function (result) {
                if (result.isConfirmed) {
                    document.getElementById('form-flush').submit();
                }
            });
        });
    </script>
@endpush