@extends('layouts.app')

@section('title', 'Gift Shop - Magic City')

@section('content')
    @php
        $filterBase = '/shop/gift-shop';
        $shopUrl = function (array $overrides = []) use ($filterBase) {
            $params = array_filter([
                'brand' => request()->query('brand'),
                'cat' => request()->query('cat'),
                'tag' => request()->query('tag'),
                'mfr' => request()->query('mfr'),
                'min_price' => request()->query('min_price'),
                'max_price' => request()->query('max_price'),
                'stock' => request()->query('stock'),
                'dropship' => request()->query('dropship'),
                'dropship_available' => request()->query('dropship_available'),
                'best_selling' => request()->query('best_selling'),
                'deal_of_day' => request()->query('deal_of_day'),
                'quick_deal' => request()->query('quick_deal'),
            ], fn ($v) => $v !== null && $v !== '');

            foreach ($overrides as $key => $value) {
                if ($value === null || $value === '') {
                    unset($params[$key]);
                } else {
                    $params[$key] = $value;
                }
            }

            return empty($params) ? url($filterBase) : url($filterBase . '?' . http_build_query($params));
        };

        $facets = $catalogue['facets'];
        $paginator = $catalogue['paginator'];
        
        // Gift categories based on product tags/categories
        $giftSections = [
            'kids' => [
                'label' => 'Kids',
                'icon' => '🧸',
                'tags' => ['stem-toys', 'learning-toys', 'educational-gifts', 'age-3-5', 'age-6-8', 'age-9-12'],
                'description' => 'STEM toys, learning toys, educational gifts, age-oriented gifts',
            ],
            'ladies' => [
                'label' => 'Ladies',
                'icon' => '💎',
                'tags' => ['watches', 'jewellery', 'accessories', 'beauty-gifts'],
                'description' => 'Watches, jewellery, accessories, beauty/gift items',
            ],
            'men' => [
                'label' => 'Men',
                'icon' => '⌚',
                'tags' => ['watches', 'wallets', 'accessories', 'grooming-gifts'],
                'description' => 'Watches, wallets, accessories, grooming/gift items',
            ],
        ];
    @endphp

    <x-shop.hero-carousel
        :brands="$shop['brands'] ?? []"
        :active-brand="'magic'"
        :promo-cards="collect($shop['trend_categories'] ?? [])->filter(fn ($c) => str_contains($c['key'], 'gifts') || str_contains($c['key'], 'kids') || str_contains($c['key'], 'beauty'))->take(3)->map(fn ($c) => [
            'eyebrow' => 'Gift Ideas',
            'name' => $c['name'],
            'short_name' => $c['short_name'],
            'desc' => 'Curated ' . strtolower($c['short_name']) . ' gifts for every occasion.',
            'icon' => $c['icon'],
            'url' => url('/shop/gift-shop?cat=' . $c['key'] . '&brand=magic-city'),
            'theme' => 'magic',
        ])->all()"
    />

    <section class="gift-shop-intro" aria-labelledby="gift-shop-title">
        <div class="wrap">
            <div class="gift-intro-card">
                <h1 id="gift-shop-title" class="gift-intro-title">Magic City Gift Shop</h1>
                <p class="gift-intro-subtitle">Curated gifts for every occasion — beautifully wrapped, thoughtfully chosen.</p>
                <div class="gift-intro-badges">
                    <span class="gift-badge">🎁 Gift Wrapping Available</span>
                    <span class="gift-badge">💌 Personal Messages</span>
                    <span class="gift-badge">🚚 Local & International Delivery</span>
                    <span class="gift-badge">🎀 Surprise Delivery Options</span>
                </div>
            </div>
        </div>
    </section>

    <section class="gift-categories" aria-label="Gift categories">
        <div class="wrap">
            <div class="gift-cat-grid" role="list">
                @foreach ($giftSections as $key => $section)
                    <a class="gift-cat-card" href="{{ url('/shop/gift-shop?recipient=' . $key . '&brand=magic-city') }}" role="listitem">
                        <span class="gift-cat-icon">{{ $section['icon'] }}</span>
                        <h3 class="gift-cat-name">{{ $section['label'] }}</h3>
                        <p class="gift-cat-desc">{{ $section['description'] }}</p>
                        <span class="gift-cat-arrow">→</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="shop-catalogue" id="catalogue">
        <div class="shop-layout">
            @include('shop.partials.filter-panel')

            <div class="catalogue-main">
                <div class="catalogue-bar">
                    <button class="filters-toggle" id="filtersToggle" type="button" aria-expanded="false" aria-controls="filterPanel">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
                        Filters
                    </button>
                    <p class="catalogue-context" aria-live="polite">
                        @if($catalogue['active']['cat_name'])
                            {{ $catalogue['active']['cat_name'] }}
                        @elseif(request()->query('recipient'))
                            {{ ucfirst(request()->query('recipient')) }} Gifts
                        @else
                            All Gifts
                        @endif
                        · {{ $catalogue['total'] }} {{ Str::plural('gift', $catalogue['total']) }}
                    </p>
                </div>

                <div class="catalogue-grid gift-grid" id="catalogueGrid">
                    @forelse($catalogue['products'] as $product)
                        <x-product.gift-card :product="$product" />
                    @empty
                        <div class="deals-empty catalogue-empty">
                            <div class="deals-empty-emoji">🎁</div>
                            <div class="deals-empty-title">No gifts match these filters</div>
                            <div class="deals-empty-text">Try widening the price range or clearing a filter.</div>
                        </div>
                    @endforelse
                </div>

                @if($paginator && $paginator->lastPage() > 1)
                    <nav class="collection-pager" aria-label="Pagination">
                        @if($paginator->onFirstPage())
                            <span class="fp-chip pager-link is-disabled">← Prev</span>
                        @else
                            <a class="fp-chip pager-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">← Prev</a>
                        @endif

                        @foreach($paginator->getUrlRange(1, $paginator->lastPage()) as $page => $url)
                            <a class="fp-chip pager-link{{ $page === $paginator->currentPage() ? ' active' : '' }}" href="{{ $url }}" aria-label="Page {{ $page }}" @if($page === $paginator->currentPage()) aria-current="page" @endif>{{ $page }}</a>
                        @endforeach

                        @if($paginator->hasMorePages())
                            <a class="fp-chip pager-link" href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a>
                        @else
                            <span class="fp-chip pager-link is-disabled">Next →</span>
                        @endif
                    </nav>
                @endif
            </div>
        </div>
    </section>

    <div class="shop-filter-backdrop" id="shopFilterBackdrop" hidden></div>

    <section class="gift-services" aria-labelledby="gift-services-title">
        <div class="wrap">
            <h2 id="gift-services-title" class="gift-services-title">Gift Services</h2>
            <div class="gift-services-grid">
                <div class="gift-service-card">
                    <span class="gift-service-icon">🎁</span>
                    <h3>Gift Wrapping</h3>
                    <p>Premium wrapping with your choice of paper, ribbon, and gift tag.</p>
                    <span class="gift-service-tag">Available at checkout</span>
                </div>
                <div class="gift-service-card">
                    <span class="gift-service-icon">💌</span>
                    <h3>Personal Message</h3>
                    <p>Add a handwritten-style card with your personal message.</p>
                    <span class="gift-service-tag">Free with every gift</span>
                </div>
                <div class="gift-service-card">
                    <span class="gift-service-icon">📦</span>
                    <h3>Box Selection</h3>
                    <p>Choose from elegant gift boxes, bags, or custom packaging.</p>
                    <span class="gift-service-tag">Multiple options</span>
                </div>
                <div class="gift-service-card">
                    <span class="gift-service-icon">🚚</span>
                    <h3>Surprise Delivery</h3>
                    <p>Schedule a surprise delivery to the recipient&rsquo;s door.</p>
                    <span class="gift-service-tag">Local & International</span>
                </div>
            </div>
        </div>
    </section>

    <div class="shop-filter-backdrop" id="shopFilterBackdrop" hidden></div>

@endsection

@push('styles')
<style>
    .gift-shop-intro {
        margin: 24px 0 32px;
    }
    .gift-intro-card {
        background: linear-gradient(135deg, rgba(245,179,1,0.12), rgba(232,160,196,0.1));
        border: 1px solid var(--magic-gold);
        border-radius: var(--radius-lg);
        padding: 40px;
        text-align: center;
    }
    .gift-intro-title {
        font-family: 'Baloo 2', sans-serif;
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 700;
        margin-bottom: 12px;
        background: var(--magic-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .gift-intro-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        margin-bottom: 24px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .gift-intro-badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .gift-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--magic-gold);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 600;
        color: var(--magic-gold);
    }

    .gift-categories {
        margin: 32px 0 40px;
    }
    .gift-cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    .gift-cat-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        background: var(--panel);
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text);
        transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    }
    .gift-cat-card:hover {
        transform: translateY(-4px);
        border-color: var(--magic-gold);
        box-shadow: 0 16px 32px -12px rgba(245,179,1,0.4);
    }
    .gift-cat-icon {
        font-size: 36px;
        line-height: 1;
        margin-bottom: 12px;
    }
    .gift-cat-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .gift-cat-desc {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 12px;
    }
    .gift-cat-arrow {
        color: var(--magic-gold);
        font-weight: 700;
        transition: transform .25s var(--ease);
    }
    .gift-cat-card:hover .gift-cat-arrow {
        transform: translateX(4px);
    }

    .gift-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    .product-card.gift-card {
        position: relative;
    }
    .product-card.gift-card::before {
        content: '🎁';
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 16px;
        background: rgba(8,11,26,0.9);
        border: 1px solid var(--magic-gold);
        border-radius: 8px;
        padding: 2px 6px;
        z-index: 2;
    }

    .gift-services {
        margin: 48px 0 60px;
        padding: 40px 4vw;
        background: linear-gradient(180deg, rgba(245,179,1,0.04), transparent);
        border-top: 1px solid var(--panel-border);
        border-bottom: 1px solid var(--panel-border);
    }
    .gift-services-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 24px;
    }
    .gift-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        max-width: 1000px;
        margin: 0 auto;
    }
    .gift-service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        background: var(--panel);
        border: 1px solid var(--panel-border);
        border-radius: var(--radius-md);
        transition: transform .25s var(--ease), border-color .25s var(--ease);
    }
    .gift-service-card:hover {
        transform: translateY(-4px);
        border-color: var(--magic-gold);
    }
    .gift-service-icon {
        font-size: 28px;
        line-height: 1;
        margin-bottom: 12px;
    }
    .gift-service-card h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .gift-service-card p {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 12px;
    }
    .gift-service-tag {
        font-size: 11px;
        font-weight: 700;
        color: var(--magic-gold);
        background: rgba(245,179,1,0.12);
        border: 1px solid var(--magic-gold);
        border-radius: 999px;
        padding: 4px 12px;
    }

    @media (max-width: 760px) {
        .gift-intro-card {
            padding: 24px 20px;
        }
        .gift-cat-card {
            padding: 20px 16px;
        }
        .gift-cat-icon {
            font-size: 28px;
        }
        .gift-cat-name {
            font-size: 16px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    // Gift shop specific interactions
    document.addEventListener('DOMContentLoaded', function() {
        // Highlight current recipient filter
        const recipient = new URLSearchParams(window.location.search).get('recipient');
        if (recipient) {
            document.querySelectorAll('.gift-cat-card').forEach(card => {
                const href = card.getAttribute('href');
                if (href && href.includes('recipient=' + recipient)) {
                    card.style.borderColor = 'var(--magic-gold)';
                    card.style.boxShadow = '0 0 0 2px var(--magic-gold)';
                }
            });
        }
    });
</script>
@endpush