@extends('layouts.admin', ['title' => 'Products'])

@section('admin-content')
<section class="space-y-6" x-data="{ createOpen: false }">
    <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <h1 class="font-display text-3xl font-bold text-white">Products & app integrations</h1>
                <p class="mt-2 max-w-3xl text-sm text-slate-400">Create products, configure the integration credentials your commercial apps will use, and manage release channels without crowding the screen.</p>
            </div>
            <button @click="createOpen = !createOpen" class="rounded-full bg-brand-500 px-5 py-3 font-semibold text-white shadow-glow">
                <span x-text="createOpen ? 'Hide product form' : 'Create new product'"></span>
            </button>
        </div>
        <div class="mt-6 grid gap-4 sm:grid-cols-3">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Stable releases</div><div class="mt-2 text-2xl font-bold text-white">{{ $versionStats['stable'] }}</div></div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Beta releases</div><div class="mt-2 text-2xl font-bold text-white">{{ $versionStats['beta'] }}</div></div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Forced updates</div><div class="mt-2 text-2xl font-bold text-white">{{ $versionStats['forced'] }}</div></div>
        </div>
        <div x-show="createOpen" class="mt-6 rounded-3xl border border-white/10 bg-slate-950/40 p-5">
            <form method="POST" action="{{ route('admin.products.store') }}" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                @csrf
                <input name="name" placeholder="Product name" title="Enter the commercial app name customers will recognize" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                <select name="category_id" title="Choose the product category used for internal organization" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    <option value="">No category</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
                <input name="sku" placeholder="SKU" title="Use a short unique product code for billing and cataloging" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                <select name="default_plan_type" title="Select the default license plan sold for this product" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                    <option value="subscription">Subscription</option>
                    <option value="lifetime">Lifetime</option>
                    <option value="trial">Trial</option>
                </select>
                <input name="trial_days" type="number" min="0" placeholder="Trial days" title="Optional: set the number of trial days for trial-enabled plans" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <input name="support_url" placeholder="Support URL" title="Optional: link to your help desk or support portal" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <input name="documentation_url" placeholder="Documentation URL" title="Optional: link to setup docs or user documentation" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white md:col-span-2">
                <textarea name="description" rows="3" placeholder="Short product description" title="Describe what this product does for customers" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white md:col-span-2 xl:col-span-3"></textarea>
                <button type="submit" class="rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white md:col-span-2 xl:col-span-3">Create product</button>
            </form>
        </div>
    </div>

    <div class="space-y-5">
        @foreach ($products as $product)
            <article class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-5 sm:p-6" x-data="{ section: 'overview' }">
                <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-3">
                            <h2 class="font-display text-2xl font-bold text-white">{{ $product->name }}</h2>
                            <span class="rounded-full {{ $product->is_active ? 'bg-emerald-500/15 text-emerald-200' : 'bg-rose-500/15 text-rose-200' }} px-3 py-1 text-xs uppercase tracking-[0.2em]">{{ $product->is_active ? 'Active' : 'Paused' }}</span>
                        </div>
                        <p class="mt-2 text-sm text-slate-400">{{ $product->description ?: 'No description provided yet.' }}</p>
                        <div class="mt-3 flex flex-wrap gap-3 text-xs uppercase tracking-[0.18em] text-slate-500">
                            <span>{{ $product->sku }}</span>
                            <span>{{ $product->api_identifier }}</span>
                            <span>{{ $product->licenses_count }} licenses</span>
                            <span>{{ $product->latest_version ?: 'No release yet' }}</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2 text-sm">
                        <button @click="section = 'overview'" :class="section === 'overview' ? 'bg-brand-500 text-white' : 'bg-white/5 text-slate-200'" class="rounded-full px-4 py-2">Overview</button>
                        <button @click="section = 'integration'" :class="section === 'integration' ? 'bg-brand-500 text-white' : 'bg-white/5 text-slate-200'" class="rounded-full px-4 py-2">Integration</button>
                        <button @click="section = 'releases'" :class="section === 'releases' ? 'bg-brand-500 text-white' : 'bg-white/5 text-slate-200'" class="rounded-full px-4 py-2">Releases</button>
                        <form method="POST" action="{{ route('admin.products.destroy', $product) }}">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="rounded-full bg-rose-500/80 px-4 py-2 text-white">Delete</button>
                        </form>
                    </div>
                </div>

                <div x-show="section === 'overview'" class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Plan mode</div><div class="mt-2 text-lg font-semibold text-white">{{ ucfirst($product->default_plan_type) }}</div></div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Trial days</div><div class="mt-2 text-lg font-semibold text-white">{{ $product->trial_days }}</div></div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Offline validation</div><div class="mt-2 text-lg font-semibold text-white">{{ $product->supports_offline_validation ? 'Enabled' : 'Disabled' }}</div></div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-sm text-slate-400">Domain locking</div><div class="mt-2 text-lg font-semibold text-white">{{ $product->requires_domain_lock ? 'Required' : 'Optional' }}</div></div>
                </div>

                <div x-show="section === 'integration'" class="mt-6 grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                        <h3 class="font-display text-xl font-semibold text-white">Integration kit</h3>
                        <div class="mt-4 space-y-3 text-sm">
                            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                                <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Base API</div>
                                <div class="mt-1 break-all font-mono text-slate-100">{{ config('app.url') }}/api/v1</div>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                                <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Product Identifier</div>
                                <div class="mt-1 break-all font-mono text-slate-100">{{ $product->api_identifier }}</div>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                                <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Verification Token</div>
                                <div class="mt-1 break-all font-mono text-slate-100">{{ $product->verification_token }}</div>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                                <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Required App Flow</div>
                                <div class="mt-2 text-slate-300">1. Installer sends `email`, `password`, `license_key`, `product_identifier`, `domain`.</div>
                                <div class="mt-1 text-slate-300">2. Central server verifies ownership and binds the install.</div>
                                <div class="mt-1 text-slate-300">3. App stores encrypted offline cache and revalidates periodically.</div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                        <h3 class="font-display text-xl font-semibold text-white">Integration settings</h3>
                        <form method="POST" action="{{ route('admin.products.integration.update', $product) }}" class="mt-4 grid gap-4 md:grid-cols-2">
                            @csrf
                            <input name="api_identifier" value="{{ $product->api_identifier }}" placeholder="API Identifier" title="Unique identifier sent by the installed app when verifying this product" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                            <input name="verification_token" value="{{ $product->verification_token }}" placeholder="Verification token" title="Secret token used to bind this product integration to the license server" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                            <input name="support_url" value="{{ $product->support_url }}" placeholder="Support URL" title="Optional: direct admins or customers to the support portal for this app" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                            <input name="documentation_url" value="{{ $product->documentation_url }}" placeholder="Documentation URL" title="Optional: link to setup, integration, or user documentation" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                            <textarea name="integration_notes" rows="4" placeholder="Notes for the installed app or developer team" title="Use this area for internal notes, installer guidance, or integration reminders" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white md:col-span-2">{{ $product->integration_notes }}</textarea>
                            <label class="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300"><input type="checkbox" name="is_active" value="1" {{ $product->is_active ? 'checked' : '' }}> Product active</label>
                            <label class="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300"><input type="checkbox" name="supports_offline_validation" value="1" {{ $product->supports_offline_validation ? 'checked' : '' }}> Offline validation</label>
                            <label class="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300 md:col-span-2"><input type="checkbox" name="requires_domain_lock" value="1" {{ $product->requires_domain_lock ? 'checked' : '' }}> Enforce domain locking</label>
                            <button type="submit" class="rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white md:col-span-2">Save integration</button>
                        </form>
                    </div>
                </div>

                <div x-show="section === 'releases'" class="mt-6 grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                        <h3 class="font-display text-xl font-semibold text-white">Add release</h3>
                        <form method="POST" action="{{ route('admin.products.versions.store', $product) }}" class="mt-4 grid gap-3 sm:grid-cols-2">
                            @csrf
                            <input name="version" placeholder="Version" title="Enter the version string exactly as customers will receive it" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                            <select name="release_channel" title="Choose whether this build is stable or beta" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                                <option value="stable">Stable</option>
                                <option value="beta">Beta</option>
                            </select>
                            <input name="download_url" placeholder="Download URL" title="Optional: direct package URL for customers or updater checks" class="sm:col-span-2 rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                            <textarea name="release_notes" rows="3" placeholder="Release notes" title="Summarize what changed in this release for admins and customers" class="sm:col-span-2 rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white"></textarea>
                            <label class="sm:col-span-2 flex items-center gap-3 text-sm text-slate-300"><input type="checkbox" name="is_forced" value="1"> Force this update for active customers</label>
                            <button type="submit" class="sm:col-span-2 rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white">Publish release</button>
                        </form>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                        <h3 class="font-display text-xl font-semibold text-white">Release history</h3>
                        <div class="mt-4 overflow-hidden rounded-3xl border border-white/10">
                            <div class="hidden grid-cols-4 bg-white/5 px-4 py-3 text-left text-xs uppercase tracking-[0.2em] text-slate-400 sm:grid">
                                <div>Version</div><div>Channel</div><div>Forced</div><div>Released</div>
                            </div>
                            <div class="divide-y divide-white/10">
                                @forelse ($product->versions->sortByDesc('released_at') as $version)
                                    <div class="grid gap-2 px-4 py-4 text-sm text-slate-200 sm:grid-cols-4 sm:gap-4">
                                        <div><span class="sm:hidden text-slate-500">Version:</span> {{ $version->version }}</div>
                                        <div><span class="sm:hidden text-slate-500">Channel:</span> {{ ucfirst($version->release_channel) }}</div>
                                        <div><span class="sm:hidden text-slate-500">Forced:</span> {{ $version->is_forced ? 'Yes' : 'No' }}</div>
                                        <div><span class="sm:hidden text-slate-500">Released:</span> {{ $version->released_at?->format('Y-m-d') ?: 'Pending' }}</div>
                                    </div>
                                @empty
                                    <div class="px-4 py-4 text-sm text-slate-400">No releases added yet.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        @endforeach
        <div>{{ $products->links() }}</div>
    </div>
</section>
@endsection