@extends('layouts.admin')
@section('title','Collections')
@section('content')
@php
  $columns = [
    'collection' => 'Collection',
    'type' => 'Type',
    'products' => 'Products',
    'status' => 'Status',
    'flags' => 'Flags',
    'updated' => 'Updated',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace(['_', '-'], ' ', $v));
  $statusTone = fn ($c) => match (true) {
      ($c->status ?? 'active') === 'archived' => 'muted',
      ! $c->published || ($c->status ?? '') === 'draft' => 'warning',
      default => 'success',
  };
  $statusLabel = fn ($c) => match (true) {
      ($c->status ?? 'active') === 'archived' => 'Archived',
      ! $c->published || ($c->status ?? '') === 'draft' => 'Draft',
      default => 'Published',
  };
  $activeChips = collect([
      'status' => request('status'),
      'type' => request('type'),
      'sort' => request('sort') && request('sort') !== 'title' ? request('sort') : null,
  ])->filter();
@endphp

<x-admin.page
    title="Collections"
    subtitle="Merchandising command center — manual picks, smart rules, storefront publishing, and SEO for every product group."
>
    <x-slot:actions>
        <a href="{{ route('admin.collections.index', ['status' => 'smart']) }}" class="admin-btn">
            <i data-lucide="sparkles" class="h-3.5 w-3.5"></i>
            Smart ({{ number_format($stats['smart']) }})
        </a>
        <a href="{{ route('admin.collections.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i>
            New collection
        </a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.collections.index') }}" class="order-ops-stat {{ ! request()->hasAny(['status','type']) ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Total</span>
            <span class="order-ops-stat-value">{{ number_format($stats['total']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['products_mapped']) }} products mapped</span>
        </a>
        <a href="{{ route('admin.collections.index', ['status' => 'published']) }}" class="order-ops-stat {{ request('status') === 'published' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Published</span>
            <span class="order-ops-stat-value">{{ number_format($stats['published']) }}</span>
            <span class="order-ops-stat-meta">Live on Online Store</span>
        </a>
        <a href="{{ route('admin.collections.index', ['status' => 'manual']) }}" class="order-ops-stat {{ request('status') === 'manual' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Manual</span>
            <span class="order-ops-stat-value">{{ number_format($stats['manual']) }}</span>
            <span class="order-ops-stat-meta">Curated product lists</span>
        </a>
        <a href="{{ route('admin.collections.index', ['status' => 'smart']) }}" class="order-ops-stat {{ request('status') === 'smart' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Smart</span>
            <span class="order-ops-stat-value">{{ number_format($stats['smart']) }}</span>
            <span class="order-ops-stat-meta">Rule-driven membership</span>
        </a>
        <a href="{{ route('admin.collections.index', ['status' => 'empty']) }}" class="order-ops-stat {{ request('status') === 'empty' ? 'is-active tone-warning' : 'tone-warning' }}">
            <span class="order-ops-stat-label">Empty</span>
            <span class="order-ops-stat-value">{{ number_format($stats['empty']) }}</span>
            <span class="order-ops-stat-meta">No products yet</span>
        </a>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'Published', 'params' => ['status' => 'published']],
            ['label' => 'Draft', 'params' => ['status' => 'draft']],
            ['label' => 'Manual', 'params' => ['status' => 'manual']],
            ['label' => 'Smart', 'params' => ['status' => 'smart']],
            ['label' => 'Featured', 'params' => ['status' => 'featured']],
            ['label' => 'Empty', 'params' => ['status' => 'empty']],
        ] as $chip)
            @php
                $isActive = collect($chip['params'])->every(fn ($v, $k) => request($k) === $v)
                    && (empty($chip['params']) ? ! request()->hasAny(['status', 'type']) : true);
            @endphp
            <a href="{{ route('admin.collections.index', $chip['params']) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.collections.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    <x-admin.advanced-table
        id="collections"
        :search-url="route('admin.collections.index')"
        search-placeholder="Search title, handle, description…"
        :columns="$columns"
        :filters-open="$activeChips->isNotEmpty()"
    >
        <x-slot:filters>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-status">Status</label>
                <div class="admin-select-wrap">
                    <select id="filter-status" name="status" form="collections-filter" class="admin-select" onchange="document.getElementById('collections-filter').submit()">
                        <option value="">Any</option>
                        @foreach(['published','draft','manual','smart','featured','empty','active','archived'] as $status)
                            <option value="{{ $status }}" @selected(request('status') === $status)>{{ $label($status) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-type">Type</label>
                <div class="admin-select-wrap">
                    <select id="filter-type" name="type" form="collections-filter" class="admin-select" onchange="document.getElementById('collections-filter').submit()">
                        <option value="">Any</option>
                        <option value="manual" @selected(request('type') === 'manual')>Manual</option>
                        <option value="smart" @selected(request('type') === 'smart')>Smart</option>
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-sort">Sort</label>
                <div class="admin-select-wrap">
                    <select id="filter-sort" name="sort" form="collections-filter" class="admin-select" onchange="document.getElementById('collections-filter').submit()">
                        <option value="title" @selected(request('sort', 'title') === 'title')>Title A–Z</option>
                        <option value="products_desc" @selected(request('sort') === 'products_desc')>Most products</option>
                        <option value="newest" @selected(request('sort') === 'newest')>Newest</option>
                        <option value="oldest" @selected(request('sort') === 'oldest')>Oldest</option>
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="flex items-end">
                <a href="{{ route('admin.collections.index') }}" class="admin-btn w-full justify-center">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i> Clear
                </a>
            </div>
        </x-slot:filters>

        <x-slot:bulk>
            <span class="text-xs text-[#6d7175]">Bulk publish, feature, or archive selected collections.</span>
            <select name="action" form="collections-bulk-form" class="admin-input w-40">
                <option value="publish">Publish</option>
                <option value="unpublish">Unpublish</option>
                <option value="feature">Feature</option>
                <option value="unfeature">Unfeature</option>
                <option value="draft">Mark draft</option>
                <option value="archive">Archive</option>
            </select>
            <button type="submit" form="collections-bulk-form" class="admin-btn admin-btn-primary">Apply</button>
        </x-slot:bulk>

        <thead>
            <tr>
                <th class="w-10"><input type="checkbox" data-collections-check-all aria-label="Select all"></th>
                <th data-col="collection">Collection</th>
                <th data-col="type">Type</th>
                <th data-col="products">Products</th>
                <th data-col="status">Status</th>
                <th data-col="flags">Flags</th>
                <th data-col="updated">Updated</th>
                <th data-col="actions"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($collections as $collection)
                <tr>
                    <td>
                        <input type="checkbox" name="ids[]" value="{{ $collection->id }}" form="collections-bulk-form" data-collections-row>
                    </td>
                    <td data-col="collection">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 shrink-0 rounded-lg bg-[#f6f6f7] bg-cover bg-center" @if($collection->imageUrl()) style="background-image:url('{{ $collection->imageUrl() }}')" @endif></div>
                            <div>
                                <div class="font-medium text-[#202223]">{{ $collection->title }}</div>
                                <div class="text-xs text-[#8c9196]">/collections/{{ $collection->handle }}</div>
                            </div>
                        </div>
                    </td>
                    <td data-col="type">
                        <x-admin.badge :tone="$collection->type === 'smart' ? 'info' : 'muted'">{{ $label($collection->type) }}</x-admin.badge>
                        @if($collection->type === 'smart')
                            <div class="mt-1 text-[11px] text-[#8c9196]">{{ $collection->rules_count }} rule{{ $collection->rules_count === 1 ? '' : 's' }}</div>
                        @endif
                    </td>
                    <td data-col="products" class="font-semibold">{{ number_format($collection->products_count) }}</td>
                    <td data-col="status">
                        <x-admin.badge :tone="$statusTone($collection)">{{ $statusLabel($collection) }}</x-admin.badge>
                    </td>
                    <td data-col="flags">
                        <div class="flex flex-wrap gap-1">
                            @if($collection->featured)<x-admin.badge tone="info">Featured</x-admin.badge>@endif
                            @if($collection->show_in_nav)<x-admin.badge tone="muted">Nav</x-admin.badge>@endif
                        </div>
                    </td>
                    <td data-col="updated" class="text-xs text-[#6d7175]">{{ $collection->updated_at?->diffForHumans() }}</td>
                    <td data-col="actions" class="text-right">
                        <div class="inline-flex flex-wrap justify-end gap-2">
                            <a href="{{ route('admin.collections.edit', $collection) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Open</a>
                            @if($collection->published)
                                <a href="{{ $collection->storefrontUrl() }}" target="_blank" class="text-xs font-medium text-[#202223] underline">View</a>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="p-10 text-center text-sm text-[#8c9196]">No collections match these filters.</td>
                </tr>
            @endforelse
        </tbody>
    </x-admin.advanced-table>

    <form id="collections-filter" method="get" action="{{ route('admin.collections.index') }}" class="hidden">
        @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
        @endif
    </form>
    <form id="collections-bulk-form" method="post" action="{{ route('admin.collections.bulk') }}" class="hidden">
        @csrf
    </form>

    <div class="mt-4">{{ $collections->links() }}</div>
</x-admin.page>

<script>
(() => {
  const all = document.querySelector('[data-collections-check-all]');
  if (!all) return;
  all.addEventListener('change', () => {
    document.querySelectorAll('[data-collections-row]').forEach((el) => { el.checked = all.checked; });
  });
})();
</script>
@endsection