@extends('layouts.account')

@section('title', __('My listings'))
@section('heading', __('My listings'))
@section('subheading', __('Everything you have drafted, submitted and published.'))

@section('actions')
    <x-button :href="route('account.listings.create')" arrow>{{ __('Create a listing') }}</x-button>
@endsection

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    @if ($remaining !== null && $remaining <= 2)
        <x-alert type="warning" class="mb-6" :title="__('Listing allowance')">
            {{ trans_choice(
                'You can publish one more listing on this account.|You can publish :count more listings on this account.',
                $remaining, ['count' => $remaining],
            ) }}
            {{ __('Verified sellers have no limit.') }}
        </x-alert>
    @endif

    {{-- Status tabs. Counts come from one grouped query, not one per tab. --}}
    <div class="mb-6 flex flex-wrap gap-2" role="tablist" aria-label="{{ __('Filter by status') }}">
        <a href="{{ route('account.listings.index') }}"
           @class(['pill', 'pill-brand' => ! request('status'), 'pill-idle' => request('status')])>
            {{ __('All') }} <span class="opacity-60">{{ $counts->sum() }}</span>
        </a>

        @foreach ($statuses as $value => $label)
            @continue(! $counts->has($value))

            <a href="{{ route('account.listings.index', ['status' => $value]) }}"
               @class(['pill', 'pill-brand' => request('status') === $value, 'pill-idle' => request('status') !== $value])>
                {{ $label }} <span class="opacity-60">{{ $counts[$value] }}</span>
            </a>
        @endforeach
    </div>

    @if ($listings->isEmpty())
        <x-empty-state icon="building"
                       :title="__('No listings yet')"
                       :message="__('Create your first listing and it will appear here.')">
            <x-button :href="route('account.listings.create')" class="mt-5" arrow>{{ __('Create a listing') }}</x-button>
        </x-empty-state>
    @else
        <div class="space-y-3">
            @foreach ($listings as $listing)
                <article class="flex flex-col gap-4 rounded-xl border border-border bg-surface p-4 sm:flex-row sm:items-center">
                    <div class="flex min-w-0 flex-1 items-start gap-4">
                        <x-image :src="$listing->cover_image" :alt="$listing->title" ratio="4/3"
                                 rounded="rounded-lg" class="hidden w-28 shrink-0 xs:block" />

                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2">
                                <x-badge :variant="$listing->status->badgeVariant()">{{ $listing->status->label() }}</x-badge>
                                <span class="meta-label">{{ $listing->reference }}</span>
                            </div>

                            <h2 class="mt-1.5 truncate font-display text-base font-semibold text-text">
                                {{ $listing->title }}
                            </h2>

                            <p class="mt-0.5 truncate text-sm text-text-secondary">
                                {{ $listing->category?->name }} · {{ $listing->formattedPrice() }}
                                @if ($period = $listing->pricePeriodLabel())
                                    <span class="text-text-muted">{{ $period }}</span>
                                @endif
                            </p>

                            <p class="mt-1 text-xs text-text-muted">{{ $listing->status->description() }}</p>

                            @if ($listing->status === \App\Enums\ListingStatus::Rejected && $listing->rejection_reason)
                                <p class="mt-2 rounded-lg bg-error/5 px-3 py-2 text-xs text-error">
                                    {{ $listing->rejection_reason }}
                                </p>
                            @endif
                        </div>
                    </div>

                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        @if ($listing->isLive())
                            <x-button variant="ghost" size="sm" :href="route('listings.show', $listing)">
                                {{ __('View') }}
                            </x-button>
                        @endif

                        <x-button variant="ghost" size="sm" :href="route('account.listings.media.index', $listing)">
                            {{ __('Photos') }}
                        </x-button>

                        <x-button variant="outline" size="sm" :href="route('account.listings.edit', $listing)">
                            {{ $listing->isEditable() ? __('Edit') : __('Open') }}
                        </x-button>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-8">{{ $listings->links() }}</div>
    @endif
@endsection