@extends('layouts.admin')
@section('title','Wishlists')
@section('content')
<x-admin.page
    title="Wishlists"
    subtitle="Demand signal from saved products — which variants customers and guests are holding for later."
>
    <x-slot:actions>
        <a href="{{ route('admin.customers.index') }}" class="admin-btn"><i data-lucide="users" class="h-3.5 w-3.5"></i> Customers</a>
        <a href="{{ route('admin.products.index') }}" class="admin-btn"><i data-lucide="package" class="h-3.5 w-3.5"></i> Products</a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat is-active">
            <span class="order-ops-stat-label">Active lists</span>
            <span class="order-ops-stat-value">{{ number_format($stats['lists']) }}</span>
            <span class="order-ops-stat-meta">With at least one item</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Saved items</span>
            <span class="order-ops-stat-value">{{ number_format($stats['items']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['unique_variants']) }} unique variants</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Customer lists</span>
            <span class="order-ops-stat-value">{{ number_format($stats['customer_lists']) }}</span>
            <span class="order-ops-stat-meta">Signed-in shoppers</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Guest lists</span>
            <span class="order-ops-stat-value">{{ number_format($stats['guest_lists']) }}</span>
            <span class="order-ops-stat-meta">Anonymous tokens</span>
        </div>
    </div>

    <div class="order-ops-quick-filters mb-4">
        <a href="{{ route('admin.customers.wishlists.index') }}" class="order-ops-chip {{ ! request('type') ? 'is-active' : '' }}">All</a>
        <a href="{{ route('admin.customers.wishlists.index', ['type' => 'customer']) }}" class="order-ops-chip {{ request('type') === 'customer' ? 'is-active' : '' }}">Customers</a>
        <a href="{{ route('admin.customers.wishlists.index', ['type' => 'guest']) }}" class="order-ops-chip {{ request('type') === 'guest' ? 'is-active' : '' }}">Guests</a>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_22rem]">
        <x-admin.advanced-table
            id="wishlists"
            :search-url="route('admin.customers.wishlists.index')"
            search-placeholder="Search email, name, or token…"
            :columns="['owner' => 'Owner', 'items' => 'Items', 'type' => 'Type', 'updated' => 'Updated', 'actions' => '']"
        >
            <thead>
                <tr>
                    <th data-col="owner">Owner</th>
                    <th data-col="items">Items</th>
                    <th data-col="type">Type</th>
                    <th data-col="updated">Updated</th>
                    <th data-col="actions"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($wishlists as $wishlist)
                    <tr>
                        <td data-col="owner">
                            @if($wishlist->customer)
                                <div class="font-medium">{{ $wishlist->customer->name ?: '—' }}</div>
                                <div class="text-xs text-[#6d7175]">{{ $wishlist->customer->email }}</div>
                            @else
                                <div class="font-medium">Guest list</div>
                                <div class="font-mono text-[11px] text-[#6d7175]">{{ \Illuminate\Support\Str::limit($wishlist->token, 24) }}</div>
                            @endif
                        </td>
                        <td data-col="items" class="tabular-nums font-medium">{{ number_format($wishlist->items_count) }}</td>
                        <td data-col="type">
                            <x-admin.badge :tone="$wishlist->customer_id ? 'info' : 'muted'">{{ $wishlist->customer_id ? 'Customer' : 'Guest' }}</x-admin.badge>
                        </td>
                        <td data-col="updated" class="text-xs text-[#6d7175]">{{ $wishlist->updated_at?->diffForHumans() }}</td>
                        <td data-col="actions" class="text-right">
                            <a href="{{ route('admin.customers.wishlists.show', $wishlist) }}" class="text-sm font-medium text-[#2c6ecb] hover:underline">Open</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="p-12 text-center text-[#6d7175]">No wishlists with items yet.</td></tr>
                @endforelse
            </tbody>
            <x-slot:footer>{{ $wishlists->links() }}</x-slot:footer>
        </x-admin.advanced-table>

        <x-admin.section title="Most wished variants" hint="Demand radar for merchandising and restocks.">
            <ul class="space-y-3">
                @forelse($topVariants as $row)
                    <li class="flex items-start justify-between gap-3 border-b border-[var(--color-admin-border)] pb-3 last:border-0">
                        <div class="min-w-0">
                            <div class="truncate font-medium text-[#202223]">{{ $row->variant?->product?->title ?: 'Variant #'.$row->variant_id }}</div>
                            <div class="text-xs text-[#6d7175]">{{ $row->variant?->sku ?: '—' }}</div>
                        </div>
                        <span class="shrink-0 rounded-full bg-[#111] px-2.5 py-0.5 text-xs font-semibold text-white tabular-nums">{{ number_format($row->saves) }}</span>
                    </li>
                @empty
                    <li class="text-sm text-[#6d7175]">No wishlist saves yet.</li>
                @endforelse
            </ul>
        </x-admin.section>
    </div>
</x-admin.page>
@endsection