@extends('layouts.site')

@section('meta_title')
    {{ locale_field($product, 'name') }} — {{ __('site.nav_products') }}
@endsection

@section('title')
    {{ locale_field($product, 'name') }}
@endsection

@push('meta')
    @if (filled($product->meta_keywords))
        <meta name="keywords" content="{{ $product->meta_keywords }}">
    @endif
@endpush

@section('content')
    <x-site.lead-context
        :category-id="$product->category_id"
        :subject="collect([locale_field($product, 'name'), locale_category_name($product->category)])->filter()->implode(' — ')"
        source-type="product"
        :source-id="$product->id"
    />
    @php
        $locale = app()->getLocale();
        $card = \App\Support\Cards\ProductCardPresenter::from($product);
        $specs = collect($product->specifications ?? [])->filter(fn ($row) => $row !== null && $row !== '' && (! is_array($row) || ! empty(array_filter((array) $row))));
        $hasDesc = filled(locale_field($product, 'description'));
        $hasSpecs = $specs->isNotEmpty();
        $detailTabs = collect([
            $hasDesc ? ['key' => 'desc', 'label' => __('validation.attributes.description')] : null,
            $hasSpecs ? ['key' => 'specs', 'label' => __('site.spec_title')] : null,
            ['key' => 'faq', 'label' => __('site.detail_tab_faq')],
        ])->filter()->values()->all();
        $initialTab = $detailTabs[0]['key'] ?? 'faq';
    @endphp

    <x-site.engage-shell :engage-type="$engageType" :engage-id="$engageId" :engagement="$engagement" class="site-container pb-24">
        <article class="site-detail site-detail--product" data-reveal="page">
            <nav class="site-detail__breadcrumb eca-breadcrumb py-4 eca-theme-text-muted" aria-label="Breadcrumb" data-reveal="soft">
                <a href="{{ route('site.home', ['locale' => $locale]) }}" class="hover:text-brand-accent">{{ __('site.nav_home') }}</a>
                <span class="eca-breadcrumb__sep">›</span>
                <a href="{{ route('site.products.index', ['locale' => $locale]) }}">{{ __('site.nav_products') }}</a>
                @if ($product->category)
                    <span class="eca-breadcrumb__sep">›</span>
                    <a href="{{ route('site.products.index', ['locale' => $locale, 'category_id' => $product->category_id]) }}">{{ locale_category_name($product->category) }}</a>
                @endif
                <span class="eca-breadcrumb__sep">›</span>
                <span class="eca-theme-text">{{ locale_field($product, 'name') }}</span>
            </nav>

            <div class="site-detail-hero eca-detail-glass" data-reveal="section">
                <div class="site-detail-hero__media">
                    <x-site.image-gallery
                        :gallery="$gallery"
                        :alt="locale_field($product, 'name')"
                        mode="product"
                    />
                </div>

                <div class="site-detail-hero__info">
                    <div class="site-detail-chips">
                        @if ($product->featured)
                            <span class="site-detail-chip site-detail-chip--accent">{{ __('site.featured') }}</span>
                        @endif
                        @if ($product->category)
                            <span class="site-detail-chip">{{ locale_category_name($product->category) }}</span>
                        @endif
                        @if ($product->manufacturer)
                            <span class="site-detail-chip">{{ $product->manufacturer }}</span>
                        @endif
                    </div>

                    <h1 class="site-detail-hero__title">{{ locale_field($product, 'name') }}</h1>

                    <x-site.engagement.stats-bar :engagement="$engagement" variant="product" />

                    @if (locale_field($product, 'summary'))
                        <p class="site-detail-hero__summary">{{ locale_field($product, 'summary') }}</p>
                    @endif

                    @if ($card['has_price'] ?? false)
                        <p class="site-detail-hero__price">{{ $card['formatted_price'] }}</p>
                    @endif

                    @if ($product->ai_recommendation_percent)
                        <p class="site-detail-ai">
                            {{ __('site.card_ai_recommend', ['percent' => $product->ai_recommendation_percent]) }}
                        </p>
                    @endif

                    <div class="site-detail-cta">
                        @if ($card['can_request_price'] ?? false)
                            <x-site.price-inquiry-trigger :product="$product" class="site-btn-primary site-engage-glow" />
                        @endif
                        <a href="{{ site_whatsapp_url() }}" target="_blank" rel="noopener" class="site-btn-outline site-engage-glow">{{ __('site.cta_whatsapp') }}</a>
                        @feature('repair_services')
                        <button type="button" class="site-btn-outline" data-assistant-open data-intent="repair">
                            {{ __('site.cta_request') }}
                        </button>
                        @endfeature
                    </div>

                    <dl class="site-detail-meta">
                        @if ($product->sku)
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.sku') }}</dt>
                                <dd class="font-mono">{{ $product->sku }}</dd>
                            </div>
                        @endif
                        @if ($product->manufacturer)
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.manufacturer') }}</dt>
                                <dd>{{ $product->manufacturer }}</dd>
                            </div>
                        @endif
                        @if ($product->official_warranty)
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.card_badge_warranty') }}</dt>
                                <dd>{{ __('site.repair_warranty_active') }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>

            <x-site.detail-tabs class="mt-8" :tabs="$detailTabs" :initial="$initialTab">
                @if ($hasDesc)
                    <div class="site-detail-tabs__panel" x-show="tab === 'desc'" role="tabpanel">
                        <div class="eca-detail-prose prose prose-sm">
                            {!! nl2br(e(locale_field($product, 'description'))) !!}
                        </div>
                    </div>
                @endif

                @if ($hasSpecs)
                    <div class="site-detail-tabs__panel" x-show="tab === 'specs'" x-cloak role="tabpanel">
                        <dl class="site-detail-specs divide-y eca-theme-border border eca-theme-border">
                            @foreach ($specs as $key => $row)
                                @if (is_array($row))
                                    @php
                                        $label = $row['label'] ?? $row['title'] ?? $row['key'] ?? null;
                                        $value = $row['value'] ?? $row['text'] ?? null;
                                    @endphp
                                    @if ($label !== null && $label !== '')
                                        <div class="site-detail-specs__row">
                                            <dt>{{ $label }}</dt>
                                            <dd>{{ $value ?? '—' }}</dd>
                                        </div>
                                    @endif
                                @elseif (! is_numeric($key))
                                    <div class="site-detail-specs__row">
                                        <dt>{{ $key }}</dt>
                                        <dd>{{ $row }}</dd>
                                    </div>
                                @endif
                            @endforeach
                        </dl>
                    </div>
                @endif

                <div class="site-detail-tabs__panel eca-theme-text-muted" x-show="tab === 'faq'" x-cloak role="tabpanel">
                    <p class="py-2 text-sm eca-theme-text-muted">{{ __('site.detail_faq_contact') }}</p>
                </div>
            </x-site.detail-tabs>

            <div class="site-detail-process mt-10 desktop:mt-12">
                <x-site.home-repair-process lazy />
            </div>

            @include('partials.site.related-rail', ['rail' => $relatedRail ?? null])
        </article>
    </x-site.engage-shell>
@endsection