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

    <div class="mb-page">
        <div class="mb-page-inner">
            <div class="mb-page-head">
                <div>
                    <a class="mb-back" href="{{ route('catalog-landing-pages.show', $generation) }}"><i class="bi bi-arrow-left"></i>Catalog page #{{ $generation->id }}</a>
                    <h1 class="mb-page-title">Analytics</h1>
                    <p class="mb-page-sub">{{ $page->displayLabel() }} · {{ $generation->brand_name }}</p>
                </div>
                <div class="mb-page-head-actions">
                    @if ($liveUrl = $page->partnerPreviewUrl() ?? $page->publicUrl())
                        <a href="{{ $liveUrl }}" class="mb-btn-ghost" target="_blank" rel="noopener noreferrer"><i class="bi bi-box-arrow-up-right"></i>Live URL</a>
                    @endif
                </div>
            </div>

            <div class="mb-stats">
                <div class="mb-stat">
                    <span class="mb-stat-icon is-all"><i class="bi bi-eye"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['visits'] }}</span><span class="mb-stat-label d-block">Visits</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-ok"><i class="bi bi-cursor"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['clickouts'] }}</span><span class="mb-stat-label d-block">Clickouts</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-run"><i class="bi bi-graph-up-arrow"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['clickout_rate'] }}%</span><span class="mb-stat-label d-block">Visit clickout rate</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-err"><i class="bi bi-calendar3"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['today'] }}</span><span class="mb-stat-label d-block">Visits today</span></span>
                </div>
            </div>

            <div class="mb-card">
                <form class="mb-toolbar" method="GET" action="{{ route('catalog-landing-pages.analytics', [$generation, $page]) }}">
                    <select class="mb-select" name="per_page" aria-label="Rows per page" onchange="this.form.submit()">
                        <option value="10" @selected($visits->perPage() === 10)>10 / page</option>
                        <option value="25" @selected($visits->perPage() === 25)>25 / page</option>
                        <option value="50" @selected($visits->perPage() === 50)>50 / page</option>
                    </select>
                    <div class="mb-toolbar-end">
                        <label class="mb-search">
                            <i class="bi bi-search"></i>
                            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search visits…" aria-label="Search visits">
                        </label>
                        <button type="submit" class="mb-btn-ghost"><i class="bi bi-search"></i>Search</button>
                    </div>
                </form>

                @if ($visits->isEmpty())
                    <div class="mb-empty">
                        <div class="mb-empty-icon"><i class="bi bi-inbox"></i></div>
                        @if ($stats['visits'] === 0)
                            <div class="mb-empty-title">No visits yet.</div>
                            <div>Traffic from the live catalog page will appear here with URL parameters and clickout counts.</div>
                        @else
                            <div class="mb-empty-title">No visits match your filters</div>
                            <div>Try a different search term.</div>
                        @endif
                    </div>
                @else
                    @php
                        $sortLink = fn (string $col) => route('catalog-landing-pages.analytics', array_merge(
                            [$generation, $page],
                            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 class="is-sortable @if ($sort === 'created') is-sorted @endif"><a href="{{ $sortLink('created') }}" class="text-reset text-decoration-none">Landed<i class="bi bi-arrow-down-up"></i></a></th>
                                    <th>URL params</th>
                                    <th class="is-sortable @if ($sort === 'clickouts') is-sorted @endif"><a href="{{ $sortLink('clickouts') }}" class="text-reset text-decoration-none">Clickouts<i class="bi bi-arrow-down-up"></i></a></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($visits as $visit)
                                    <tr>
                                        <td class="mb-td-id" data-label="#">{{ $visit->id }}</td>
                                        <td data-label="Landed">{{ $visit->created_at?->timezone(config('app.timezone'))->format('Y-m-d H:i') }}</td>
                                        <td data-label="URL params">{{ $visit->queryParamsSummary() ?: '—' }}</td>
                                        <td data-label="Clickouts">{{ $visit->clickouts_count }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

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