@extends('layouts.account')

@section('title', __('My account'))
@section('heading', __('Overview'))
@section('subheading', __('Everything you have saved, sent and listed.'))

@section('account')
    {{--
        The panels below are placeholders for the phases that own them. Each one
        states plainly what it will hold rather than showing a fake zero, so a
        reviewer can tell an unbuilt screen from an empty one.
    --}}
    {{--
        A panel with a route behind it links; one without says plainly what it
        will hold, so a reviewer can tell an unbuilt screen from an empty one.
    --}}
    <div class="grid gap-5 sm:grid-cols-2 3xl:grid-cols-3">
        @foreach ([
            ['icon' => 'bookmark', 'title' => __('Saved properties'), 'body' => __('Listings you shortlist appear here.'),
             'route' => 'account.favourites.index', 'count' => $favouriteCount],
            ['icon' => 'search', 'title' => __('Saved searches'), 'body' => __('We tell you when something new matches.'),
             'route' => 'account.saved-searches.index', 'count' => $savedSearchCount],
            ['icon' => 'inbox', 'title' => __('Messages'), 'body' => __('Your conversations with sellers and agents.'),
             'route' => 'account.messages.index', 'count' => $unreadMessages],
            ['icon' => 'calendar', 'title' => __('Viewings'), 'body' => __('Appointments you have requested or agreed.'),
             'route' => 'account.appointments.index', 'count' => $upcomingAppointments],
        ] as $panel)
            @php($href = isset($panel['route']) && Route::has($panel['route']) ? route($panel['route']) : null)

            <a @if ($href) href="{{ $href }}" @endif
               @class([
                   'block rounded-xl border border-border bg-surface p-5 transition',
                   'hover:border-text-muted hover:shadow-card' => $href,
                   'cursor-default' => ! $href,
               ])>
                <span class="flex size-9 items-center justify-center rounded-lg bg-surface-muted text-text-secondary">
                    <x-icon :name="$panel['icon']" class="size-4" />
                </span>

                <h2 class="mt-3.5 flex items-baseline gap-2 font-display text-base font-semibold text-text">
                    {{ $panel['title'] }}

                    @isset($panel['count'])
                        <span class="font-sans text-sm font-normal text-text-muted">{{ $panel['count'] }}</span>
                    @endisset
                </h2>

                <p class="mt-1 text-sm text-text-secondary">{{ $panel['body'] }}</p>
            </a>
        @endforeach
    </div>

    @if ($sellerProfile)
        <div class="mt-8 rounded-xl border border-border bg-surface p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="min-w-0">
                    <h2 class="font-display text-title font-bold text-text">{{ __('Selling') }}</h2>
                    <p class="mt-1.5 text-sm text-text-secondary">
                        {{ __('Listing under :name.', ['name' => $sellerProfile->display_name]) }}
                        <span class="text-text-muted">{{ $sellerProfile->type->label() }}</span>
                    </p>
                </div>

                <x-badge :variant="$sellerProfile->verification_status->badgeVariant()">
                    {{ $sellerProfile->verification_status->label() }}
                </x-badge>
            </div>

            <dl class="mt-6 grid grid-cols-1 gap-4 border-t border-border pt-5 text-sm xs:grid-cols-3">
                @foreach ([
                    [__('Live listings'), $sellerProfile->listing_count],
                    [__('Reviews'), $sellerProfile->rating_count],
                    [__('Rating'), $sellerProfile->rating_count ? number_format((float) $sellerProfile->rating_average, 1) : '—'],
                ] as [$label, $value])
                    <div>
                        <dt class="meta-label">{{ $label }}</dt>
                        <dd class="mt-1 font-display text-lg font-semibold text-text">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    @else
        <div class="mt-8 rounded-xl border border-dashed border-border bg-surface-muted/50 p-6">
            <h2 class="font-display text-title font-bold text-text">{{ __('Have something to sell or rent out?') }}</h2>
            <p class="prose-measure mt-2 text-sm text-text-secondary">
                {{ __('Open a seller profile to list properties, take enquiries and arrange viewings. Your buying side stays exactly as it is.') }}
            </p>

            <x-button :href="route('account.seller.create')" class="mt-5" arrow>
                {{ __('Become a seller') }}
            </x-button>
        </div>
    @endif
@endsection