@extends('layouts.admin')
@section('title', 'Landing Pages')

@section('admin')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{ aiOpen: false }">
    @include('admin._nav')

    <div class="flex items-center justify-between mb-7">
        <div>
            <h1 class="text-2xl font-bold text-white">Landing Pages</h1>
            <p class="text-gray-500 text-sm mt-1">Slug-addressable lead-capture pages that auto-tag new subscribers.</p>
        </div>
        <div class="flex gap-3">
            <button type="button" @click="aiOpen = true"
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-purple-700 hover:bg-purple-600 text-white text-sm font-semibold rounded-xl shadow-lg shadow-purple-900/30 transition-all">
                <i class="fa-solid fa-wand-magic-sparkles text-xs"></i> Generate with AI
            </button>
            <a href="{{ route('admin.landing-pages.create') }}"
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-red-600 hover:bg-red-500 text-white text-sm font-semibold rounded-xl shadow-lg shadow-red-900/30 transition-all">
                <i class="fa-solid fa-plus text-xs"></i> New Landing Page
            </a>
        </div>
    </div>

    {{-- AI Generate modal --}}
    <div x-show="aiOpen" x-cloak
         class="fixed inset-0 bg-black/75 backdrop-blur-sm flex items-center justify-center z-50 p-4"
         @click.self="aiOpen = false">
        <form method="POST" action="{{ route('admin.landing-pages.aiGenerate') }}"
              class="bg-gray-900 border border-gray-700/60 rounded-2xl p-7 max-w-xl w-full shadow-2xl"
              @click.stop>
            @csrf
            <div class="flex items-center gap-3 mb-5">
                <div class="w-10 h-10 rounded-xl bg-purple-900/50 border border-purple-700/40 flex items-center justify-center">
                    <i class="fa-solid fa-wand-magic-sparkles text-purple-400"></i>
                </div>
                <div>
                    <h3 class="text-white font-bold text-lg leading-none">Generate landing page</h3>
                    <p class="text-gray-500 text-xs mt-0.5">Claude drafts headline, body, and CTA from your brief</p>
                </div>
            </div>

            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Brief / prompt</label>
            <textarea name="prompt" rows="5" required
                      class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700/60 rounded-xl text-white text-sm resize-none focus:outline-none focus:border-purple-600 placeholder-gray-600"
                      placeholder="E.g. A landing page inviting busy moms to subscribe to a 5-minute morning devotional. Emphasize peace before the day starts and free signup."></textarea>

            <div class="mt-3">
                <label class="block text-xs text-gray-500 mb-1">Slug <span class="text-gray-600">(optional, auto-derived from title)</span></label>
                <div class="flex items-center bg-gray-950 border border-gray-700/60 rounded-xl overflow-hidden focus-within:border-purple-600">
                    <span class="px-2 text-xs text-gray-600 border-r border-gray-700">/lp/</span>
                    <input name="slug" pattern="[-a-z0-9]+" placeholder="morning-peace"
                           class="flex-1 px-2 py-2 bg-transparent text-white text-sm focus:outline-none">
                </div>
            </div>

            <div class="flex justify-end gap-3 mt-6">
                <button type="button" @click="aiOpen = false" class="px-4 py-2 text-gray-400 hover:text-white text-sm transition-colors">Cancel</button>
                <button type="submit" class="flex items-center gap-2 px-5 py-2 bg-purple-700 hover:bg-purple-600 text-white rounded-xl font-semibold text-sm transition-colors shadow-lg shadow-purple-900/40">
                    <i class="fa-solid fa-wand-magic-sparkles text-xs"></i> Generate
                </button>
            </div>
        </form>
    </div>

    @if(session('success'))
    <div class="mb-5 p-3 rounded-xl bg-emerald-900/30 border border-emerald-700/50 text-emerald-300 text-sm">{{ session('success') }}</div>
    @endif

    @if($pages->isEmpty())
    <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-12 text-center">
        <i class="fa-solid fa-bullseye text-3xl text-gray-700 mb-3 block"></i>
        <p class="text-gray-400 mb-1">No landing pages yet.</p>
        <p class="text-gray-600 text-sm">Create one to capture leads and auto-tag subscribers.</p>
    </div>
    @else
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @foreach($pages as $p)
        @php $rate = $p->view_count > 0 ? ($p->conversion_count / $p->view_count) * 100 : 0; @endphp
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-5 hover:border-gray-700 transition-colors">
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        @if($p->status === 'published')
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-900/30 text-emerald-300 border border-emerald-700/40 uppercase">Live</span>
                        @else
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gray-800 text-gray-400 border border-gray-700 uppercase">Draft</span>
                        @endif
                        <code class="text-xs text-gray-500">/lp/{{ $p->slug }}</code>
                    </div>
                    <h3 class="text-white font-semibold truncate">{{ $p->title }}</h3>
                    <p class="text-gray-500 text-xs mt-0.5 line-clamp-1">{{ $p->headline }}</p>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-2 mb-4">
                <div class="bg-gray-950/60 border border-gray-800/60 rounded-lg p-2 text-center">
                    <div class="text-gray-500 text-[10px] uppercase tracking-wider">Views</div>
                    <div class="text-white font-bold text-sm">{{ number_format($p->view_count) }}</div>
                </div>
                <div class="bg-gray-950/60 border border-gray-800/60 rounded-lg p-2 text-center">
                    <div class="text-gray-500 text-[10px] uppercase tracking-wider">Signups</div>
                    <div class="text-emerald-300 font-bold text-sm">{{ number_format($p->conversion_count) }}</div>
                </div>
                <div class="bg-gray-950/60 border border-gray-800/60 rounded-lg p-2 text-center">
                    <div class="text-gray-500 text-[10px] uppercase tracking-wider">Rate</div>
                    <div class="font-bold text-sm {{ $rate >= 10 ? 'text-emerald-300' : ($rate >= 3 ? 'text-amber-300' : 'text-gray-300') }}">{{ number_format($rate, 1) }}%</div>
                </div>
            </div>

            @if(!empty($p->tag_slugs))
            <div class="flex flex-wrap gap-1 mb-3">
                @foreach($p->tag_slugs as $t)
                <span class="px-2 py-0.5 rounded-full text-[10px] bg-purple-900/20 text-purple-300 border border-purple-700/30">#{{ $t }}</span>
                @endforeach
            </div>
            @endif

            <div class="flex items-center gap-2">
                <a href="{{ route('admin.landing-pages.edit', $p) }}"
                   class="flex-1 text-center px-3 py-1.5 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white rounded-lg text-xs font-medium transition-colors">
                    <i class="fa-solid fa-pen-to-square text-[10px]"></i> Edit
                </a>
                @if($p->status === 'published')
                <a href="{{ route('landing.show', $p->slug) }}" target="_blank"
                   class="flex-1 text-center px-3 py-1.5 bg-blue-900/30 hover:bg-blue-900/50 border border-blue-700/40 text-blue-300 rounded-lg text-xs font-medium transition-colors">
                    <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i> View
                </a>
                <form method="POST" action="{{ route('admin.landing-pages.unpublish', $p) }}"
                      onsubmit="return confirm('Unpublish — the /lp/{{ $p->slug }} URL will 404. Continue?');">
                    @csrf
                    <button class="px-3 py-1.5 bg-amber-900/20 hover:bg-amber-900/40 border border-amber-800/40 text-amber-300 rounded-lg text-xs font-medium transition-colors" title="Unpublish">
                        <i class="fa-solid fa-eye-slash text-[10px]"></i>
                    </button>
                </form>
                @else
                <form method="POST" action="{{ route('admin.landing-pages.publish', $p) }}">
                    @csrf
                    <button class="flex-1 px-3 py-1.5 bg-emerald-900/30 hover:bg-emerald-900/50 border border-emerald-700/40 text-emerald-300 rounded-lg text-xs font-medium transition-colors" title="Publish">
                        <i class="fa-solid fa-rocket text-[10px]"></i> Publish
                    </button>
                </form>
                @endif
                <form method="POST" action="{{ route('admin.landing-pages.destroy', $p) }}"
                      onsubmit="return confirm('Delete this landing page?');">
                    @csrf @method('DELETE')
                    <button class="px-3 py-1.5 bg-red-900/20 hover:bg-red-900/50 border border-red-800/30 text-red-400 rounded-lg text-xs font-medium transition-colors">
                        <i class="fa-solid fa-trash text-[10px]"></i>
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>
@endsection