@extends('admin.layouts.app')
@section('title', __('admin.menu_engagement'))
@section('heading', __('admin.menu_engagement'))
@section('content')
<x-admin.filter-scope>
    <x-admin.page-header :title="__('admin.menu_engagement')" :show-filter="true" />

    <x-admin.filter-panel>
        <form method="get" class="admin-filter-form grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            <div class="sm:col-span-2">
                <label class="admin-label">{{ __('admin.search') }}</label>
                <input
                    type="search"
                    name="search"
                    value="{{ $search }}"
                    class="admin-input"
                    placeholder="{{ __('admin.engagement_search_placeholder') }}"
                />
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_content_type') }}</label>
                <select name="type" class="admin-input">
                    @foreach ($filters as $key => $label)
                        <option value="{{ $key }}" @selected($type === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_status') }}</label>
                <select name="engagement" class="admin-input">
                    <option value="any" @selected($engagement === 'any')>{{ __('admin.engagement_filter_any') }}</option>
                    <option value="active" @selected($engagement === 'active')>{{ __('admin.engagement_filter_active') }}</option>
                    <option value="with_views" @selected($engagement === 'with_views')>{{ __('admin.engagement_filter_with_views') }}</option>
                    <option value="with_likes" @selected($engagement === 'with_likes')>{{ __('admin.engagement_filter_with_likes') }}</option>
                    <option value="with_comments" @selected($engagement === 'with_comments')>{{ __('admin.engagement_filter_with_comments') }}</option>
                    <option value="quiet" @selected($engagement === 'quiet')>{{ __('admin.engagement_filter_quiet') }}</option>
                </select>
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_sort_by') }}</label>
                <select name="sort_by" class="admin-input">
                    <option value="views" @selected($sortBy === 'views')>{{ __('admin.engagement_views') }}</option>
                    <option value="likes_count" @selected($sortBy === 'likes_count')>{{ __('admin.engagement_likes') }}</option>
                    <option value="comments_count" @selected($sortBy === 'comments_count')>{{ __('admin.engagement_comments') }}</option>
                    <option value="id" @selected($sortBy === 'id')>{{ __('admin.engagement_sort_id') }}</option>
                </select>
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_sort_dir') }}</label>
                <select name="sort_dir" class="admin-input">
                    <option value="desc" @selected($sortDir === 'desc')>{{ __('admin.engagement_sort_desc') }}</option>
                    <option value="asc" @selected($sortDir === 'asc')>{{ __('admin.engagement_sort_asc') }}</option>
                </select>
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_limit') }}</label>
                <select name="limit" class="admin-input">
                    @foreach ([10, 20, 50, 100] as $n)
                        <option value="{{ $n }}" @selected($limit === $n)>{{ $n }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_min_views') }}</label>
                <input type="number" min="0" name="min_views" value="{{ $minViews }}" class="admin-input" placeholder="0" />
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_min_likes') }}</label>
                <input type="number" min="0" name="min_likes" value="{{ $minLikes }}" class="admin-input" placeholder="0" />
            </div>

            <div>
                <label class="admin-label">{{ __('admin.engagement_min_comments') }}</label>
                <input type="number" min="0" name="min_comments" value="{{ $minComments }}" class="admin-input" placeholder="0" />
            </div>

            <div class="flex flex-wrap items-end gap-2 sm:col-span-2 lg:col-span-3 xl:col-span-4">
                <button type="submit" class="admin-btn-primary">{{ __('admin.search') }}</button>
                <a href="{{ route('admin.engagement.index') }}" class="admin-btn-muted">{{ __('admin.cancel') }}</a>
            </div>
        </form>
    </x-admin.filter-panel>

    @php
        $hasAny = collect($sections)->contains(fn ($items) => $items->isNotEmpty());
    @endphp

    @forelse ($sections as $key => $items)
        @if ($items->isNotEmpty())
            <div class="admin-card mb-6">
                <h2 class="mb-4 text-lg font-bold">{{ $filters[$key] ?? __('admin.comment_type_'.$key) }}</h2>
                <div class="admin-table-wrap admin-table-wrap--responsive">
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th>{{ __('admin.name') }}</th>
                                <th>{{ __('admin.engagement_views') }}</th>
                                <th>{{ __('admin.engagement_likes') }}</th>
                                <th>{{ __('admin.engagement_comments') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td data-label="{{ __('admin.name') }}">{{ locale_field($item, 'title') ?: locale_field($item, 'name') ?: $item->id }}</td>
                                    <td data-label="{{ __('admin.engagement_views') }}">{{ number_format($item->views ?? 0) }}</td>
                                    <td data-label="{{ __('admin.engagement_likes') }}">{{ number_format($item->likes_count ?? 0) }}</td>
                                    <td data-label="{{ __('admin.engagement_comments') }}">{{ number_format($item->comments_count ?? 0) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    @empty
    @endforelse

    @unless ($hasAny)
        <div class="admin-card py-10 text-center text-slate-500">{{ __('admin.empty') }}</div>
    @endunless
</x-admin.filter-scope>
@endsection