@extends('layouts.app')

@section('title', __('My Account'))

@php
    /*
     * Use the currency selected in Payment Settings throughout
     * the account dashboard and its financial partials.
     */
    $displayCurrency = currency_code(
        $currency ?? default_currency()
    );

    $profile = is_array($profile ?? null)
        ? $profile
        : [];

    $stats = is_array($stats ?? null)
        ? $stats
        : [];

    $sellerStatus = $sellerStatus ?? null;

    $recentOrders = collect($recentOrders ?? []);
    $recentWalletEntries = collect(
        $recentWalletEntries ?? []
    );
    $recentSupportTickets = collect(
        $recentSupportTickets ?? []
    );
    $recentNotifications = collect(
        $recentNotifications ?? []
    );

    $profilePercentage = max(
        0,
        min(
            100,
            (int) data_get(
                $profile,
                'percentage',
                0
            )
        )
    );

    $displayName = trim(
        (string) (
            $user->first_name
            ?: $user->username
            ?: __('there')
        )
    );

    /*
     * last_seen may be returned as either a Carbon instance
     * or a plain database string.
     */
    $lastSeen = null;

    if (filled($user->last_seen)) {
        try {
            $lastSeen = \Illuminate\Support\Carbon::parse(
                $user->last_seen
            );
        } catch (\Throwable) {
            $lastSeen = null;
        }
    }

    $quickActions = [
        [
            'route' => 'account.orders.index',
            'icon' => 'fa-shopping-bag',
            'label' => __('My Orders'),
            'color' => 'primary',
        ],
        [
            'route' => 'account.wallet.index',
            'icon' => 'fa-wallet',
            'label' => __('Wallet'),
            'color' => 'success',
        ],
        [
            'route' => 'account.downloads.index',
            'icon' => 'fa-download',
            'label' => __('Downloads'),
            'color' => 'info',
        ],
        [
            'route' => 'account.wishlist.index',
            'icon' => 'fa-heart',
            'label' => __('Wishlist'),
            'color' => 'danger',
        ],
        [
            'route' => 'account.messages.index',
            'icon' => 'fa-comments',
            'label' => __('Messages'),
            'color' => 'warning',
        ],
        [
            'route' => 'account.support.index',
            'icon' => 'fa-headset',
            'label' => __('Support'),
            'color' => 'secondary',
        ],
    ];
@endphp

@section('content')
<div class="container-fluid px-4">
    {{-- Welcome Header --}}
    <div
        class="d-flex flex-wrap align-items-center
            justify-content-between gap-3 mb-4"
    >
        <div>
            <h1 class="h3 mb-1 fw-700">
                {{
                    __('Welcome back, :name!', [
                        'name' => $displayName,
                    ])
                }}
            </h1>

            <p class="text-muted small mb-0">
                <i class="fas fa-clock me-1"></i>

                {{ now()->format('l, F j, Y') }}

                @if($lastSeen)
                    <span class="ms-2">
                        <i class="fas fa-eye me-1"></i>

                        {{
                            __('Last login: :time', [
                                'time' => $lastSeen->diffForHumans(),
                            ])
                        }}
                    </span>
                @endif
            </p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            @if(
                \Illuminate\Support\Facades\Route::has(
                    'account.orders.index'
                )
            )
                <a
                    href="{{ route('account.orders.index') }}"
                    class="btn btn-sm btn-outline-primary"
                >
                    <i class="fas fa-shopping-bag me-1"></i>
                    {{ __('My Orders') }}
                </a>
            @endif

            @if(
                \Illuminate\Support\Facades\Route::has(
                    'account.wallet.index'
                )
            )
                <a
                    href="{{ route('account.wallet.index') }}"
                    class="btn btn-sm btn-outline-primary"
                >
                    <i class="fas fa-wallet me-1"></i>
                    {{ __('Wallet') }}
                </a>
            @endif
        </div>
    </div>

    {{-- Profile Completion Alert --}}
    @if($profilePercentage < 100)
        @include('account.partials.profile-completion', [
            'profile' => array_merge(
                $profile,
                ['percentage' => $profilePercentage]
            ),
        ])
    @endif

    {{-- Stats Grid --}}
    @include('account.partials.stats-grid', [
        'stats' => $stats,
        'currency' => $displayCurrency,
        'displayCurrency' => $displayCurrency,
    ])

    {{-- Seller Status Banner --}}
    @include('account.partials.seller-status', [
        'sellerStatus' => $sellerStatus,
        'user' => $user,
        'currency' => $displayCurrency,
        'displayCurrency' => $displayCurrency,
    ])

    {{-- Quick Actions --}}
    <div class="row g-3 mb-4">
        @foreach($quickActions as $action)
            @if(
                \Illuminate\Support\Facades\Route::has(
                    $action['route']
                )
            )
                <div class="col-6 col-md-4 col-xl-2">
                    <a
                        href="{{ route($action['route']) }}"
                        class="card border-0 shadow-sm
                            text-decoration-none h-100 hover-lift
                            account-quick-action"
                    >
                        <div class="card-body text-center">
                            <div
                                class="account-action-icon rounded-circle
                                    bg-{{ $action['color'] }}
                                    bg-opacity-10 d-inline-flex
                                    align-items-center
                                    justify-content-center mb-2"
                            >
                                <i
                                    class="fas {{ $action['icon'] }}
                                        text-{{ $action['color'] }} fs-5"
                                ></i>
                            </div>

                            <div class="fw-600 small text-dark">
                                {{ $action['label'] }}
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        @endforeach
    </div>

    {{-- Main Content --}}
    <div class="row g-4">
        {{-- Recent Orders --}}
        <div class="col-xl-8">
            @include('account.partials.recent-orders', [
                'recentOrders' => $recentOrders,
                'currency' => $displayCurrency,
                'displayCurrency' => $displayCurrency,
            ])
        </div>

        {{-- Recent Wallet Activity --}}
        <div class="col-xl-4">
            @include('account.partials.recent-wallet', [
                'recentWalletEntries' => $recentWalletEntries,
                'stats' => $stats,
                'currency' => $displayCurrency,
                'displayCurrency' => $displayCurrency,
            ])
        </div>

        {{-- Recent Support Tickets --}}
        <div class="col-xl-6">
            @include('account.partials.recent-tickets', [
                'recentSupportTickets' => $recentSupportTickets,
                'stats' => $stats,
            ])
        </div>

        {{-- Recent Notifications --}}
        <div class="col-xl-6">
            @include('account.partials.recent-notifications', [
                'recentNotifications' => $recentNotifications,
                'stats' => $stats,
            ])
        </div>
    </div>
</div>
@endsection

@once
    @push('styles')
        <style>
            .fw-600 {
                font-weight: 600;
            }

            .fw-700 {
                font-weight: 700;
            }

            .hover-lift {
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            }

            .hover-lift:hover {
                transform: translateY(-3px);
                box-shadow:
                    0 8px 25px rgba(0, 0, 0, 0.08) !important;
            }

            .account-quick-action:focus-visible {
                outline: 2px solid var(--bs-primary);
                outline-offset: 2px;
            }

            .account-action-icon {
                width: 48px;
                height: 48px;
            }
        </style>
    @endpush
@endonce