@php
    use App\Support\CatalogText;
    use Illuminate\Support\Str;
@endphp

{{--
    Public catalogue, grouped by category and collapsible.

    Each section opens with wire:click (not Alpine) on purpose: a category's
    services are requested from the server when it opens. With 5,500 services
    in the catalogue, an accordion that already held everything inside would
    be a page that takes ten seconds to exist just to save one click.
--}}
<div x-data="{ svc: null }">
    {{-- The network icon sprite doesn't live in the public layout, so the page
         that uses it brings it along. It goes INSIDE the component's root: a
         loose sibling turns the <svg> into Livewire's root and every wire:click
         below stops existing for the component. --}}
    @include('partials.social-icons')

    <div class="mb-7 text-center">
        <h1 class="text-3xl font-bold tracking-tight">{{ __('Services') }}</h1>
        <p class="mt-2 text-sm" style="color:var(--color-text-muted);">{{ __('Browse our catalogue by network and category.') }}</p>
    </div>

    {{-- Search box + quick jump --}}
    <div class="mb-6 flex flex-col gap-3 sm:flex-row">
        <div class="relative flex-1">
            <i data-lucide="search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-subtle);pointer-events:none;"></i>
            <input type="search" wire:model.live.debounce.400ms="search"
                   placeholder="{{ __('Search services by name or ID…') }}"
                   class="rf-input w-full" style="padding-left:36px;" autocomplete="off" data-lpignore="true">
        </div>
        <select wire:model.live="categoryId" class="rf-input sm:w-64">
            <option value="">{{ __('All categories') }}</option>
            @foreach ($jumpCategories as $cat)
                <option value="{{ $cat->id }}">{{ Str::limit(CatalogText::display($cat->name), 46) }}</option>
            @endforeach
        </select>
    </div>

    @if ($search !== '')
        <p class="mb-4 text-sm" style="color:var(--color-text-muted);">
            {{ trans_choice('{0}No category matches “:term”.|[1,*]:count categories match “:term”.', $categories->total(), ['count' => $categories->total(), 'term' => $search]) }}
        </p>
    @endif

    {{-- Category accordion --}}
    <div class="rf-cat-list">
        @forelse ($categories as $category)
            @php
                $isOpen  = in_array((int) $category->id, $openIds, true);
                $rows    = $servicesByCategory[$category->id] ?? collect();
                $catName = CatalogText::display($category->name);
                $net     = ($category->platform?->slug && $category->platform->slug !== 'other')
                            ? impulsa_net($category->platform->slug)
                            : detect_network_from_name($catName);
            @endphp

            <section class="rf-cat {{ $isOpen ? 'rf-cat-open' : '' }}" wire:key="cat-{{ $category->id }}">
                <button type="button" class="rf-cat-head" wire:click="toggle({{ $category->id }})"
                        aria-expanded="{{ $isOpen ? 'true' : 'false' }}">
                    <span class="rf-cat-badge" @if ($net) style="--net-color:var(--net-{{ $net['key'] }});" @endif>
                        @if ($net && $net['sprite'])
                            <svg aria-hidden="true" width="17" height="17"><use href="#si-{{ $net['key'] }}"></use></svg>
                        @else
                            <span class="rf-cat-badge-mono">{{ $net['mono'] ?? Str::upper(Str::substr($catName, 0, 1)) }}</span>
                        @endif
                    </span>

                    <span class="rf-cat-title">{{ $catName }}</span>

                    <span class="rf-cat-count">{{ trans_choice('{1}:count service|[2,*]:count services', $category->sellable_count, ['count' => number_format($category->sellable_count)]) }}</span>

                    <span class="rf-cat-spin" wire:loading wire:target="toggle({{ $category->id }})">
                        <i data-lucide="loader-2" style="width:15px;height:15px;"></i>
                    </span>

                    <i data-lucide="chevron-down" class="rf-cat-chevron" style="width:18px;height:18px;"></i>
                </button>

                @if ($isOpen)
                    <div class="rf-cat-body">
                        <div class="rf-cat-scroll">
                            <table class="rf-cat-table">
                                <thead>
                                    <tr>
                                        <th style="width:76px;">{{ __('ID') }}</th>
                                        <th>{{ __('Service') }}</th>
                                        <th style="width:120px;text-align:right;">{{ __('Rate / 1K') }}</th>
                                        <th style="width:96px;text-align:right;">{{ __('Min') }}</th>
                                        <th style="width:110px;text-align:right;">{{ __('Max') }}</th>
                                        <th style="width:88px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($rows as $svc)
                                        @php
                                            $svcName = CatalogText::display($svc->name);
                                            $svcData = \Illuminate\Support\Js::from([
                                                'id' => $svc->id,
                                                'name' => $svcName,
                                                'desc' => CatalogText::display($svc->description),
                                                'time' => $svc->average_time,
                                                'rate' => rate_money($svc->public_price ?? $svc->owner_price, $currency),
                                                'min' => number_format($svc->min),
                                                'max' => number_format($svc->max),
                                                'category' => $catName,
                                            ]);
                                        @endphp
                                        <tr wire:key="svc-{{ $svc->id }}">
                                            <td class="rf-mono rf-cat-id">{{ $svc->id }}</td>
                                            <td>
                                                <div class="rf-cat-svcname">{{ $svcName }}</div>
                                                <div class="rf-cat-flags">
                                                    @if ($svc->refill)<span class="rf-chip">{{ __('Refill') }}</span>@endif
                                                    @if ($svc->cancel)<span class="rf-chip">{{ __('Cancel') }}</span>@endif
                                                    @if ($svc->dripfeed)<span class="rf-chip">{{ __('Drip-feed') }}</span>@endif
                                                    @if ($svc->average_time)<span class="rf-chip">{{ $svc->average_time }}</span>@endif
                                                </div>
                                            </td>
                                            <td class="rf-mono rf-cat-rate">{{ rate_money($svc->public_price ?? $svc->owner_price, $currency) }}</td>
                                            <td class="rf-cat-num">{{ number_format($svc->min) }}</td>
                                            <td class="rf-cat-num">{{ number_format($svc->max) }}</td>
                                            <td style="text-align:right;">
                                                <button type="button" class="rf-cat-view" @click="svc = {{ $svcData }}">{{ __('View') }}</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if ($category->sellable_count > $rows->count())
                            <div class="rf-cat-more">
                                <button type="button" class="rf-btn rf-btn-secondary rf-btn-sm" wire:click="showAll({{ $category->id }})">
                                    {{ __('Show all :count services', ['count' => number_format($category->sellable_count)]) }}
                                </button>
                            </div>
                        @endif
                    </div>
                @endif
            </section>
        @empty
            <div class="rf-card" style="padding:48px 20px;text-align:center;">
                <i data-lucide="package" style="width:26px;height:26px;color:var(--color-text-subtle);"></i>
                <p class="mt-2 text-sm font-medium">{{ __('No services found') }}</p>
                <p class="text-sm" style="color:var(--color-text-subtle);">{{ __('Try another search term or clear the category filter.') }}</p>
            </div>
        @endforelse
    </div>

    @if ($categories->hasPages())
        <div class="mt-5">{{ $categories->links() }}</div>
    @endif

    {{-- Service detail card. Only closes with the X or Close: a click outside
         can't discard what the visitor was reading. --}}
    <div x-show="svc" x-cloak class="rf-cat-modal-backdrop">
        <div class="rf-cat-modal" @keydown.escape.window.prevent>
            <div class="rf-cat-modal-head">
                <div>
                    <div class="rf-cat-modal-cat" x-text="svc?.category"></div>
                    <h3 class="rf-cat-modal-title" x-text="svc?.name"></h3>
                </div>
                <button type="button" class="rf-icon-btn" @click="svc = null" aria-label="{{ __('Close') }}">
                    <i data-lucide="x" style="width:18px;height:18px;"></i>
                </button>
            </div>

            <div class="rf-cat-modal-grid">
                <div><span>{{ __('ID') }}</span><b class="rf-mono" x-text="svc?.id"></b></div>
                <div><span>{{ __('Rate / 1K') }}</span><b class="rf-mono" x-text="svc?.rate"></b></div>
                <div><span>{{ __('Min') }}</span><b class="rf-mono" x-text="svc?.min"></b></div>
                <div><span>{{ __('Max') }}</span><b class="rf-mono" x-text="svc?.max"></b></div>
                <div x-show="svc?.time"><span>{{ __('Average time') }}</span><b x-text="svc?.time"></b></div>
            </div>

            <p class="rf-cat-modal-desc" x-show="svc?.desc" x-text="svc?.desc"></p>
            <p class="rf-cat-modal-desc" x-show="!svc?.desc" style="opacity:.6;">{{ __('No description provided for this service.') }}</p>

            <div class="rf-cat-modal-foot">
                <button type="button" class="rf-btn rf-btn-secondary" @click="svc = null">{{ __('Close') }}</button>
                @guest
                    <a href="{{ route('register') }}" class="rf-btn rf-btn-primary">{{ __('Create account to order') }}</a>
                @else
                    <a :href="'{{ route('app.orders.create') }}?service=' + (svc?.id ?? '')" class="rf-btn rf-btn-primary">{{ __('Order now') }}</a>
                @endguest
            </div>
        </div>
    </div>

    @guest
        <div class="mt-10 text-center">
            <p class="mb-3 text-sm" style="color:var(--color-text-muted);">{{ __('Ready to order? Create your account and start growing today.') }}</p>
            <a href="{{ route('register') }}" class="rf-btn rf-btn-primary">{{ __('Get started') }}</a>
        </div>
    @endguest
</div>