@php
    $layoutComponent = ($useAdminLayout ?? false) ? 'test-admin-layout' : 'app-layout';
@endphp

<x-dynamic-component :component="$layoutComponent">
    <div class="p-6 max-w-6xl mx-auto">
        @php
            $row = collect($catalog)->firstWhere('key', $key);
            $label = $row['name'] ?? str_replace('_', ' ', $key);
            $leadQuery = ($input['lead_id'] ?? 0) > 0 ? ['lead_id' => $input['lead_id']] : [];
        @endphp

        <div class="mb-6 flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Preview: {{ $label }}</h1>
                @if($subject)
                    <p class="text-gray-600 mt-1">Subject: {{ $subject }}</p>
                @endif
            </div>
            <a href="{{ route($routes['index'], $leadQuery) }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                &larr; Back to sequence
            </a>
        </div>

        <div class="mb-6 flex flex-wrap items-center gap-4">
            <form action="{{ route($routes['send'], $key) }}" method="POST" class="flex flex-wrap items-center gap-3">
                @csrf
                @foreach($input as $name => $value)
                    <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                @endforeach
                <label class="inline-flex items-center gap-1 text-sm text-gray-600">
                    <input type="radio" name="recipient" value="lead" checked class="rounded border-gray-300 text-blue-600">
                    Lead email
                </label>
                <label class="inline-flex items-center gap-1 text-sm text-gray-600">
                    <input type="radio" name="recipient" value="me" class="rounded border-gray-300 text-blue-600">
                    Me ({{ $user->email }})
                </label>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">
                    Send now
                </button>
            </form>
        </div>

        <div class="border border-gray-200 rounded-xl overflow-hidden bg-gray-100">
            <div class="px-4 py-2 bg-gray-200 border-b border-gray-200 flex items-center justify-between">
                <span class="text-sm font-medium text-gray-600">Email preview</span>
                <span class="text-xs text-gray-500">Desktop width ~600px</span>
            </div>
            <div class="p-4 overflow-auto max-h-[80vh] bg-gray-200">
                <div class="bg-white shadow-lg mx-auto rounded-lg overflow-hidden" style="max-width: 600px;">
                    {!! $html !!}
                </div>
            </div>
        </div>

        <div class="mt-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Preview other emails</h3>
            <div class="flex flex-wrap gap-2">
                @foreach($catalog as $item)
                    <a href="{{ route($routes['preview'], array_merge(['key' => $item['key']], $leadQuery)) }}"
                       class="px-4 py-2 rounded-lg text-sm font-medium transition
                              {{ $item['key'] === $key ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        {{ $item['num'] }}. {{ $item['name'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</x-dynamic-component>