@extends('admin.layout')

@section('title', 'Thèmes - Marketplace')
@section('header', 'Thèmes')

@section('content')
@if(session('success'))
    <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl">
        <p>{{ session('success') }}</p>
    </div>
@endif
@if($errors->any())
    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-xl">
        @foreach($errors->all() as $error)
            <p>{{ $error }}</p>
        @endforeach
    </div>
@endif
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-800">Thèmes</h1>
        <p class="text-slate-600">Choisissez un thème pour votre site. Gratuit ou premium.</p>
    </div>
    <a href="{{ route('admin.marketplace.index') }}" class="text-indigo-600 hover:underline">← Marketplace</a>
</div>

<div class="mb-6 p-4 bg-indigo-50 border border-indigo-100 rounded-lg">
    <h3 class="font-medium text-indigo-800 mb-2">Installer un thème personnalisé (ZIP)</h3>
    <p class="text-sm text-indigo-700 mb-3">Uploadez un fichier ZIP contenant votre thème. Le ZIP doit contenir un dossier avec theme.json, home.blade.php, etc.</p>
    <form action="{{ route('admin.marketplace.upload-theme') }}" method="POST" enctype="multipart/form-data" class="flex flex-wrap items-end gap-3">
        @csrf
        <input type="file" name="zip" accept=".zip" required class="block w-full max-w-xs text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-indigo-100 file:text-indigo-700 hover:file:bg-indigo-200">
        <button type="submit" class="px-4 py-2 bg-indigo-500 text-white rounded-lg text-sm font-medium hover:bg-indigo-600 transition">Installer</button>
    </form>
    @error('zip')
        <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
    @enderror
</div>

<div class="mb-6 p-4 bg-slate-100 rounded-lg">
    <h3 class="font-medium text-slate-800 mb-2">Vos thèmes installés</h3>
    <div class="flex flex-wrap gap-2">
        @foreach($installedThemes ?? [] as $slug => $theme)
            <span class="px-3 py-1 {{ ($theme['source'] ?? '') === 'custom' ? 'bg-indigo-100 text-indigo-800' : 'bg-green-100 text-green-800' }} rounded-full text-sm">
                {{ $theme['name'] ?? $slug }}
                @if(($theme['source'] ?? '') === 'custom')
                    <span class="text-xs opacity-75">(personnalisé)</span>
                @endif
            </span>
        @endforeach
    </div>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 items-start">
    @foreach($catalog ?? [] as $theme)
        @php
            $isInstalled = isset($installedThemes[$theme['slug']]) || in_array($theme['slug'], $purchases ?? []);
        @endphp
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="w-full overflow-hidden bg-zinc-950 leading-none">
                <img src="{{ $theme['screenshot'] }}" alt="{{ $theme['name'] }}" class="block w-full h-auto">
            </div>
            <div class="p-4">
                <a href="{{ route('admin.marketplace.index') }}" class="block">
                    <h3 class="font-semibold text-slate-800">{{ $theme['name'] }}</h3>
                </a>
                <p class="text-sm text-slate-500 mt-1">{{ $theme['description'] }}</p>
                <div class="mt-4 flex items-center justify-between">
                    @if(!empty($theme['external_url'] ?? null))
                        <span class="text-slate-600 font-medium">Sur devis</span>
                        <a href="{{ $theme['external_url'] }}" target="_blank" rel="noopener" class="px-3 py-1.5 bg-primary-500 text-white rounded-lg text-sm font-medium hover:bg-primary-600 transition">
                            Demander un devis
                        </a>
                    @elseif(($theme['price'] ?? 0) > 0)
                        <span class="font-bold text-amber-600"><x-marketplace-price :price="$theme['price']" /> €</span>
                        @if($isInstalled)
                            <span class="text-sm text-green-600 font-medium">Acheté</span>
                        @else
                            <form action="{{ route('admin.marketplace.purchase') }}" method="POST" class="inline">
                                @csrf
                                <input type="hidden" name="type" value="theme">
                                <input type="hidden" name="slug" value="{{ $theme['slug'] }}">
                                <button type="submit" class="px-3 py-1.5 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 transition">
                                    Acheter
                                </button>
                            </form>
                        @endif
                    @else
                        <span class="text-green-600 font-medium">Gratuit</span>
                        <a href="{{ route('admin.appearance.index') }}" class="text-sm text-indigo-600">Activer</a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="mt-8 p-4 bg-slate-50 rounded-lg">
    <h3 class="font-medium text-slate-800 mb-2">Thèmes disponibles</h3>
    <p class="text-sm text-slate-600">Classic (gratuit). Un thème sur mesure ? Demandez un devis ou uploadez votre propre thème en ZIP.</p>
</div>
@endsection
