@extends('storefront.layout')

@section('title', $activeCategory['label'] ?? 'Wholesale Catalog')
@section('description', 'See current Vida Mansa wholesale pricing, check availability, and build your order online.')

@php
    /** @var \App\Services\Catalog\CategoryResolver $categoryResolver */
    $facets = ($filters['category'] ?? '') !== ''
        ? $categoryResolver->facetsFor($filters['category'])
        : [];
    $hasActiveFilter = ($filters['search'] ?? '') !== ''
        || ($filters['vendor'] ?? '') !== ''
        || ($filters['category'] ?? '') !== ''
        || ($filters['subcategory'] ?? '') !== ''
        || ($filters['volume'] ?? '') !== ''
        || ($filters['sort'] ?? 'best_selling') !== 'best_selling';
@endphp

@section('content')
<section class="max-w-7xl mx-auto px-6 lg:px-8 py-12">

    {{-- Breadcrumb / header --}}
    <div class="mb-6">
        <nav class="text-xs text-stone-500 mb-2" aria-label="Breadcrumb">
            <a href="{{ route('storefront.catalog') }}" class="hover:text-stone-900">Catalog</a>
            @if ($activeCategory)
                <span class="mx-1.5 text-stone-300">/</span>
                <a href="{{ route('storefront.catalog.category', ['category' => $activeCategory['slug']]) }}"
                   class="hover:text-stone-900">{{ $activeCategory['label'] }}</a>
            @endif
            @if ($activeSubcategory)
                <span class="mx-1.5 text-stone-300">/</span>
                <span class="text-stone-700">{{ $activeSubcategory['label'] }}</span>
            @endif
        </nav>
        <div class="flex items-end justify-between gap-6 flex-wrap">
            <div>
                <h1 class="text-3xl font-semibold tracking-tight">
                    {{ $activeSubcategory['label'] ?? ($activeCategory['label'] ?? 'Wholesale Catalog') }}
                </h1>
                <p class="mt-2 text-stone-600">
                    See current wholesale pricing, check availability, and build your order. ${{ number_format($minimumOrder, 0) }} minimum.
                </p>
            </div>
        </div>
    </div>

    <div class="grid lg:grid-cols-[16rem_1fr] gap-8">

        {{-- =================== SIDEBAR =================== --}}
        <aside>
            {{-- Mobile toggle --}}
            <details class="lg:hidden rounded-2xl border border-stone-200 bg-white shadow-sm mb-4">
                <summary class="cursor-pointer select-none px-5 py-4 text-sm font-semibold text-stone-800 flex items-center justify-between list-none">
                    <span>Browse</span>
                    <svg class="w-4 h-4 text-stone-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>
                </summary>
                <div class="px-5 pb-5 pt-2" data-sidebar-mobile></div>
            </details>

            {{-- Desktop sidebar — single unified card --}}
            <div class="hidden lg:block rounded-2xl border border-stone-200 bg-white shadow-sm overflow-hidden" data-sidebar-desktop>

                {{-- Category nav --}}
                <nav class="p-2">
                    <a href="{{ route('storefront.catalog') }}"
                       class="flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-medium transition-colors
                              {{ ($filters['category'] ?? '') === ''
                                  ? 'bg-emerald-700 text-white'
                                  : 'text-stone-600 hover:bg-stone-100 hover:text-stone-900' }}">
                        <span>All products</span>
                        <span class="text-xs px-2 py-0.5 rounded-full
                            {{ ($filters['category'] ?? '') === '' ? 'bg-white/20 text-white' : 'bg-stone-100 text-stone-500' }}">
                            {{ array_sum($categoryCounts) }}
                        </span>
                    </a>

                    @foreach ($categoryResolver->categories() as $cat)
                        @php
                            $isActive = ($filters['category'] ?? '') === $cat['slug'];
                            $count = $categoryCounts[$cat['slug']] ?? 0;
                            $subs = $categoryResolver->subcategoriesFor($cat['slug']);
                        @endphp

                        <div class="mt-0.5">
                            <a href="{{ route('storefront.catalog.category', ['category' => $cat['slug']]) }}"
                               class="flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-medium transition-colors
                                      {{ $isActive
                                          ? 'bg-emerald-700 text-white'
                                          : 'text-stone-600 hover:bg-stone-100 hover:text-stone-900' }}">
                                <span>{{ $cat['label'] }}</span>
                                <span class="text-xs px-2 py-0.5 rounded-full
                                    {{ $isActive ? 'bg-white/20 text-white' : 'bg-stone-100 text-stone-500' }}">
                                    {{ $count }}
                                </span>
                            </a>

                            {{-- Subcategories — only when this category is active --}}
                            @if ($isActive && ! empty($subs))
                                <div class="mt-1 ml-3 pl-3 border-l-2 border-emerald-200 space-y-0.5 mb-1">
                                    @foreach ($subs as $sub)
                                        @php
                                            $subActive = ($filters['subcategory'] ?? '') === $sub['slug'];
                                            $subCount = $subcategoryCounts[$sub['slug']] ?? 0;
                                        @endphp
                                        <a href="{{ route('storefront.catalog.category', ['category' => $cat['slug'], 'subcategory' => $sub['slug']]) }}"
                                           class="flex items-center justify-between px-3 py-2 rounded-lg text-xs transition-colors
                                                  {{ $subActive
                                                      ? 'bg-emerald-50 text-emerald-800 font-semibold'
                                                      : 'text-stone-500 hover:bg-stone-100 hover:text-stone-800' }}">
                                            <span>{{ $sub['label'] }}</span>
                                            <span class="text-[11px] text-stone-400">{{ $subCount }}</span>
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endforeach
                </nav>

                {{-- Facets — inline within the same card, separated by a rule --}}
                @if (! empty($facets))
                    <div class="border-t border-stone-100 px-5 py-4 space-y-4">
                        @foreach ($facets as $facetKey => $options)
                            <div>
                                <p class="text-[11px] uppercase tracking-widest text-stone-400 font-bold mb-3 capitalize">{{ $facetKey }}</p>
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($options as $opt)
                                        @php
                                            $isSelected = (string) ($filters[$facetKey] ?? '') === $opt['value'];
                                            $params = ['category' => $filters['category']];
                                            if (($filters['subcategory'] ?? '') !== '') {
                                                $params['subcategory'] = $filters['subcategory'];
                                            }
                                            $href = route('storefront.catalog.category', $params)
                                                . ($isSelected ? '' : '?' . http_build_query([$facetKey => $opt['value']]));
                                        @endphp
                                        <a href="{{ $href }}"
                                           class="inline-flex items-center text-xs px-3 py-1.5 rounded-full border transition-colors
                                                  {{ $isSelected
                                                      ? 'bg-emerald-700 text-white border-emerald-700'
                                                      : 'bg-white text-stone-600 border-stone-200 hover:border-emerald-400 hover:text-emerald-800' }}">
                                            {{ $opt['label'] }}
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </aside>

        {{-- =================== MAIN =================== --}}
        <div>
            {{-- Search + sort form --}}
            <form method="GET" action="{{ ($filters['category'] ?? '') !== ''
                    ? route('storefront.catalog.category', array_filter([
                        'category' => $filters['category'],
                        'subcategory' => ($filters['subcategory'] ?? '') !== '' ? $filters['subcategory'] : null,
                    ]))
                    : route('storefront.catalog') }}"
                  class="mb-6 grid sm:grid-cols-12 gap-3 items-end">
                <div class="sm:col-span-6">
                    <label class="block text-xs font-medium text-stone-600 mb-1">Search</label>
                    <input type="text" name="q" value="{{ $filters['search'] }}" placeholder="Name, SKU or product type"
                           class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none">
                </div>
                <div class="sm:col-span-3">
                    <label class="block text-xs font-medium text-stone-600 mb-1">Brand</label>
                    <select name="vendor" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none">
                        <option value="">All brands</option>
                        @foreach ($vendors as $v)
                            <option value="{{ $v }}" @selected($filters['vendor'] === $v)>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-3">
                    <label class="block text-xs font-medium text-stone-600 mb-1">Sort</label>
                    <select name="sort" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none">
                        <option value="best_selling" @selected($filters['sort'] === 'best_selling')>Best sellers</option>
                        <option value="title" @selected($filters['sort'] === 'title')>A → Z</option>
                        <option value="newest" @selected($filters['sort'] === 'newest')>Newest</option>
                        <option value="updated" @selected($filters['sort'] === 'updated')>Recently updated</option>
                    </select>
                </div>

                {{-- Preserve active facet so search keeps the filter --}}
                @if (($filters['volume'] ?? '') !== '')
                    <input type="hidden" name="volume" value="{{ $filters['volume'] }}">
                @endif

                <div class="sm:col-span-12 flex gap-2">
                    <button class="rounded-lg bg-stone-900 text-white px-5 py-2.5 text-sm font-medium hover:bg-stone-700 transition shadow-sm">Apply</button>
                    @if ($hasActiveFilter)
                        <a href="{{ route('storefront.catalog') }}" class="inline-flex items-center text-sm text-stone-500 hover:text-stone-900 px-2 transition">Clear all</a>
                    @endif
                </div>
            </form>

            {{-- Active facet chips --}}
            @if (($filters['volume'] ?? '') !== '')
                <div class="mb-4 flex flex-wrap gap-2 text-xs">
                    <span class="text-stone-500">Active filters:</span>
                    @php
                        $clearParams = ['category' => $filters['category']];
                        if (($filters['subcategory'] ?? '') !== '') {
                            $clearParams['subcategory'] = $filters['subcategory'];
                        }
                    @endphp
                    <a href="{{ route('storefront.catalog.category', $clearParams) }}"
                       class="inline-flex items-center gap-1 bg-emerald-50 text-emerald-800 ring-1 ring-emerald-200 px-2.5 py-1 rounded-full hover:bg-emerald-100">
                        Volume: {{ $filters['volume'] }}
                        <span aria-hidden="true">×</span>
                    </a>
                </div>
            @endif

            @if ($products->isEmpty())
                <div class="rounded-xl border border-dashed border-stone-300 p-12 text-center text-stone-500">
                    No products match your filters.
                </div>
            @else
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($products as $p)
                        @php
                            $price = $pricePresenter->forProduct($p, $customer);
                            $stockStatus = $catalogStockPresenter->forProduct($p);
                        @endphp
                        <a href="{{ route('storefront.product', ['handle' => $p->handle]) }}"
                           class="group flex flex-col overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm transition duration-300 hover:-translate-y-0.5 hover:border-emerald-200 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">
                            <div class="relative aspect-square bg-stone-100 flex items-center justify-center text-stone-400 text-xs overflow-hidden">
                                @if ($p->image_url)
                                    <img src="{{ $p->image_url }}" alt="{{ $p->title }}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
                                @else
                                    [ image ]
                                @endif
                                @if ($stockStatus)
                                    <span class="absolute left-3 top-3 inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold shadow-sm ring-1 ring-inset {{ $stockStatus->badgeClass() }}">
                                        {{ $stockStatus->label() }}
                                    </span>
                                @endif
                            </div>
                            <div class="p-5 flex-1 flex flex-col gap-2">
                                <div class="text-xs text-stone-500 uppercase tracking-wide">{{ $p->vendor ?? 'Vida Mansa' }}</div>
                                <div class="font-medium text-stone-900 group-hover:text-emerald-800 line-clamp-2">{{ $p->title }}</div>

                                <div class="mt-auto flex items-end justify-between gap-3 pt-4">
                                    <div>
                                        <div class="text-[10px] font-semibold uppercase tracking-[0.18em] text-stone-400">Wholesale price</div>
                                        <div class="mt-1 text-xl font-semibold tracking-tight text-stone-950">
                                            {{ $price?->from() ?? 'Price unavailable' }}
                                        </div>
                                    </div>
                                    <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-emerald-700 transition group-hover:bg-emerald-700 group-hover:text-white" aria-hidden="true">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-10">{{ $products->links() }}</div>
            @endif
        </div>
    </div>
</section>

{{-- Mirror desktop sidebar into the mobile <details> drawer on load --}}
<script>
    (function () {
        var src = document.querySelector('[data-sidebar-desktop]');
        var dst = document.querySelector('[data-sidebar-mobile]');
        if (src && dst) {
            var clone = src.cloneNode(true);
            clone.classList.remove('hidden');
            clone.classList.add('block');
            dst.appendChild(clone);
        }
    })();
</script>
@endsection