@extends('dashboard.app')

@section('page_title', 'Emoji Catalog')
@section('page_subtitle', 'Manage emojis in database, then publish one frozen JSON snapshot when ready.')

@section('dashboard_content')
    @if (session('status'))
        <div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-200">
            {{ session('status') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 rounded-2xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-200">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-2xl glass-card p-5">
            <div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Catalog rows</div>
            <div class="mt-3 text-3xl font-semibold text-slate-900 dark:text-white">{{ number_format($totalRows ?? $items->total()) }}</div>
            <div class="mt-2 text-sm text-slate-600 dark:text-gray-400">Read from `emojis` table</div>
            @if (($filters['q'] ?? '') !== '')
                <div class="mt-1 text-xs text-slate-500 dark:text-gray-500">Filtered result: {{ number_format($items->total()) }}</div>
            @endif
        </div>
        <div class="rounded-2xl glass-card p-5">
            <div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active snapshot</div>
            <div class="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{{ $activeVersion ?: 'None' }}</div>
            <div class="mt-2 text-sm text-slate-600 dark:text-gray-400">{{ $activeVersion ? 'Published' : 'Not published yet' }}</div>
        </div>
        <div class="rounded-2xl glass-card p-5">
            <div class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Active file path</div>
            <div class="mt-3 text-sm font-mono text-slate-800 dark:text-gray-200 break-all">{{ $activePath ?: config('dewemoji.data_path') }}</div>
            <div class="mt-2 text-xs text-slate-500 dark:text-gray-500">Public search/API uses this dataset.</div>
        </div>
    </div>

    <div class="mt-8 rounded-2xl glass-card p-5">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <form method="GET" action="{{ route('dashboard.admin.catalog') }}" class="flex flex-wrap items-center gap-2">
                <input
                    type="text"
                    name="q"
                    value="{{ $filters['q'] ?? '' }}"
                    placeholder="Search slug, name, category, subcategory"
                    class="w-72 max-w-full rounded-xl border border-slate-200 dark:border-slate-700 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 bg-white dark:bg-slate-900"
                >
                <button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Search</button>
                <a href="{{ route('dashboard.admin.catalog') }}" class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Reset</a>
            </form>

            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('dashboard.admin.catalog.create') }}" class="rounded-xl bg-slate-900 dark:bg-white/10 border border-slate-900 dark:border-white/10 px-4 py-2 text-sm font-semibold text-white force-white dark:text-white hover:opacity-90">
                    Add Emoji
                </a>
                <form method="POST" action="{{ route('dashboard.admin.catalog.publish') }}">
                    @csrf
                    <button class="rounded-xl bg-brand-ocean px-4 py-2 text-sm font-semibold text-white force-white hover:opacity-90">Publish Frozen JSON</button>
                </form>
                <form method="POST" action="{{ route('dashboard.admin.catalog.import_json') }}">
                    @csrf
                    <button class="rounded-xl border border-slate-200 dark:border-white/10 px-3 py-2 text-xs text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-white/5">Import Current JSON (new only)</button>
                </form>
            </div>
        </div>

        <div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-900/80">
                    <tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400">
                        <th class="px-3 py-3">ID</th>
                        <th class="px-3 py-3">Emoji</th>
                        <th class="px-3 py-3">Slug</th>
                        <th class="px-3 py-3">Name</th>
                        <th class="px-3 py-3">Category</th>
                        <th class="px-3 py-3">Updated</th>
                        <th class="px-3 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($items as $item)
                        <tr class="border-t border-slate-200 dark:border-white/10 text-slate-800 dark:text-gray-200">
                            <td class="px-3 py-3">#{{ $item->emoji_id }}</td>
                            <td class="px-3 py-3">{{ $item->emoji ?: '⬚' }}</td>
                            <td class="px-3 py-3 font-mono text-xs">{{ $item->slug }}</td>
                            <td class="px-3 py-3">{{ $item->name }}</td>
                            <td class="px-3 py-3 text-slate-600 dark:text-gray-400">{{ $item->category }}</td>
                            <td class="px-3 py-3 text-xs text-slate-500 dark:text-gray-400">{{ $item->updated_at ? \Illuminate\Support\Carbon::parse($item->updated_at)->format('Y-m-d H:i') : '—' }}</td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('dashboard.admin.catalog.edit', ['emojiId' => $item->emoji_id]) }}" class="rounded-lg border border-slate-300 dark:border-white/10 px-3 py-1.5 text-xs text-slate-700 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">Edit</a>
                                    <form method="POST" action="{{ route('dashboard.admin.catalog.delete', $item->emoji_id) }}" onsubmit="return confirm('Delete this emoji and related public records?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="rounded-lg border border-red-300/50 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-500/20">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-3 py-6 text-center text-slate-500 dark:text-gray-400">
                                @if (($filters['q'] ?? '') !== '')
                                    No rows match "<span class="font-semibold text-slate-700 dark:text-gray-300">{{ $filters['q'] }}</span>".
                                @else
                                    No catalog rows in database.
                                @endif
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $items->links('vendor.pagination.dashboard') }}
        </div>
    </div>

    <div class="mt-8 rounded-2xl glass-card p-5">
        <div class="flex items-center justify-between gap-3">
            <div>
                <div class="text-xs uppercase tracking-[0.2em] text-slate-600 dark:text-gray-400 font-semibold">Snapshot Versions</div>
                <div class="mt-1 text-sm text-slate-700 dark:text-gray-300">Use this for quick rollback if latest publish is broken.</div>
            </div>
        </div>

        <div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-900/80">
                    <tr class="text-left text-xs uppercase tracking-[0.16em] text-slate-600 dark:text-gray-400">
                        <th class="px-3 py-3">Version</th>
                        <th class="px-3 py-3">File</th>
                        <th class="px-3 py-3">Updated</th>
                        <th class="px-3 py-3">Status</th>
                        <th class="px-3 py-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse (($snapshots ?? []) as $snapshot)
                        <tr class="border-t border-slate-200 dark:border-white/10 text-slate-900 dark:text-gray-200">
                            <td class="px-3 py-3 font-mono text-xs text-slate-800 dark:text-gray-100">{{ $snapshot['version'] }}</td>
                            <td class="px-3 py-3 font-mono text-xs text-slate-700 dark:text-gray-300">{{ $snapshot['name'] }}</td>
                            <td class="px-3 py-3 text-xs text-slate-700 dark:text-gray-300">
                                {{ $snapshot['modified_at'] > 0 ? \Illuminate\Support\Carbon::createFromTimestamp($snapshot['modified_at'])->format('Y-m-d H:i') : '—' }}
                            </td>
                            <td class="px-3 py-3">
                                @if ($snapshot['is_active'])
                                    <span class="rounded-full border border-emerald-400 bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-800 dark:border-emerald-300/40 dark:bg-emerald-500/20 dark:text-emerald-200">Active</span>
                                @else
                                    <span class="rounded-full border border-slate-300 dark:border-white/10 bg-slate-100 dark:bg-white/5 px-2 py-1 text-xs font-medium text-slate-700 dark:text-gray-300">Inactive</span>
                                @endif
                            </td>
                            <td class="px-3 py-3 text-right">
                                @if (!$snapshot['is_active'])
                                    <form method="POST" action="{{ route('dashboard.admin.catalog.snapshot.activate') }}" class="inline">
                                        @csrf
                                        <input type="hidden" name="snapshot" value="{{ $snapshot['name'] }}">
                                        <button class="rounded-lg border border-slate-300 dark:border-white/10 bg-white dark:bg-transparent px-3 py-1.5 text-xs font-medium text-slate-800 dark:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/10">
                                            Activate
                                        </button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-3 py-6 text-center text-slate-600 dark:text-gray-400">No snapshot files found yet. Publish once to create versioned snapshots.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection