<?php /**
 * Ported from the design bundle (ai-marketing-platform-assets, 8 Sep 2026):
 * includes/components/creatives-list.php. Markup/classes are kept as shipped;
 * only the data and behavior are ours.
 *
 * Deviations from the design (client-side JS over a sample dataset):
 * - Rows are real, server-paginated `Creative` records (search/status/source
 *   filters, sort, and per-page are GET query params handled by the
 *   controller) instead of a client-side fetch against a JSON API.
 * - The table/grid view toggle and skeleton loading states are not ported
 *   since there's no client-side fetch to show a loading state for.
 */ ?>
<x-mb-layout pageTitle="Creatives">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    <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">Creatives</h1>
                    <p class="mb-page-sub">{{ $stats['all'] }} generated from prompts and product URLs</p>
                </div>
                <div class="mb-page-head-actions">
                    <a href="{{ route('creatives.create') }}" class="mb-btn-primary mb-btn-lg" wire:navigate><i class="bi bi-plus-lg"></i>New Creative</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('creatives.index') }}">
                    <label class="mb-search">
                        <i class="bi bi-search"></i>
                        <input type="search" name="q" value="{{ request('q') }}" placeholder="Search creatives…" aria-label="Search creatives">
                    </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="processing" @selected(request('status') === 'processing')>Generating</option>
                        <option value="queued" @selected(request('status') === 'queued')>Queued</option>
                        <option value="failed" @selected(request('status') === 'failed')>Failed</option>
                    </select>
                    <select class="mb-select" name="source" aria-label="Filter by source" onchange="this.form.submit()">
                        <option value="all" @selected(!request('source') || request('source') === 'all')>All sources</option>
                        <option value="prompt" @selected(request('source') === 'prompt')>Prompt</option>
                        <option value="product_url" @selected(request('source') === 'product_url')>Product URL</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($creatives->perPage() === 10)>10 / page</option>
                            <option value="25" @selected($creatives->perPage() === 25)>25 / page</option>
                            <option value="50" @selected($creatives->perPage() === 50)>50 / page</option>
                        </select>
                        <button type="submit" class="mb-btn-ghost"><i class="bi bi-search"></i>Search</button>
                    </div>
                </form>

                @if ($creatives->isEmpty())
                    <div class="mb-empty">
                        <div class="mb-empty-icon"><i class="bi bi-images"></i></div>
                        <div class="mb-empty-title">No creatives match your filters</div>
                        <div>Try a different search term, or clear the status and source filters.</div>
                    </div>
                @else
                    @php
                        $sortLink = fn (string $col) => route('creatives.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>Creative</th>
                                    <th class="is-sortable @if ($sort === 'source') is-sorted @endif"><a href="{{ $sortLink('source') }}" class="text-reset text-decoration-none">Source<i class="bi bi-arrow-down-up"></i></a></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 ($creatives as $creative)
                                    @php
                                        $title = $creative->prompt ?? $creative->product_url ?? ('Creative #'.$creative->id);
                                        $thumbStatus = $creative->status === 'processing' ? 'generating' : $creative->status;
                                    @endphp
                                    <tr>
                                        <td class="mb-td-id" data-label="#">{{ $creative->id }}</td>
                                        <td data-label="Creative">
                                            <div class="mb-cell-media">
                                                <span class="mb-thumb" @if ($creative->thumbnail_path) style="background-image:url('{{ asset('storage/'.$creative->thumbnail_path) }}')" @endif>
                                                    @unless ($creative->thumbnail_path)
                                                        <i class="bi bi-{{ $creative->type === 'video' ? 'camera-reels' : 'image' }}"></i>
                                                    @endunless
                                                </span>
                                                <div>
                                                    <div class="mb-cell-title">{{ \Illuminate\Support\Str::limit($title, 48) }}</div>
                                                    <div class="mb-cell-meta">{{ ucfirst($creative->type) }} · {{ $creative->ratio }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td data-label="Source"><span class="mb-tag"><i class="bi bi-{{ $creative->source === 'prompt' ? 'chat-left-text' : 'link-45deg' }}"></i>{{ $creative->source === 'prompt' ? 'Prompt' : 'Product URL' }}</span></td>
                                        <td data-label="Status">
                                            <span class="mb-status is-{{ $thumbStatus }}"><span class="mb-dot"></span>{{ $creative->status }}</span>
                                        </td>
                                        <td data-label="Created">{{ $creative->created_at->diffForHumans() }}</td>
                                        <td class="mb-td-actions" data-label="">
                                            <a href="{{ route('creatives.show', $creative) }}" class="mb-row-btn" wire:navigate><i class="bi bi-eye"></i>View</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

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

        </div>
    </div>
</x-mb-layout>

