@extends('admin.layout')

@section('title', 'Marketplace')
@section('header', 'Marketplace')

@section('content')
<p class="text-slate-600 mb-8">Thèmes et plugins pour étendre votre site. Les thèmes gratuits sont inclus, les thèmes payants débloquent des designs professionnels.</p>

<div class="flex gap-3 mb-8 flex-wrap">
    <a href="{{ route('admin.marketplace.themes') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
        Thèmes
    </a>
    <a href="{{ route('admin.marketplace.plugins') }}" class="inline-flex items-center gap-2 px-5 py-2.5 border border-slate-200 rounded-xl font-medium hover:bg-slate-50 transition text-slate-700">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
        Plugins
    </a>
</div>

@if(!$stripeConfigured)
<div class="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-xl">
    <p class="text-amber-800 font-medium">Marketplace — paiement non configuré</p>
    @if(config('marketplace.payment.driver') === 'remote' && empty(config('marketplace.license.api_key')))
        <p class="text-sm text-amber-800 mt-2">L’URL du serveur de licence est définie (<span class="font-mono text-xs break-all">{{ config('marketplace.license.url') }}</span>), mais la <strong>clé API partagée</strong> manque. Sans elle, le CMS ne peut pas créer de session de paiement.</p>
        <ul class="text-sm text-amber-700 mt-2 list-disc list-inside space-y-1">
            <li><strong>Production :</strong> fichier <code class="bg-amber-100 px-1 rounded text-xs">bootstrap/gcms-infrastructure.key</code> — une seule ligne, identique à <code class="text-xs">LICENSE_API_KEY</code> sur le serveur de licence.</li>
            <li><strong>Développement :</strong> dans <code class="text-xs">.env</code>, <code class="text-xs">GCMS_DEV_INFRASTRUCTURE=true</code> et <code class="text-xs">MARKETPLACE_LICENSE_API_KEY=…</code> (même valeur).</li>
        </ul>
        <p class="text-xs text-amber-600 mt-2">Puis <code class="bg-amber-100 px-1 rounded">php artisan config:clear</code>.</p>
    @else
        <p class="text-sm text-amber-700 mt-1">Contactez l'administrateur du CMS (GdevStudio) pour activer les achats de thèmes et plugins.</p>
    @endif
</div>
@endif

@php
    $themesPreview = array_slice($catalogThemes ?? [], 0, 3);
    $themesTotal = count($catalogThemes ?? []);
    $themesMore = max(0, $themesTotal - count($themesPreview));

    $pluginsBySlug = collect($catalogPlugins ?? [])->keyBy('slug');
    $featuredPluginSlugs = ['section-plus', 'ecommerce', 'reservation'];
    $pluginsPreview = collect($featuredPluginSlugs)
        ->map(fn (string $slug) => $pluginsBySlug->get($slug))
        ->filter()
        ->values()
        ->all();
    $pluginsTotal = count($catalogPlugins ?? []);
    $pluginsMore = max(0, $pluginsTotal - count($pluginsPreview));
@endphp

<div class="grid md:grid-cols-2 gap-8">
    {{-- Thèmes --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-100">
            <h2 class="font-semibold text-slate-800">Thèmes</h2>
            <p class="text-sm text-slate-500 mt-1">Personnalisez l’apparence de votre site</p>
        </div>
        <div class="divide-y divide-slate-100">
            @foreach($themesPreview as $theme)
                <a href="{{ route('admin.marketplace.themes') }}" class="flex items-start gap-4 p-4 hover:bg-slate-50 transition">
                    <span class="w-24 shrink-0 overflow-hidden rounded-lg bg-slate-100 leading-none ring-1 ring-slate-200">
                        <img src="{{ $theme['screenshot'] }}" alt="" class="block w-full h-auto max-h-[4.25rem] object-cover object-left object-top">
                    </span>
                    <div class="flex-1 min-w-0">
                        <h3 class="font-medium text-slate-800">{{ $theme['name'] }}</h3>
                        <p class="text-sm text-slate-500 line-clamp-2 mt-0.5">{{ $theme['description'] }}</p>
                        <span class="text-sm font-semibold mt-1 inline-block {{ !empty($theme['external_url']) ? 'text-indigo-600' : (($theme['price'] ?? 0) > 0 ? 'text-amber-600' : 'text-emerald-600') }}">
                            @if(!empty($theme['external_url']))
                                Sur devis
                            @elseif(($theme['price'] ?? 0) > 0)
                                <x-marketplace-price :price="$theme['price']" /> €
                            @else
                                Gratuit
                            @endif
                        </span>
                    </div>
                </a>
            @endforeach
        </div>
        <div class="p-4 bg-slate-50 border-t border-slate-100">
            <a href="{{ route('admin.marketplace.themes') }}" class="text-primary-600 text-sm font-medium hover:underline inline-flex items-center gap-1">
                Voir tous les thèmes
                @if($themesMore > 0)<span class="text-slate-400 font-normal">({{ $themesMore }} autre{{ $themesMore > 1 ? 's' : '' }})</span>@endif
                <span aria-hidden="true">→</span>
            </a>
        </div>
    </div>

    {{-- Plugins — meilleures ventes (slugs figés) --}}
    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-100">
            <div class="flex flex-wrap items-center gap-2 gap-y-1">
                <h2 class="font-semibold text-slate-800">Plugins</h2>
                <span class="text-xs font-medium text-amber-800 bg-amber-50 border border-amber-200/80 rounded-full px-2.5 py-0.5">Meilleures ventes</span>
            </div>
            <p class="text-sm text-slate-500 mt-1">Section +, E-commerce, Réservation — les plus demandés.</p>
        </div>
        <div class="divide-y divide-slate-100">
            @foreach($pluginsPreview as $plugin)
                <a href="{{ route('admin.marketplace.plugins') }}" class="flex items-start gap-4 p-4 hover:bg-slate-50 transition">
                    <span class="w-24 shrink-0 overflow-hidden rounded-lg bg-slate-100 leading-none ring-1 ring-slate-200">
                        <img src="{{ $plugin['screenshot'] }}" alt="" class="block w-full h-auto max-h-[4.25rem] object-cover object-left object-top">
                    </span>
                    <div class="flex-1 min-w-0">
                        <h3 class="font-medium text-slate-800">{{ $plugin['name'] }}</h3>
                        <p class="text-sm text-slate-500 line-clamp-2 mt-0.5">{{ $plugin['description'] }}</p>
                        <span class="text-sm font-semibold text-amber-600 mt-1 inline-block"><x-marketplace-price :price="$plugin['price'] ?? 0" /> €</span>
                    </div>
                </a>
            @endforeach
        </div>
        <div class="p-4 bg-slate-50 border-t border-slate-100">
            <a href="{{ route('admin.marketplace.plugins') }}" class="text-primary-600 text-sm font-medium hover:underline inline-flex items-center gap-1">
                Voir tous les plugins
                @if($pluginsMore > 0)<span class="text-slate-400 font-normal">(+{{ $pluginsMore }} autre{{ $pluginsMore > 1 ? 's' : '' }})</span>@endif
                <span aria-hidden="true">→</span>
            </a>
        </div>
    </div>
</div>
@endsection
