@extends('api_panel.layouts.app')

@section('title', t('apipanel-store-title'))

@section('content')
    @php
        use App\Services\ApiPlatform\ProductCatalog;
        $endpointsTabUrl = route('apipanel.store', ['tab' => 'endpoints']);
    @endphp

    <h1 class="apipanel-h1 mb-1">{{ t('apipanel-store-title') }}</h1>
    <p class="apipanel-muted mb-4">{{ t('apipanel-store-subtitle') }}</p>

    {{-- ─── Ürünler ─── --}}
    <section class="mb-4" aria-labelledby="apipanel-products-title">
        <div class="d-flex flex-wrap align-items-baseline justify-content-between gap-2 mb-3">
            <h2 class="apipanel-h2 mb-0" id="apipanel-products-title">
                {{ ProductCatalog::text('apipanel-products-title', 'Ürünler', 'Products') }}
            </h2>
            <span class="apipanel-muted">
                {{ ProductCatalog::text('apipanel-products-subtitle', 'Her ürün, plan kotası · kredi veya endpoint paketi ile kullanılabilir.', 'Every product can be used with plan quota, credits or an endpoint pack.') }}
            </span>
        </div>

        <div class="row g-3">
            @foreach($products as $product)
                {{-- MCP satın alınabilir bir kalem değil: tek başına tam genişlikte durur. --}}
                <div class="{{ $product['is_mcp'] ? 'col-12' : 'col-12 col-lg-6' }}">
                    <article class="apipanel-product {{ $product['is_mcp'] ? 'is-mcp' : '' }}">
                        <span class="apipanel-product-icon" aria-hidden="true">
                            <i class="{{ $product['icon'] }}"></i>
                        </span>

                        <div class="apipanel-product-body">
                            <h3 class="apipanel-product-name">{{ $product['name'] }}</h3>
                            <p class="apipanel-product-tagline">{{ $product['tagline'] }}</p>

                            <div class="apipanel-product-meta">
                                @if($product['is_mcp'])
                                    <span class="apipanel-badge {{ $mcpHasAccess ? 'is-monthly' : 'is-locked' }}">
                                        @if($mcpHasAccess)
                                            {{ ProductCatalog::text('apipanel-product-mcp-badge-active', 'Planınızda dahil', 'Included in your plan') }}
                                        @else
                                            {{ ProductCatalog::text('apipanel-product-mcp-badge', 'MCP erişimi olan bir plan gerekir', 'Requires a plan with MCP access') }}
                                        @endif
                                    </span>
                                @else
                                    <span class="apipanel-chip">
                                        {{ $product['sku_count'] }} {{ ProductCatalog::text('apipanel-products-endpoint-unit', 'endpoint', 'endpoints') }}
                                    </span>
                                    @if($product['has_offers'])
                                        <span class="apipanel-chip">
                                            {{ $product['offer_count'] }} {{ ProductCatalog::text('apipanel-products-offer-unit', 'paket', 'packs') }}
                                        </span>
                                    @endif
                                @endif
                            </div>

                            <div class="apipanel-product-foot">
                                @if($product['is_mcp'])
                                    @if($mcpHasAccess)
                                        <a class="apipanel-btn apipanel-btn-ghost btn-sm" href="{{ $mcpUrl }}" target="_blank" rel="noopener">
                                            {{ ProductCatalog::text('apipanel-product-mcp-cta', 'Nasıl bağlanır', 'How to connect') }}
                                            <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                                        </a>
                                    @else
                                        {{-- Plan yükseltmeden MCP'yi tek başına satın almak isteyenler için --}}
                                        @if($product['has_offers'])
                                            <a class="apipanel-btn apipanel-btn-ghost btn-sm"
                                               href="{{ $endpointsTabUrl }}#{{ $product['anchor'] }}">
                                                {{ ProductCatalog::text('apipanel-product-mcp-buy', 'MCP erişimini satın al', 'Buy MCP access') }}
                                            </a>
                                        @endif
                                        <a class="apipanel-btn apipanel-btn-ghost btn-sm"
                                           href="{{ route('apipanel.store', ['tab' => 'plans']) }}">
                                            {{ ProductCatalog::text('apipanel-product-mcp-upgrade', 'MCP\'li plana yükselt', 'Upgrade to an MCP-enabled plan') }}
                                        </a>
                                    @endif
                                @elseif($product['has_offers'])
                                    <a class="apipanel-btn apipanel-btn-ghost btn-sm"
                                       href="{{ $endpointsTabUrl }}#{{ $product['anchor'] }}">
                                        {{ ProductCatalog::text('apipanel-products-detail', 'Paketleri gör', 'View packs') }}
                                    </a>
                                @else
                                    <a class="apipanel-btn apipanel-btn-ghost btn-sm"
                                       href="{{ route('apipanel.store', ['tab' => 'plans']) }}">
                                        {{ ProductCatalog::text('apipanel-products-via-plan', 'Plan veya kredi ile kullanın', 'Use with a plan or credits') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>
    </section>

    <div class="apipanel-tabs mb-4">
        <a class="apipanel-tab {{ $tab === 'plans' ? 'is-active' : '' }}" href="{{ route('apipanel.store', ['tab' => 'plans']) }}">
            {{ t('apipanel-store-tab-plans') }}
        </a>
        <a class="apipanel-tab {{ $tab === 'credits' ? 'is-active' : '' }}" href="{{ route('apipanel.store', ['tab' => 'credits']) }}">
            {{ t('apipanel-store-tab-credits') }}
        </a>
        <a class="apipanel-tab {{ $tab === 'endpoints' ? 'is-active' : '' }}" href="{{ $endpointsTabUrl }}">
            {{ t('apipanel-store-tab-endpoints') }}
        </a>
    </div>

    {{-- ─── Planlar ─── --}}
    <section id="plans" class="{{ $tab === 'plans' ? '' : 'd-none' }}">
        @if($plans->isEmpty())
            <p class="apipanel-muted">{{ t('apipanel-store-empty') }}</p>
        @else
            <div class="row g-3">
                @foreach($plans as $plan)
                    <div class="col-12 col-md-6 col-lg-3">
                        <div class="apipanel-card h-100 d-flex flex-column">
                            <h3 class="apipanel-h3">{{ t((string) $plan->name_key) }}</h3>
                            @if($plan->description_key)
                                <p class="apipanel-muted small">{{ t((string) $plan->description_key) }}</p>
                            @endif

                            <div class="apipanel-price">
                                {{ number_format((float) $plan->monthly_price, 2, ',', '.') }} ₺
                                <small>/ {{ t('apipanel-month') }}</small>
                            </div>

                            <ul class="apipanel-list">
                                <li>{{ $plan->isUnlimited() ? t('apipanel-stat-unlimited') : number_format((int) $plan->monthly_request_quota) }} {{ t('apipanel-usage-requests') }}</li>
                                <li>{{ number_format((int) $plan->rate_limit_per_minute) }} {{ t('apipanel-plan-rate-limit') }}</li>
                                <li>{{ (int) $plan->max_keys }} {{ t('apipanel-plan-max-keys') }}</li>
                            </ul>

                            <form method="POST" action="{{ route('apipanel.checkout.start') }}" class="mt-auto">
                                @csrf
                                <input type="hidden" name="item_type" value="plan">
                                <input type="hidden" name="item_id" value="{{ $plan->id }}">
                                <input type="hidden" name="quantity" value="1">
                                <button type="submit" class="apipanel-btn apipanel-btn-primary w-100">
                                    {{ $currentPlan && (int) $currentPlan->id === (int) $plan->id ? t('apipanel-store-renew') : t('apipanel-store-buy') }}
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </section>

    {{-- ─── Kredi paketleri ─── --}}
    <section id="credits" class="{{ $tab === 'credits' ? '' : 'd-none' }}">
        @if($creditPacks->isEmpty())
            <p class="apipanel-muted">{{ t('apipanel-store-empty') }}</p>
        @else
            <div class="row g-3">
                @foreach($creditPacks as $pack)
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="apipanel-card h-100 d-flex flex-column">
                            <h3 class="apipanel-h3">{{ t((string) $pack->name_key) }}</h3>
                            <div class="apipanel-price">
                                {{ number_format((float) $pack->price, 2, ',', '.') }} ₺
                            </div>
                            <p class="apipanel-muted">{{ number_format((int) $pack->credits) }} {{ t('apipanel-credit-unit') }}</p>

                            <form method="POST" action="{{ route('apipanel.checkout.start') }}" class="mt-auto">
                                @csrf
                                <input type="hidden" name="item_type" value="credit_pack">
                                <input type="hidden" name="item_id" value="{{ $pack->id }}">
                                <div class="apipanel-buy-row">
                                    <input type="number" name="quantity" value="1" min="1" max="20" class="apipanel-input apipanel-qty"
                                           aria-label="{{ t('apipanel-quantity') }}">
                                    <button type="submit" class="apipanel-btn apipanel-btn-primary">{{ t('apipanel-store-buy') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </section>

    {{-- ─── Endpoint paketleri (ürün başlıkları altında) ─── --}}
    <section id="endpoints" class="{{ $tab === 'endpoints' ? '' : 'd-none' }}">
        @if(empty($offerProducts))
            <p class="apipanel-muted">{{ t('apipanel-store-empty') }}</p>
        @else
            @foreach($offerProducts as $bucket)
                <div class="apipanel-anchor" id="{{ $bucket['anchor'] }}">
                    <h3 class="apipanel-section-head">
                        <span class="apipanel-product-icon is-sm" aria-hidden="true"><i class="{{ $bucket['icon'] }}"></i></span>
                        {{ $bucket['name'] }}
                        <span class="apipanel-muted">{{ count($bucket['skus']) }} {{ ProductCatalog::text('apipanel-products-endpoint-unit', 'endpoint', 'endpoints') }}</span>
                    </h3>

                    <div class="row g-3 mb-4">
                        @foreach($bucket['skus'] as $group)
                            <div class="col-12 col-lg-6">
                                <div class="apipanel-card h-100">
                                    <h4 class="apipanel-h3 mb-1">{{ $group['name'] }}</h4>
                                    <code class="apipanel-muted d-block mb-2">{{ $group['sku'] }}</code>

                                    @unless($group['sku'] === \App\Services\ApiPlatform\ApiMeteringService::MCP_ACCESS_SKU)
                                        <p class="apipanel-muted small mb-3">
                                            {{ str_replace(':credits', $group['credit_cost'], t('apipanel-credit-note')) }}
                                        </p>
                                    @endunless

                                    @foreach($group['offers'] as $offer)
                                        <form method="POST" action="{{ route('apipanel.checkout.start') }}" class="apipanel-offer">
                                            @csrf
                                            <input type="hidden" name="item_type" value="endpoint_offer">
                                            <input type="hidden" name="item_id" value="{{ $offer->id }}">

                                            <div class="apipanel-offer-info">
                                                <span class="apipanel-badge {{ $offer->isMonthly() ? 'is-monthly' : 'is-onetime' }}">
                                                    {{ $offer->isMonthly() ? t('apipanel-offer-monthly') : t('apipanel-offer-onetime') }}
                                                </span>
                                                @unless($group['sku'] === \App\Services\ApiPlatform\ApiMeteringService::MCP_ACCESS_SKU)
                                                    <span>{{ number_format((int) $offer->requests) }} {{ t('apipanel-usage-requests') }}</span>
                                                @endunless
                                                <strong>{{ number_format((float) $offer->price, 2, ',', '.') }} ₺</strong>
                                            </div>

                                            <div class="apipanel-offer-actions">
                                                <input type="number" name="quantity" value="1" min="1" max="20" class="apipanel-input apipanel-qty"
                                                       aria-label="{{ t('apipanel-quantity') }}">
                                                <button type="submit" class="apipanel-btn apipanel-btn-primary">{{ t('apipanel-store-buy') }}</button>
                                            </div>
                                        </form>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        @endif
    </section>
@endsection