@extends('layouts.admin')
@section('title','Categories')
@section('content')
@php
  $columns = [
    'category' => 'Category',
    'parent' => 'Parent',
    'products' => 'Products',
    'children' => 'Children',
    'status' => 'Status',
    'flags' => 'Flags',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace('_', ' ', $v));
  $statusTone = fn ($c) => match (true) {
      $c->status === 'archived' => 'muted',
      ! $c->published || $c->status === 'draft' => 'warning',
      default => 'success',
  };
  $statusLabel = fn ($c) => match (true) {
      $c->status === 'archived' => 'Archived',
      ! $c->published || $c->status === 'draft' => 'Draft',
      default => 'Published',
  };
  $activeChips = collect([
      'status' => request('status'),
      'parent_id' => request('parent_id'),
      'sort' => request('sort') && request('sort') !== 'position' ? request('sort') : null,
  ])->filter();
@endphp

<x-admin.page
    title="Categories"
    subtitle="Taxonomy command center — nest categories, feature for navigation, map products, and publish clean storefront paths."
>
    <x-slot:actions>
        <a href="{{ route('admin.categories.index', ['status' => 'empty']) }}" class="admin-btn">
            <i data-lucide="folder-x" class="h-3.5 w-3.5"></i>
            Empty ({{ number_format($stats['empty']) }})
        </a>
        <a href="{{ route('admin.categories.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i>
            New category
        </a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.categories.index') }}" class="order-ops-stat {{ ! request('status') ? '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['roots']) }} root nodes</span>
        </a>
        <a href="{{ route('admin.categories.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 storefront</span>
        </a>
        <a href="{{ route('admin.categories.index', ['status' => 'draft']) }}" class="order-ops-stat {{ request('status') === 'draft' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Draft</span>
            <span class="order-ops-stat-value">{{ number_format($stats['draft']) }}</span>
            <span class="order-ops-stat-meta">Hidden / in progress</span>
        </a>
        <a href="{{ route('admin.categories.index', ['status' => 'featured']) }}" class="order-ops-stat {{ request('status') === 'featured' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Featured</span>
            <span class="order-ops-stat-value">{{ number_format($stats['featured']) }}</span>
            <span class="order-ops-stat-meta">Homepage / nav highlights</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Products mapped</span>
            <span class="order-ops-stat-value">{{ number_format($stats['products_mapped']) }}</span>
            <span class="order-ops-stat-meta">Unique catalogue links</span>
        </div>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'Published', 'params' => ['status' => 'published']],
            ['label' => 'Draft', 'params' => ['status' => 'draft']],
            ['label' => 'Roots', 'params' => ['status' => 'roots']],
            ['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', 'parent_id']) : true);
            @endphp
            <a href="{{ route('admin.categories.index', $chip['params']) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(16rem,.75fr)_minmax(0,1.6fr)] mb-5">
        <x-admin.card>
            <div class="mb-3 flex items-center justify-between gap-2">
                <h2 class="text-sm font-semibold text-[#202223]">Tree</h2>
                <span class="text-[11px] text-[#8c9196]">Nested hierarchy</span>
            </div>
            <ul class="category-tree" data-category-tree>
                @include('admin.categories.partials.tree-nodes', ['nodes' => $tree])
            </ul>
            @if($tree->isEmpty())
                <p class="py-6 text-center text-sm text-[#8c9196]">No categories yet.</p>
            @endif
        </x-admin.card>

        <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.categories.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
                </div>
            @endif

            <x-admin.advanced-table
                id="categories"
                :search-url="route('admin.categories.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="categories-filter" class="admin-select" onchange="document.getElementById('categories-filter').submit()">
                                <option value="">Any</option>
                                @foreach(['published','draft','active','archived','roots','featured','empty'] 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-parent">Parent</label>
                        <div class="admin-select-wrap">
                            <select id="filter-parent" name="parent_id" form="categories-filter" class="admin-select" onchange="document.getElementById('categories-filter').submit()">
                                <option value="">Any</option>
                                <option value="root" @selected(request('parent_id') === 'root')>Root only</option>
                                @foreach($parentOptions as $opt)
                                    <option value="{{ $opt['id'] }}" @selected((string) request('parent_id') === (string) $opt['id'])>{{ $opt['label'] }}</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-sort">Sort</label>
                        <div class="admin-select-wrap">
                            <select id="filter-sort" name="sort" form="categories-filter" class="admin-select" onchange="document.getElementById('categories-filter').submit()">
                                <option value="position" @selected(request('sort', 'position') === 'position')>Manual position</option>
                                <option value="title" @selected(request('sort') === '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>
                            </select>
                            <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                        </div>
                    </div>
                    <div class="flex items-end">
                        <a href="{{ route('admin.categories.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 categories.</span>
                    <select name="action" form="categories-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="categories-bulk-form" class="admin-btn admin-btn-primary">Apply</button>
                </x-slot:bulk>

                <thead>
                    <tr>
                        <th class="w-10"><input type="checkbox" data-categories-check-all aria-label="Select all"></th>
                        <th data-col="category">Category</th>
                        <th data-col="parent">Parent</th>
                        <th data-col="products">Products</th>
                        <th data-col="children">Children</th>
                        <th data-col="status">Status</th>
                        <th data-col="flags">Flags</th>
                        <th data-col="actions"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($categories as $category)
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" value="{{ $category->id }}" form="categories-bulk-form" data-categories-row>
                            </td>
                            <td data-col="category">
                                <div class="flex items-center gap-3">
                                    <div class="h-10 w-10 shrink-0 rounded-lg bg-[#f6f6f7] bg-cover bg-center" @if($category->imageUrl()) style="background-image:url('{{ $category->imageUrl() }}')" @endif></div>
                                    <div>
                                        <div class="font-medium text-[#202223]">{{ $category->title }}</div>
                                        <div class="text-xs text-[#8c9196]">/{{ $category->handle }}</div>
                                    </div>
                                </div>
                            </td>
                            <td data-col="parent" class="text-sm text-[#6d7175]">{{ $category->parent?->title ?: '—' }}</td>
                            <td data-col="products" class="font-semibold">{{ number_format($category->products_count) }}</td>
                            <td data-col="children">{{ number_format($category->children_count) }}</td>
                            <td data-col="status">
                                <x-admin.badge :tone="$statusTone($category)">{{ $statusLabel($category) }}</x-admin.badge>
                            </td>
                            <td data-col="flags" class="text-xs text-[#6d7175]">
                                <div class="flex flex-wrap gap-1">
                                    @if($category->featured)<x-admin.badge tone="info">Featured</x-admin.badge>@endif
                                    @if($category->show_in_nav)<x-admin.badge tone="muted">Nav</x-admin.badge>@endif
                                </div>
                            </td>
                            <td data-col="actions" class="text-right">
                                <a href="{{ route('admin.categories.edit', $category) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Open</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="p-10 text-center text-sm text-[#8c9196]">No categories match these filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-admin.advanced-table>

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

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

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