@php
    $statusClass = fn (string $status): string => match ($status) {
        'completed' => 'ok',
        'failed' => 'err',
        'queued' => 'queued',
        'generating', 'processing' => 'generating',
        default => 'run',
    };
    $listingQuery = fn (array $extra = []) => route('landing-pages.index', array_merge(
        request()->except('page'),
        ['tab' => 'catalog'],
        $extra,
    ));
@endphp

<div class="mb-stats">
    <div class="mb-stat">
        <span class="mb-stat-icon is-all"><i class="bi bi-collection"></i></span>
        <span><span class="mb-stat-num">{{ $stats['all'] }}</span><span class="mb-stat-label d-block">Total</span></span>
    </div>
    <div class="mb-stat">
        <span class="mb-stat-icon is-ok"><i class="bi bi-check2-circle"></i></span>
        <span><span class="mb-stat-num">{{ $stats['completed'] }}</span><span class="mb-stat-label d-block">Completed</span></span>
    </div>
    <div class="mb-stat">
        <span class="mb-stat-icon is-run"><i class="bi bi-hourglass-split"></i></span>
        <span><span class="mb-stat-num">{{ $stats['active'] }}</span><span class="mb-stat-label d-block">In progress</span></span>
    </div>
    <div class="mb-stat">
        <span class="mb-stat-icon is-err"><i class="bi bi-exclamation-triangle"></i></span>
        <span><span class="mb-stat-num">{{ $stats['failed'] }}</span><span class="mb-stat-label d-block">Failed</span></span>
    </div>
</div>

<div class="mb-card">
    <form class="mb-toolbar" method="GET" action="{{ route('landing-pages.index') }}">
        <input type="hidden" name="tab" value="catalog">
        <label class="mb-search">
            <i class="bi bi-search"></i>
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search by brand or URL…" aria-label="Search catalog pages">
        </label>
        <select class="mb-select" name="status" aria-label="Filter by status" onchange="this.form.submit()">
            <option value="all" @selected(!request('status') || request('status') === 'all')>All statuses</option>
            <option value="completed" @selected(request('status') === 'completed')>Completed</option>
            <option value="active" @selected(request('status') === 'active')>In progress</option>
            <option value="queued" @selected(request('status') === 'queued')>Queued</option>
            <option value="failed" @selected(request('status') === 'failed')>Failed</option>
        </select>
        <div class="mb-toolbar-end">
            <select class="mb-select" name="per_page" aria-label="Rows per page" onchange="this.form.submit()">
                <option value="10" @selected($generations->perPage() === 10)>10 / page</option>
                <option value="25" @selected($generations->perPage() === 25)>25 / page</option>
                <option value="50" @selected($generations->perPage() === 50)>50 / page</option>
            </select>
            <button type="submit" class="mb-btn-ghost"><i class="bi bi-search"></i>Search</button>
        </div>
    </form>

    @if ($generations->isEmpty())
        <div class="mb-empty">
            <div class="mb-empty-icon"><i class="bi bi-layout-text-window-reverse"></i></div>
            <div class="mb-empty-title">No catalog pages match your filters</div>
            <div>Try a different search term, or create your first catalog page from a brand website or product listing.</div>
        </div>
    @else
        @php
            $sortLink = fn (string $col) => $listingQuery([
                'sort' => $col,
                'dir' => $sort === $col && $dir === 'desc' ? 'asc' : 'desc',
            ]);
        @endphp
        <div class="mb-table-wrap">
            <table class="mb-table">
                <thead>
                    <tr>
                        <th class="is-sortable @if ($sort === 'id') is-sorted @endif"><a href="{{ $sortLink('id') }}" class="text-reset text-decoration-none">#<i class="bi bi-arrow-down-up"></i></a></th>
                        <th>Brand</th>
                        <th class="is-sortable @if ($sort === 'status') is-sorted @endif"><a href="{{ $sortLink('status') }}" class="text-reset text-decoration-none">Status<i class="bi bi-arrow-down-up"></i></a></th>
                        <th class="is-sortable @if ($sort === 'created') is-sorted @endif"><a href="{{ $sortLink('created') }}" class="text-reset text-decoration-none">Created<i class="bi bi-arrow-down-up"></i></a></th>
                        <th>Published page</th>
                        <th><span class="visually-hidden">Actions</span></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($generations as $generation)
                        <tr>
                            <td class="mb-td-id" data-label="#">{{ $generation->id }}</td>
                            <td data-label="Brand">
                                <div class="mb-cell-media">
                                    <span class="mb-thumb"><i class="bi bi-shop"></i></span>
                                    <div>
                                        <div class="mb-cell-title">{{ $generation->brand_name }}</div>
                                        @if ($generation->brand_url)
                                            <div class="mb-cell-meta text-truncate" style="max-width: 18rem">{{ $generation->brand_url }}</div>
                                        @else
                                            <div class="mb-cell-meta">Catalog layout</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td data-label="Status">
                                <span class="mb-status is-{{ $statusClass($generation->status) }}"><span class="mb-dot"></span>{{ $generation->status }}</span>
                            </td>
                            <td data-label="Created">{{ $generation->created_at->diffForHumans() }}</td>
                            <td data-label="Published page">
                                @if ($generation->published_summary)
                                    <div class="mb-cell-meta">{{ $generation->published_summary }}</div>
                                @else
                                    <span class="mb-cell-meta">Not published</span>
                                @endif
                            </td>
                            <td class="mb-td-actions" data-label="">
                                <div class="mb-row-actions">
                                @if ($generation->isSetupIncomplete())
                                    <a href="{{ route('catalog-landing-pages.create', ['generation' => $generation->id]) }}" class="mb-row-btn is-icon" wire:navigate aria-label="Continue setup" title="Continue setup"><i class="bi bi-arrow-right-circle"></i></a>
                                @else
                                    <a href="{{ route('catalog-landing-pages.show', $generation) }}" class="mb-row-btn is-icon" wire:navigate aria-label="View" title="View"><i class="bi bi-eye"></i></a>
                                    @if ($generation->analytics_url)
                                        <a href="{{ $generation->analytics_url }}" class="mb-row-btn is-icon" aria-label="Analytics" title="Analytics"><i class="bi bi-bar-chart"></i></a>
                                    @endif
                                    @if ($generation->canManageAffiliateTracking())
                                        <button type="button"
                                            class="mb-row-btn is-icon"
                                            data-bs-toggle="modal"
                                            data-bs-target="#catalog-page-affiliate-modal"
                                            data-affiliate-action="{{ route('catalog-landing-pages.affiliate.update', $generation) }}"
                                            data-admedia-campaign-id="{{ $generation->admedia_campaign_id }}"
                                            data-affiliate-key="{{ $generation->affiliate_key }}"
                                            aria-label="Affiliate tracking"
                                            title="Affiliate tracking">
                                            <i class="bi bi-link-45deg"></i>
                                        </button>
                                    @endif
                                    @if ($generation->canManagePixels())
                                        <button type="button"
                                            class="mb-row-btn is-icon"
                                            data-bs-toggle="modal"
                                            data-bs-target="#catalog-page-pixels-modal"
                                            data-pixels-action="{{ route('catalog-landing-pages.pixels.update', $generation) }}"
                                            data-google-send-to="{{ $generation->google_conversion_send_to }}"
                                            data-meta-pixel-id="{{ $generation->meta_pixel_id }}"
                                            aria-label="Tracking pixels"
                                            title="Tracking pixels">
                                            <i class="bi bi-bullseye"></i>
                                        </button>
                                    @endif
                                    @if ($liveUrl = $generation->primaryLiveUrl())
                                        <a href="{{ $liveUrl }}" class="mb-row-btn is-icon" target="_blank" rel="noopener noreferrer" aria-label="Live URL" title="Live URL"><i class="bi bi-box-arrow-up-right"></i></a>
                                    @endif
                                @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mb-table-foot">
            <span>Showing <strong>{{ $generations->firstItem() }}–{{ $generations->lastItem() }}</strong> of <strong>{{ $generations->total() }}</strong></span>
            <div class="mb-pager">{{ $generations->onEachSide(1)->links() }}</div>
        </div>
    @endif
</div>

@include('catalog-landing-pages.partials.affiliate-tracking-modal')
@include('catalog-landing-pages.partials.tracking-pixels-modal')