@extends('layouts.app')

@php
    use Illuminate\Support\Str;
    use Illuminate\Support\Facades\Route;

    $locale = app(\App\Services\Content\ContentLocale::class);
    $languageId = $locale->languageId();

    // Prefer username, fall back to full name, then a safe default.
    $sellerName = $seller->username
        ?: trim(($seller->first_name ?? '') . ' ' . ($seller->last_name ?? ''))
        ?: __('Seller');

    $sellerSlug = $seller->slug ?: $seller->id;

    // Avatar URL
    $avatarUrl = $seller->avatar
        ? asset('storage/' . ltrim($seller->avatar, '/'))
        : null;

    // Cover URL — fall back to avatar when no cover is uploaded.
    $coverUrl = $seller->cover_image
        ? asset('storage/' . ltrim($seller->cover_image, '/'))
        : $avatarUrl;

    // Flag so the view can style the fallback cover differently
    // (blurred / dimmed avatar vs. a real cover image).
    $isAvatarAsCover = empty($seller->cover_image) && !empty($avatarUrl);

    $initial = strtoupper(Str::substr($sellerName, 0, 1));

    // Role label
    $roleName = null;
    if ($seller->relationLoaded('role') && $seller->role) {
        $raw = $seller->role->role_name;
        if (is_array($raw)) {
            $roleName = $raw[0]['name'] ?? null;
        } elseif (is_string($raw) && str_starts_with($raw, 'a:')) {
            $decoded = @unserialize($raw, ['allowed_classes' => false]);
            if (is_array($decoded)) {
                $roleName = $decoded[0]['name'] ?? null;
            }
        } else {
            $roleName = is_string($raw) ? $raw : null;
        }
    }

    // Seller profile fields
    $location = trim(collect([
        $seller->city_name,
        $seller->state_name,
        $seller->country_name,
    ])->filter()->implode(', '));

    $memberSince = $seller->created_at;

    // Whether the visitor is the seller themselves.
    $isOwner = auth()->check() && (int) auth()->id() === (int) $seller->id;

    // Filters + form action (preserve current seller)
    $storefrontUrl = route('sellers.show', [
        'seller' => $seller->slug,
    ]);

    $sortOptions = [
        'latest'     => __('Latest'),
        'oldest'     => __('Oldest'),
        'price_low'  => __('Price: Low to High'),
        'price_high' => __('Price: High to Low'),
        'rating'     => __('Top Rated'),
        'popular'    => __('Most Popular'),
    ];

    $activeFilterCount = collect([
        $search !== '' ?: null,
        $selectedType !== '' ?: null,
    ])->filter()->count();

    $wishlistSet = collect($wishlistProductIds)->map(fn ($id) => (int) $id)->all();
@endphp

@section('title', $sellerName)

@section('meta')
    <meta name="description"
          content="{{ Str::limit(strip_tags($seller->about_me ?? __('Browse products from :name', ['name' => $sellerName])), 155) }}">
    @if($coverUrl)
        <meta property="og:image" content="{{ $coverUrl }}">
    @endif
    <meta property="og:title" content="{{ $sellerName }}">
    <meta property="og:type" content="profile">
@endsection

@section('content')

{{-- ============ COVER + PROFILE HEADER ============ --}}
<section class="seller-hero position-relative mb-4">
    <div class="seller-cover {{ $isAvatarAsCover ? 'seller-cover--avatar' : '' }}"
         @if($coverUrl) style="background-image:url('{{ $coverUrl }}');" @endif>
        @unless($coverUrl)
            <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                <i class="bi bi-image fs-1"></i>
            </div>
        @endunless
    </div>

    <div class="container">
        <div class="seller-profile-card card border-0 shadow-sm">
            <div class="card-body">
                <div class="row g-3 align-items-center">

                    {{-- Avatar --}}
                    <div class="col-auto">
                        @if($avatarUrl)
                            <img src="{{ $avatarUrl }}"
                                 alt="{{ $sellerName }}"
                                 class="rounded-circle border border-3 border-white shadow-sm seller-avatar">
                        @else
                            <div class="rounded-circle border border-3 border-white shadow-sm seller-avatar
                                        bg-primary text-white d-flex align-items-center justify-content-center fs-2 fw-bold">
                                {{ $initial }}
                            </div>
                        @endif
                    </div>

                    {{-- Identity --}}
                    <div class="col">
                        <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                            <h1 class="h4 mb-0">{{ $sellerName }}</h1>

                            @if($seller->is_active_shop_request && $seller->email_status)
                                <span class="badge bg-success-subtle text-success-emphasis">
                                    <i class="bi bi-patch-check-fill"></i> {{ __('Verified Seller') }}
                                </span>
                            @endif

                            @if($roleName)
                                <span class="badge bg-secondary-subtle text-secondary-emphasis">
                                    {{ $roleName }}
                                </span>
                            @endif

                            @if($seller->vacation_mode)
                                <span class="badge bg-warning text-dark">
                                    <i class="bi bi-airplane"></i> {{ __('On Vacation') }}
                                </span>
                            @endif
                        </div>

                        <div class="d-flex flex-wrap gap-3 small text-muted">
                            @if($location !== '')
                                <span><i class="bi bi-geo-alt"></i> {{ $location }}</span>
                            @endif

                            @if($memberSince)
                                <span>
                                    <i class="bi bi-calendar3"></i>
                                    {{ __('Joined :date', ['date' => $memberSince->format('M Y')]) }}
                                </span>
                            @endif

                            @if($statistics['average_rating'] > 0)
                                <span>
                                    <i class="bi bi-star-fill text-warning"></i>
                                    {{ number_format($statistics['average_rating'], 1) }}
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Follow / Unfollow / Owner --}}
                    <div class="col-auto">
                        @guest
                            <a href="{{ route('login') }}" class="btn btn-primary">
                                <i class="bi bi-person-plus"></i> {{ __('Follow') }}
                            </a>
                        @endguest

                        @auth
                            @if($isOwner)
                                <a href="{{ route('seller.dashboard') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-speedometer2"></i> {{ __('Seller Dashboard') }}
                                </a>
                            @elseif($isFollowing)
                                <form method="POST"
                                      action="{{ route('sellers.unfollow', $seller) }}"
                                      class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-primary">
                                        <i class="bi bi-person-check-fill"></i> {{ __('Following') }}
                                    </button>
                                </form>
                            @else
                                <form method="POST"
                                      action="{{ route('sellers.follow', $seller) }}"
                                      class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-person-plus"></i> {{ __('Follow') }}
                                    </button>
                                </form>
                            @endif
                        @endauth
                    </div>
                </div>

                @if(session('status'))
                    <div class="alert alert-info mt-3 mb-0 py-2 small">{{ session('status') }}</div>
                @endif
                @if(session('success'))
                    <div class="alert alert-success mt-3 mb-0 py-2 small">{{ session('success') }}</div>
                @endif
                @error('seller')
                    <div class="alert alert-danger mt-3 mb-0 py-2 small">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
</section>

<div class="container pb-4">

    {{-- ============ STATISTICS ============ --}}
    <div class="row g-3 mb-4">
        @php
            $statCards = [
                ['key' => 'products',      'label' => __('Products'),  'value' => number_format($statistics['products']),       'icon' => 'bi-box-seam'],
                ['key' => 'followers',     'label' => __('Followers'), 'value' => number_format($statistics['followers']),      'icon' => 'bi-people'],
                ['key' => 'sales',         'label' => __('Sales'),     'value' => number_format($statistics['sales']),          'icon' => 'bi-bag-check'],
                ['key' => 'views',         'label' => __('Views'),     'value' => number_format($statistics['views']),          'icon' => 'bi-eye'],
                ['key' => 'average_rating','label' => __('Rating'),    'value' => number_format($statistics['average_rating'], 1), 'icon' => 'bi-star'],
            ];
        @endphp

        @foreach($statCards as $stat)
            <div class="col-6 col-md-4 col-lg">
                <div class="card border-0 shadow-sm h-100 text-center">
                    <div class="card-body py-3">
                        <i class="bi {{ $stat['icon'] }} text-primary fs-4"></i>
                        <div class="fw-bold fs-5">{{ $stat['value'] }}</div>
                        <div class="small text-muted">{{ $stat['label'] }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- ============ ABOUT ============ --}}
    @if($seller->about_me)
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white fw-semibold">{{ __('About :name', ['name' => $sellerName]) }}</div>
            <div class="card-body">
                <p class="mb-0" style="white-space: pre-line;">{{ $seller->about_me }}</p>
            </div>
        </div>
    @endif

    @if($seller->vacation_mode && $seller->vacation_message)
        <div class="alert alert-warning">
            <i class="bi bi-info-circle"></i> {{ $seller->vacation_message }}
        </div>
    @endif

    {{-- ============ FILTERS ============ --}}
    <form method="GET" action="{{ $storefrontUrl }}" id="seller-filter-form"
          class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-5">
                    <label class="form-label small fw-semibold mb-1">{{ __('Search products') }}</label>
                    <input type="search" name="q" class="form-control"
                           value="{{ $search }}"
                           placeholder="{{ __('Search in this store...') }}">
                </div>

                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">{{ __('Type') }}</label>
                    <select name="type" class="form-select">
                        <option value="">{{ __('All types') }}</option>
                        @foreach($productTypes as $type)
                            <option value="{{ $type }}" @selected($selectedType === $type)>
                                {{ ucfirst($type) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">{{ __('Sort') }}</label>
                    <select name="sort" class="form-select">
                        @foreach($sortOptions as $value => $label)
                            <option value="{{ $value }}" @selected($selectedSort === $value)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-1 d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>

            @if($activeFilterCount > 0)
                <div class="mt-2">
                    <a href="{{ $storefrontUrl }}" class="small text-danger text-decoration-none">
                        <i class="bi bi-x-circle"></i> {{ __('Clear filters') }}
                    </a>
                </div>
            @endif
        </div>
    </form>

    {{-- ============ PRODUCT LISTING ============ --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
        <h2 class="h5 mb-0">
            {{ __('Products') }}
            <span class="text-muted small">({{ number_format($products->total()) }})</span>
        </h2>

        @if($search !== '')
            <span class="small text-muted">
                {{ __('Results for ":q"', ['q' => $search]) }}
            </span>
        @endif
    </div>

    @if($products->isEmpty())
        <div class="text-center py-5 bg-white rounded shadow-sm">
            <i class="bi bi-inbox display-4 text-muted"></i>
            <h3 class="h6 mt-3">{{ __('No products found') }}</h3>
            <p class="text-muted small mb-3">
                {{ $search !== '' || $selectedType !== ''
                    ? __('Try adjusting your filters or search terms.')
                    : __('This seller has not published any products yet.') }}
            </p>
            @if($activeFilterCount > 0)
                <a href="{{ $storefrontUrl }}" class="btn btn-outline-primary btn-sm">
                    {{ __('Reset filters') }}
                </a>
            @endif
        </div>
    @else
        <div class="row g-3">
            @foreach($products as $product)
                @php
                    $detail = $product->details->first();
                    $image  = $product->images->first();

                    $price = (float) $product->price;
                    $discounted = (float) $product->price_discounted;
                    $hasDiscount = $discounted > 0 && $discounted < $price;
                    $selling = $hasDiscount ? $discounted : $price;

                    $catName = optional($product->category?->translations)->first()?->name
                        ?? $product->category?->slug;

                    $inWishlist = in_array((int) $product->id, $wishlistSet, true);

                    $promoActive = $product->is_promoted
                        && $product->promote_start_date
                        && $product->promote_end_date
                        && $product->promote_start_date <= now()
                        && $product->promote_end_date >= now();

                    $outOfStock = $product->product_type === 'physical'
                        && (int) $product->stock <= 0;
                @endphp

                <div class="col-6 col-md-4 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm product-card position-relative">

                        @auth
                            @unless((int) auth()->id() === (int) $seller->id)
                                <button type="button"
                                        class="btn btn-sm btn-light position-absolute top-0 end-0 m-2 rounded-circle wishlist-toggle"
                                        data-url="{{ route('account.wishlist.toggle', $product) }}"
                                        data-product-id="{{ $product->id }}"
                                        aria-label="{{ __('Toggle wishlist') }}">
                                    <i class="bi {{ $inWishlist ? 'bi-heart-fill text-danger' : 'bi-heart' }}"></i>
                                </button>
                            @endunless
                        @endauth

                        @if($promoActive)
                            <span class="badge bg-warning text-dark position-absolute top-0 start-0 m-2">
                                {{ __('Promoted') }}
                            </span>
                        @endif

                        <a href="{{ route('storefront.products.show', $product) }}"
                           class="text-decoration-none text-reset">
                            <div class="ratio ratio-4x3 bg-light rounded-top overflow-hidden">
                                @if($image)
                                    <img src="{{ asset('storage/' . ($image->image_small ?: $image->image_default)) }}"
                                         alt="{{ $detail?->title ?? $product->slug }}"
                                         class="object-fit-cover"
                                         loading="lazy">
                                @else
                                    <div class="d-flex align-items-center justify-content-center text-muted">
                                        <i class="bi bi-image fs-1"></i>
                                    </div>
                                @endif
                            </div>
                        </a>

                        <div class="card-body p-2 p-md-3 d-flex flex-column">
                            <a href="{{ route('storefront.products.show', $product) }}"
                               class="text-decoration-none text-reset">
                                <h3 class="h6 mb-1 line-clamp-2">
                                    {{ $detail?->title ?? Str::title(str_replace('-', ' ', $product->slug)) }}
                                </h3>
                            </a>

                            @if($detail?->short_description)
                                <p class="small text-muted mb-2 line-clamp-2">
                                    {{ Str::limit($detail->short_description, 70) }}
                                </p>
                            @endif

                            @if($catName)
                                <div class="small text-muted mb-2">
                                    <i class="bi bi-tag"></i> {{ $catName }}
                                </div>
                            @endif

                            @if((int) $product->reviews_count > 0)
                                <div class="small mb-2">
                                    <i class="bi bi-star-fill text-warning"></i>
                                    {{ number_format((float) $product->rating, 1) }}
                                    <span class="text-muted">({{ $product->reviews_count }})</span>
                                </div>
                            @endif

                            <div class="mt-auto d-flex justify-content-between align-items-end">
                                <div>
                                    @if($hasDiscount)
                                        <div class="text-muted small text-decoration-line-through">
                                            {{ number_format($price, 2) }}
                                        </div>
                                    @endif
                                    <div class="fw-bold">
                                        {{ number_format($selling, 2) }}
                                        <span class="small text-muted">{{ $product->currency }}</span>
                                    </div>
                                </div>

                                @if($outOfStock)
                                    <span class="badge bg-danger">{{ __('Out') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

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

@push('styles')
<style>
    .seller-hero { padding-bottom: 60px; }

    .seller-cover {
        height: 260px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: .5rem;
        overflow: hidden;
        position: relative;
    }

    /*
     * When we fall back to the avatar as the cover, scale it up and
     * softly blur + darken it so it reads as a backdrop rather than
     * a stretched profile picture.
     */
    .seller-cover--avatar {
        background-size: cover;
        background-position: center;
    }

    .seller-cover--avatar::before {
        content: "";
        position: absolute;
        inset: -20px;                      /* bleed so blur edges don't show */
        background: inherit;               /* reuse the same avatar image */
        background-size: cover;
        background-position: center;
        filter: blur(18px) brightness(0.65) saturate(1.15);
        transform: scale(1.1);
        z-index: 0;
    }

    .seller-cover--avatar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.35) 60%,
            rgba(0, 0, 0, 0.55) 100%
        );
        z-index: 1;
    }

    .seller-profile-card {
        margin-top: -70px;
        position: relative;
        z-index: 2;
    }

    .seller-avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-card { transition: transform .15s ease, box-shadow .15s ease; }
    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
    }

    @media (max-width: 575.98px) {
        .seller-cover { height: 180px; }
        .seller-avatar { width: 84px; height: 84px; }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.wishlist-toggle').forEach(btn => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            const icon = btn.querySelector('i');
            btn.disabled = true;
            try {
                const res = await fetch(btn.dataset.url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                if (!res.ok) throw new Error('Request failed');
                const data = await res.json();
                const active = !!data.active;
                icon.className = active
                    ? 'bi bi-heart-fill text-danger'
                    : 'bi bi-heart';
            } catch (err) {
                console.error(err);
            } finally {
                btn.disabled = false;
            }
        });
    });
});
</script>
@endpush