<x-mb-layout pageTitle="Catalog landing pages">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    @php
        $statusClass = fn (string $status): string => match ($status) {
            'completed' => 'ok',
            'failed' => 'err',
            'queued' => 'queued',
            'generating', 'processing' => 'generating',
            default => 'run',
        };
    @endphp

    <div class="mb-page">
        <div class="mb-page-inner">

            @if (session('status'))
                <div class="mb-note is-info"><i class="bi bi-info-circle"></i><div>{{ session('status') }}</div></div>
            @endif

            <div class="mb-page-head">
                <div>
                    <h1 class="mb-page-title">Catalog landing pages</h1>
                    <p class="mb-page-sub">{{ $stats['all'] }} generated from brand sites and product listings</p>
                </div>
                <div class="mb-page-head-actions">
                    <a href="{{ route('catalog-landing-pages.create') }}" class="mb-btn-primary mb-btn-lg" wire:navigate><i class="bi bi-plus-lg"></i>New catalog page</a>
                </div>
            </div>

            <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('catalog-landing-pages.index') }}">
                    <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) => route('catalog-landing-pages.index', array_merge(request()->except('page'), [
                            '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><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 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->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>

        </div>
    </div>

    @include('catalog-landing-pages.partials.affiliate-tracking-modal')
    @include('catalog-landing-pages.partials.tracking-pixels-modal')
</x-mb-layout>
