@extends('layouts.admin')
@section('title', 'Edit Campaign — ' . $campaign->name)

@push('styles')
    @vite(['resources/css/email-editor.css'])
    <style>
        /* The Unlayer editor needs ~1100px+ to show toolbox, canvas, and
           settings panel side-by-side. The default public+admin layout caps
           the main column near 1024px which forces Unlayer to collapse panels
           and looks broken. Break out to viewport width on the editor page. */
        body:has(#email-editor) main.container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
        body:has(#email-editor) .admin-main { padding-left: 1rem !important; padding-right: 1rem !important; }
        body:has(#email-editor) .max-w-7xl { max-width: none !important; }
        #email-editor { min-height: 760px; }
    </style>
    {{-- Flatpickr (date/time picker) --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/themes/dark.css">
    <style>
        .flatpickr-calendar { background:#0a0a0a !important; border:1px solid #1f2937 !important; }
        .flatpickr-day.selected { background:#dc2626 !important; border-color:#dc2626 !important; }
        .flatpickr-day:hover { background:#1f2937 !important; }
    </style>
@endpush

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

    @include('admin._partials.breadcrumbs', ['crumbs' => [
        ['label' => 'Campaigns', 'url' => route('admin.campaigns.index')],
        ['label' => $campaign->name, 'url' => route('admin.campaigns.show', $campaign)],
        ['label' => 'Edit'],
    ]])

    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold text-white">{{ $campaign->name }}</h1>
            <p class="text-sm text-gray-400">
                Status: <span class="px-2 py-0.5 bg-gray-800 rounded">{{ $campaign->status }}</span>
                @if($campaign->approval_status && $campaign->approval_status !== 'none')
                    @php $ac = ['pending' => 'amber', 'approved' => 'emerald', 'rejected' => 'red'][$campaign->approval_status] ?? 'gray'; @endphp
                    · Approval: <span class="px-2 py-0.5 rounded bg-{{ $ac }}-900/40 text-{{ $ac }}-300">{{ $campaign->approval_status }}</span>
                @endif
                @if($campaign->is_quick_send)<span class="ml-2 text-amber-300 text-xs"><i class="fa-solid fa-bolt"></i> quick send</span>@endif
            </p>
        </div>
        <div class="flex gap-2 items-center">
            <span id="autosave-indicator" class="text-xs text-gray-500"></span>
            <button type="button" @click="$dispatch('open-preview-as')"
                    class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded text-sm">
                <i class="fa-solid fa-eye mr-1"></i> Preview as subscriber
            </button>
            <a href="{{ route('admin.campaigns.show', $campaign) }}" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded text-sm">Pre-send Review →</a>
        </div>
    </div>

    {{-- Cross-cutting modal: preview the campaign rendered with a real subscriber's tokens. --}}
    @php
        $previewSubs = \App\Models\Subscriber::where('status', \App\Models\Subscriber::STATUS_ACTIVE)
            ->orderByDesc('id')->limit(20)->get(['id','email','first_name']);
    @endphp
    <div x-data>
        @include('admin._partials.preview_subscriber_modal', [
            'previewUrl'  => route('admin.campaigns.preview', $campaign),
            'subscribers' => $previewSubs,
        ])
    </div>

    {{-- ---- Preflight + approval + winner panels (v2) ---- --}}
    @php
        $preflightSvc = app(\App\Services\EmailPreflightService::class);
        $preflightIssues = $preflightSvc->check($campaign);
        $preflight = $preflightSvc->summarize($preflightIssues);
        $pfErrors   = array_values(array_filter($preflightIssues, fn ($i) => $i['level'] === 'error'));
        $pfWarnings = array_values(array_filter($preflightIssues, fn ($i) => $i['level'] === 'warning'));
        $pfInfos    = array_values(array_filter($preflightIssues, fn ($i) => $i['level'] === 'info'));
    @endphp
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-4">
            <div class="flex items-center justify-between">
                <h3 class="text-sm font-semibold text-white"><i class="fa-solid fa-shield-halved mr-1"></i>Preflight</h3>
                <span class="text-xs px-2 py-0.5 rounded
                    @if($preflight['score'] >= 85) bg-emerald-900/40 text-emerald-300
                    @elseif($preflight['score'] >= 60) bg-amber-900/40 text-amber-300
                    @else bg-red-900/40 text-red-300 @endif">
                    {{ $preflight['score'] }}/100
                </span>
            </div>
            <ul class="mt-2 text-xs space-y-1 max-h-40 overflow-y-auto">
                @foreach($pfErrors as $e)<li class="text-red-300"><i class="fa-solid fa-circle-xmark mr-1"></i>{{ $e['message'] }}</li>@endforeach
                @foreach($pfWarnings as $w)<li class="text-amber-300"><i class="fa-solid fa-triangle-exclamation mr-1"></i>{{ $w['message'] }}</li>@endforeach
                @foreach($pfInfos as $i)<li class="text-gray-400"><i class="fa-solid fa-circle-info mr-1"></i>{{ $i['message'] }}</li>@endforeach
                @if(empty($pfErrors) && empty($pfWarnings))
                    <li class="text-emerald-300"><i class="fa-solid fa-circle-check mr-1"></i>All checks passed.</li>
                @endif
            </ul>
        </div>

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-4">
            <h3 class="text-sm font-semibold text-white mb-2"><i class="fa-solid fa-user-check mr-1"></i>Approval workflow</h3>
            @if($campaign->approval_status === 'approved')
                <p class="text-xs text-emerald-300">Approved by user #{{ $campaign->approved_by }} {{ $campaign->approved_at?->diffForHumans() }}.</p>
            @elseif($campaign->approval_status === 'pending')
                <p class="text-xs text-amber-300 mb-2">Awaiting approval. Review and decide on the <a href="{{ route('admin.campaigns.show', $campaign) }}" class="underline hover:text-white">campaign page →</a></p>
            @elseif($campaign->approval_status === 'rejected')
                <p class="text-xs text-red-300 mb-2">Rejected. {{ $campaign->approval_notes }}</p>
                <form method="POST" action="{{ route('admin.campaigns.submitApproval', $campaign) }}">
                    @csrf
                    <button class="text-xs px-3 py-1 bg-violet-700 hover:bg-violet-600 rounded text-white">Re-submit for approval</button>
                </form>
            @else
                <form method="POST" action="{{ route('admin.campaigns.submitApproval', $campaign) }}">
                    @csrf
                    <input name="notes" placeholder="Notes (optional)" class="w-full mb-2 bg-gray-950 border border-gray-700 rounded px-2 py-1 text-xs text-white">
                    <button class="text-xs px-3 py-1 bg-red-700 hover:bg-red-600 rounded text-white">Submit for approval</button>
                </form>
            @endif
        </div>

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-4">
            <h3 class="text-sm font-semibold text-white mb-2"><i class="fa-solid fa-trophy mr-1"></i>A/B winner</h3>
            @if(! $campaign->subject_b)
                <p class="text-xs text-gray-500">No B variant configured.</p>
            @elseif($campaign->winner_variant)
                <p class="text-xs text-emerald-300">Variant <strong>{{ $campaign->winner_variant }}</strong> selected
                    @if($campaign->winner_metric)({{ $campaign->winner_metric }})@endif.</p>
            @else
                <form method="POST" action="{{ route('admin.campaigns.pickWinner', $campaign) }}" class="flex items-center gap-2">
                    @csrf
                    <select name="metric" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-xs text-white">
                        <option value="open">by opens</option>
                        <option value="click">by clicks</option>
                    </select>
                    <button class="text-xs px-3 py-1 bg-red-700 hover:bg-red-600 rounded text-white">Pick winner</button>
                </form>
            @endif
        </div>
    </div>

    @if(session('success'))<div class="mb-4 p-3 rounded bg-green-900/50 border border-green-700 text-green-200">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="mb-4 p-3 rounded bg-red-900/50 border border-red-700 text-red-200">{{ session('error') }}</div>@endif

    @php $approvalLocked = $campaign->approval_status === 'pending'; @endphp
    @if($approvalLocked)
        <div class="mb-4 p-4 rounded-xl bg-amber-900/30 border border-amber-700/50 text-amber-200 text-sm flex items-start gap-3" data-test="approval-lock-banner">
            <i class="fa-solid fa-lock text-amber-300 mt-0.5"></i>
            <div>
                <p class="font-semibold">This campaign is locked for review.</p>
                <p class="text-xs text-amber-100/80 mt-1">A reviewer must <a href="{{ route('admin.campaigns.show', $campaign) }}" class="underline hover:text-white">approve or reject</a> this draft before further edits or scheduling. Saves are blocked while pending.</p>
            </div>
        </div>
    @endif
    @if($campaign->approval_status === 'rejected' && $campaign->approval_notes)
        <div class="mb-4 p-4 rounded-xl bg-red-900/30 border border-red-700/50 text-red-200 text-sm flex items-start gap-3" data-test="approval-rejected-banner">
            <i class="fa-solid fa-circle-xmark text-red-300 mt-0.5"></i>
            <div>
                <p class="font-semibold">Reviewer rejected this draft.</p>
                <p class="text-xs text-red-100/80 mt-1">"{{ $campaign->approval_notes }}"</p>
                <p class="text-xs text-red-100/60 mt-1">Make changes and submit again from <a href="{{ route('admin.campaigns.show', $campaign) }}" class="underline hover:text-white">the campaign page</a>.</p>
            </div>
        </div>
    @endif

    <form id="campaign-form" method="POST" action="{{ route('admin.campaigns.update', $campaign) }}" class="space-y-6">
        @csrf
        @method('PUT')
        <fieldset @if($approvalLocked) disabled @endif class="space-y-6 {{ $approvalLocked ? 'opacity-60' : '' }}">

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Name</label>
                    <input name="name" value="{{ old('name', $campaign->name) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" required>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Subject</label>
                    <input name="subject" value="{{ old('subject', $campaign->subject) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" required>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm text-gray-300 mb-1">Preheader</label>
                    <input name="preheader" value="{{ old('preheader', $campaign->preheader) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Subject B (A/B variant)</label>
                    <input name="subject_b" value="{{ old('subject_b', $campaign->subject_b) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">A/B split % (0–50, share that gets variant B)</label>
                    <input name="ab_split_percent" type="number" min="0" max="50" value="{{ old('ab_split_percent', $campaign->ab_split_percent ?? 0) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">From Name</label>
                    <input name="from_name" value="{{ old('from_name', $campaign->from_name) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">From Address</label>
                    <input name="from_address" type="email" value="{{ old('from_address', $campaign->from_address) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Reply-To</label>
                    <input name="reply_to" type="email" value="{{ old('reply_to', $campaign->reply_to) }}" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="text-sm text-gray-300 mb-2">Audience Segment (optional)</h3>
                    <select name="segment_id" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                        <option value="">— None (use tag include/exclude) —</option>
                        @foreach($segments as $seg)
                            <option value="{{ $seg->id }}" @selected(old('segment_id', $campaign->segment_id)==$seg->id)>{{ $seg->name }} @if(!is_null($seg->last_count)) ({{ number_format($seg->last_count) }}) @endif</option>
                        @endforeach
                    </select>
                    <p class="text-xs text-gray-500 mt-1">When set, the segment query is intersected with any include/exclude tag filters.</p>
                </div>
                <div></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="text-sm text-gray-300 mb-2">Include tags</h3>
                    <div class="grid grid-cols-2 gap-2">
                        @foreach($tags as $tag)
                            <label class="flex items-center gap-2 text-sm text-gray-200">
                                <input type="checkbox" name="include_tags[]" value="{{ $tag->id }}" @checked(in_array($tag->id, $included))> {{ $tag->name }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div>
                    <h3 class="text-sm text-gray-300 mb-2">Exclude tags</h3>
                    <div class="grid grid-cols-2 gap-2">
                        @foreach($tags as $tag)
                            <label class="flex items-center gap-2 text-sm text-gray-200">
                                <input type="checkbox" name="exclude_tags[]" value="{{ $tag->id }}" @checked(in_array($tag->id, $excluded))> {{ $tag->name }}
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Schedule mode</label>
                    <select name="schedule_mode" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                        @foreach(['now'=>'Send now','datetime'=>'At date/time','per_tz'=>'Local time per subscriber','cron'=>'Recurring (cron)'] as $val=>$lbl)
                            <option value="{{ $val }}" @selected(old('schedule_mode', $campaign->schedule_mode)===$val)>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Scheduled at</label>
                    <input type="text" name="scheduled_at" id="editScheduledAt"
                           value="{{ old('scheduled_at', $campaign->scheduled_at && $campaign->schedule_timezone
                                ? $campaign->scheduled_at->copy()->setTimezone($campaign->schedule_timezone)->format('Y-m-d\TH:i')
                                : optional($campaign->scheduled_at)->format('Y-m-d\TH:i')) }}"
                           placeholder="Click to choose date & time"
                           class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white cursor-pointer">
                    <p id="editScheduledAtHint" class="text-[11px] text-gray-500 mt-1"></p>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Timezone</label>
                    @php
                        $tzOptionsEdit = [
                            'America/New_York'    => 'Eastern (New York)',
                            'America/Chicago'     => 'Central (Chicago)',
                            'America/Denver'      => 'Mountain (Denver)',
                            'America/Phoenix'     => 'Mountain — no DST (Phoenix)',
                            'America/Los_Angeles' => 'Pacific (Los Angeles)',
                            'America/Anchorage'   => 'Alaska (Anchorage)',
                            'Pacific/Honolulu'    => 'Hawaii (Honolulu)',
                            'UTC'                 => 'UTC',
                            'Europe/London'       => 'London',
                            'Europe/Berlin'       => 'Berlin / Paris',
                            'Asia/Tokyo'          => 'Tokyo',
                            'Australia/Sydney'    => 'Sydney',
                        ];
                        $editTz = old('schedule_timezone', $campaign->schedule_timezone ?: config('app.timezone', 'America/Denver'));
                    @endphp
                    <select name="schedule_timezone" id="editScheduleTz"
                            class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                        @foreach($tzOptionsEdit as $tz => $lbl)
                            <option value="{{ $tz }}" @selected($editTz === $tz)>{{ $lbl }} — {{ $tz }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Cron expression</label>
                    <input name="cron_expression" value="{{ old('cron_expression', $campaign->cron_expression) }}" placeholder="0 8 * * *" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
            </div>
        </div>

        {{-- Hidden fields the editor populates on save --}}
        <input type="hidden" name="mjml_source" id="mjml_source">
        <input type="hidden" name="grapes_data" id="grapes_data">
        <input type="hidden" name="compiled_html" id="compiled_html">
        <input type="hidden" name="plain_text" id="plain_text">

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
            <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
                <h2 class="text-lg text-white font-semibold">Email Designer</h2>
                <div class="flex flex-wrap gap-2">
                    <button type="button" id="btn-ai" class="px-3 py-1.5 bg-purple-700 hover:bg-purple-600 text-white text-sm rounded">✨ Generate with AI</button>
                    <button type="button" id="btn-template" class="px-3 py-1.5 bg-sky-700 hover:bg-sky-600 text-white text-sm rounded">📄 Replace with template…</button>
                    <button type="button" id="btn-blocks" class="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded">🧱 Blocks</button>
                    <button type="button" id="btn-save-as-block" class="px-3 py-1.5 bg-indigo-700 hover:bg-indigo-600 text-white text-sm rounded">＋ Save as Block</button>
                    <button type="button" id="btn-preview-desktop" class="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded">🖥 Desktop preview</button>
                    <button type="button" id="btn-preview-mobile" class="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded">📱 Mobile preview</button>
                    <button type="button" id="btn-send-test" class="px-3 py-1.5 bg-yellow-700 hover:bg-yellow-600 text-white text-sm rounded">✈ Send test</button>
                    <button type="button" id="btn-save" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm rounded font-medium">💾 Save</button>
                </div>
            </div>
            <div id="email-editor"></div>
        </div>
        </fieldset>
    </form>

    {{-- AI generate-whole-email modal --}}
    <div id="ai-modal" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50 p-6">
        <div class="bg-gray-950 border border-gray-800 rounded-xl shadow-2xl max-w-xl w-full">
            <div class="flex justify-between items-center p-4 border-b border-gray-800">
                <h3 class="text-white font-semibold">✨ Generate email with AI</h3>
                <button type="button" id="ai-modal-close" class="text-gray-400 hover:text-white">✕</button>
            </div>
            <div class="p-4 space-y-4">
                <p class="text-xs text-gray-500">Describe the email you want. Claude will draft a complete, on-brand design (hero, scripture, body, CTA) and load it into the canvas. Replaces the current canvas — your existing design will be lost.</p>
                <div>
                    <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Brief / prompt</label>
                    <textarea id="ai-modal-prompt" rows="5" required placeholder="A weekday devotional on God's faithfulness in Hebrews 11, with a CTA to subscribe to our morning email series."
                              class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded text-white text-sm focus:border-purple-500 focus:outline-none"></textarea>
                </div>
                <div class="flex items-center gap-2">
                    <input id="ai-modal-overwrite" type="checkbox" checked class="rounded border-gray-700 bg-gray-900">
                    <label for="ai-modal-overwrite" class="text-xs text-gray-300">Replace current canvas (uncheck to append)</label>
                </div>
                <div class="flex items-center gap-2">
                    <input id="ai-modal-fill-meta" type="checkbox" checked class="rounded border-gray-700 bg-gray-900">
                    <label for="ai-modal-fill-meta" class="text-xs text-gray-300">Also generate subject + preheader</label>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Hero image</label>
                    <select id="ai-modal-hero-mode" class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded text-white text-sm focus:border-purple-500 focus:outline-none">
                        <option value="smart" selected>Smart — match a Library image; generate one if none fits</option>
                        <option value="library">Use Media Library only</option>
                        <option value="generate">Generate a fresh image (Nano Banana)</option>
                        <option value="none">No hero image</option>
                    </select>
                    <p class="mt-1 text-[11px] text-gray-500">Generated images are auto-saved to the Media Library tagged <code>ai-generated</code>.</p>
                </div>

                <details class="border border-gray-800 rounded">
                    <summary class="cursor-pointer px-3 py-2 text-xs font-semibold text-gray-300 hover:bg-gray-900 select-none">🎨 Style options</summary>
                    <div class="p-3 space-y-3 border-t border-gray-800">
                        <div class="flex flex-col gap-2">
                            <label class="flex items-start gap-2 cursor-pointer">
                                <input type="radio" name="ai-style-mode" value="brand" checked class="mt-1 border-gray-700 bg-gray-900">
                                <span class="text-xs"><span class="text-gray-200 font-medium">Use Brand Kit</span><br><span class="text-gray-500">Default. Inherits primary, accent, body/heading fonts, and background from your brand kit.</span></span>
                            </label>
                            <label class="flex items-start gap-2 cursor-pointer">
                                <input type="radio" name="ai-style-mode" value="auto" class="mt-1 border-gray-700 bg-gray-900">
                                <span class="text-xs"><span class="text-gray-200 font-medium">Auto-style with AI</span><br><span class="text-gray-500">Claude proposes colors, fonts, and spacing tuned to the brief — anchored on your brand kit so it stays on-brand.</span></span>
                            </label>
                            <label class="flex items-start gap-2 cursor-pointer">
                                <input type="radio" name="ai-style-mode" value="custom" class="mt-1 border-gray-700 bg-gray-900">
                                <span class="text-xs"><span class="text-gray-200 font-medium">Custom</span><br><span class="text-gray-500">Override any of the values below. Anything left blank falls back to the brand kit.</span></span>
                            </label>
                        </div>
                        <div id="ai-style-custom" class="grid grid-cols-2 gap-2 hidden">
                            <label class="text-xs text-gray-400">Primary color
                                <input type="color" name="primary_color" value="{{ \App\Models\BrandKit::current()->primary_color ?: '#7c0000' }}" class="block w-full h-8 mt-1 bg-gray-900 border border-gray-800 rounded">
                            </label>
                            <label class="text-xs text-gray-400">Accent color
                                <input type="color" name="accent_color" value="{{ \App\Models\BrandKit::current()->accent_color ?: '#dc2626' }}" class="block w-full h-8 mt-1 bg-gray-900 border border-gray-800 rounded">
                            </label>
                            <label class="text-xs text-gray-400">Text color
                                <input type="color" name="text_color" value="{{ \App\Models\BrandKit::current()->text_color ?: '#111827' }}" class="block w-full h-8 mt-1 bg-gray-900 border border-gray-800 rounded">
                            </label>
                            <label class="text-xs text-gray-400">Background
                                <input type="color" name="background_color" value="{{ \App\Models\BrandKit::current()->background_color ?: '#f5f0e6' }}" class="block w-full h-8 mt-1 bg-gray-900 border border-gray-800 rounded">
                            </label>
                            <label class="text-xs text-gray-400 col-span-1">Body font
                                <select name="body_font" class="block w-full mt-1 px-2 py-1 bg-gray-900 border border-gray-800 rounded text-white text-xs">
                                    <option value="">— auto / brand default —</option>
                                    @foreach (\App\Services\TemplateLibraryService::safeFontStacks() as $stack => $label)
                                        <option value="{{ $stack }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <label class="text-xs text-gray-400 col-span-1">Heading font
                                <select name="heading_font" class="block w-full mt-1 px-2 py-1 bg-gray-900 border border-gray-800 rounded text-white text-xs">
                                    <option value="">— auto / brand default —</option>
                                    @foreach (\App\Services\TemplateLibraryService::safeFontStacks() as $stack => $label)
                                        <option value="{{ $stack }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <label class="text-xs text-gray-400 col-span-2">Spacing density
                                <select name="density" class="block w-full mt-1 px-2 py-1 bg-gray-900 border border-gray-800 rounded text-white text-xs">
                                    <option value="compact">Compact</option>
                                    <option value="normal" selected>Normal</option>
                                    <option value="airy">Airy</option>
                                </select>
                            </label>
                        </div>
                    </div>
                </details>

                <p id="ai-modal-error" class="text-xs text-red-400 hidden"></p>
                <p id="ai-modal-status" class="text-xs text-amber-400 hidden">⏳ Drafting your email — this can take 20–90 seconds (longer when generating a hero image)…</p>
            </div>
            <div class="flex justify-end gap-2 p-4 border-t border-gray-800">
                <button type="button" id="ai-modal-cancel" class="px-4 py-2 text-gray-400 hover:text-white text-sm">Cancel</button>
                <button type="button" id="ai-modal-submit" class="px-4 py-2 bg-purple-700 hover:bg-purple-600 disabled:opacity-50 disabled:cursor-wait text-white text-sm rounded font-medium">Generate</button>
            </div>
        </div>
    </div>

    {{-- Replace-with-template modal --}}
    <div id="tpl-modal" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50 p-6">
        <form id="tpl-form" method="POST" action="{{ route('admin.campaigns.applyTemplate', $campaign) }}"
              class="bg-gray-950 border border-gray-800 rounded-xl shadow-2xl max-w-xl w-full"
              onsubmit="return confirm('Replace the current design with this template? Your existing canvas will be overwritten — this cannot be undone.');">
            @csrf
            <div class="flex justify-between items-center p-4 border-b border-gray-800">
                <h3 class="text-white font-semibold">📄 Replace design with template</h3>
                <button type="button" id="tpl-modal-close" class="text-gray-400 hover:text-white">✕</button>
            </div>
            <div class="p-4 space-y-4">
                <p class="text-xs text-gray-500">Pick a template to copy onto this campaign. The template's design replaces your current canvas. Future edits to the template will <strong class="text-gray-300">not</strong> affect this campaign.</p>
                <div>
                    <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Template</label>
                    <select name="template_id" required class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded text-white text-sm focus:border-sky-500 focus:outline-none">
                        <option value="">— Choose a template —</option>
                        @foreach($templates as $t)
                            <option value="{{ $t->id }}" @selected(old('template_id', $campaign->template_id) == $t->id)>{{ $t->name }}</option>
                        @endforeach
                    </select>
                    @if($templates->isEmpty())
                        <p class="mt-2 text-xs text-amber-400">No templates yet. Create one in <a href="{{ route('admin.email-templates.index') }}" class="underline">Email Templates</a> first.</p>
                    @endif
                </div>
            </div>
            <div class="flex justify-end gap-2 p-4 border-t border-gray-800">
                <button type="button" id="tpl-modal-cancel" class="px-4 py-2 text-gray-400 hover:text-white text-sm">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-sky-700 hover:bg-sky-600 disabled:opacity-50 text-white text-sm rounded font-medium" @disabled($templates->isEmpty())>Replace design</button>
            </div>
        </form>
    </div>

    {{-- Block library drawer --}}
    <div id="blocks-drawer" class="fixed inset-y-0 right-0 w-full sm:w-[380px] bg-gray-950 border-l border-gray-800 shadow-2xl hidden z-50 overflow-y-auto">
        <div class="p-4 border-b border-gray-800 flex justify-between items-center sticky top-0 bg-gray-950 z-10">
            <div>
                <h3 class="text-white font-semibold">🧱 Block Library</h3>
                <p class="text-xs text-gray-500">Click a block to insert it at the bottom of the canvas.</p>
            </div>
            <button type="button" id="btn-blocks-close" class="text-gray-400 hover:text-white">✕</button>
        </div>
        <div id="blocks-list" class="p-3 space-y-2"><p class="text-xs text-gray-500">Loading…</p></div>
        <div class="p-3 border-t border-gray-800 text-xs text-gray-500">
            <a href="{{ route('admin.blocks.index') }}" class="text-red-400 hover:text-red-300">Manage all blocks →</a>
        </div>
    </div>

    <div id="preview-modal" class="fixed inset-0 bg-black/80 hidden items-center justify-center z-50 p-6">
        <div class="bg-gray-950 border border-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-auto">
            <div class="flex justify-between items-center p-3 border-b border-gray-800">
                <span class="text-white text-sm" id="preview-title">Preview</span>
                <button type="button" onclick="document.getElementById('preview-modal').classList.add('hidden')" class="text-gray-400 hover:text-white">✕</button>
            </div>
            <div class="p-4 bg-white">
                <iframe id="preview-frame" class="email-preview-frame"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@vite(['resources/js/unlayer-editor.js'])
@php
    $brandKitJson = \App\Models\BrandKit::current()->only(['primary_color','secondary_color','accent_color','text_color','background_color','body_font','heading_font','logo_url','company_name']);
    $unlayerProjectId = config('services.unlayer.project_id');
@endphp
<script>
window.BrandKit = {!! json_encode($brandKitJson) !!};
window.CampaignApprovalLocked = @json($approvalLocked);
document.addEventListener('DOMContentLoaded', async () => {
    const initialDesignJson = @json($campaign->grapes_data ?? '');

    const ed = await window.UnlayerEditor.mount({
        containerId: 'email-editor',
        initialDesignJson,
        uploadUrl: @json(route('admin.media.editorUpload')),
        assetsUrl: @json(route('admin.media.editorAssets')),
        sendTestUrl: @json(route('admin.campaigns.sendTest', $campaign)),
        projectId: @json($unlayerProjectId),
    });

    // Save: export → fill hidden inputs → submit form (PUT).
    document.getElementById('btn-save').addEventListener('click', async () => {
        if (window.CampaignApprovalLocked) {
            ed.showToast('Campaign is locked for review.', 'err');
            return;
        }
        try {
            const data = await ed.exportHtml();
            document.getElementById('mjml_source').value = '';
            document.getElementById('grapes_data').value = JSON.stringify(data.design);
            document.getElementById('compiled_html').value = data.html;
            document.getElementById('campaign-form').submit();
        } catch (e) {
            ed.showToast('Save failed: ' + e.message, 'err');
        }
    });

    document.getElementById('btn-preview-desktop').addEventListener('click', () => ed.preview('desktop'));
    document.getElementById('btn-preview-mobile').addEventListener('click', () => ed.preview('mobile'));

    // ---- Autosave: PUT to update endpoint with body + form fields ----
    const autosaveUrl = @json(route('admin.campaigns.update', $campaign));
    const indicator = document.getElementById('autosave-indicator');
    let saveTimer = null;
    let saving = false;
    async function autosave() {
        if (saving) return;
        if (window.CampaignApprovalLocked) {
            indicator.textContent = '· locked for review';
            indicator.className = 'text-xs text-amber-400';
            return;
        }
        saving = true;
        try {
            indicator.textContent = '· saving…';
            indicator.className = 'text-xs text-amber-400';
            const data = await ed.exportHtml();
            const fd = new FormData(document.getElementById('campaign-form'));
            fd.set('_method', 'PUT');
            fd.set('grapes_data', JSON.stringify(data.design));
            fd.set('compiled_html', data.html);
            const res = await fetch(autosaveUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
                body: fd,
            });
            if (res.ok) {
                indicator.textContent = '· saved ' + new Date().toLocaleTimeString();
                indicator.className = 'text-xs text-emerald-400';
            } else {
                indicator.textContent = '· autosave failed (' + res.status + ')';
                indicator.className = 'text-xs text-red-400';
            }
        } catch (e) {
            indicator.textContent = '· autosave error';
            indicator.className = 'text-xs text-red-400';
        } finally {
            saving = false;
        }
    }
    function scheduleAutosave(delay = 4000) {
        clearTimeout(saveTimer);
        saveTimer = setTimeout(autosave, delay);
    }
    // Editor design changes
    if (window.unlayer && typeof window.unlayer.addEventListener === 'function') {
        window.unlayer.addEventListener('design:updated', () => scheduleAutosave(4000));
    }
    // Form field edits (subject, name, tags, schedule, etc.)
    document.querySelectorAll('#campaign-form input, #campaign-form select, #campaign-form textarea').forEach(el => {
        el.addEventListener('change', () => scheduleAutosave(1500));
    });
    // Save before leaving so nothing is lost
    window.addEventListener('beforeunload', () => {
        if (saveTimer) { clearTimeout(saveTimer); navigator.sendBeacon && autosave(); }
    });

    document.getElementById('btn-send-test').addEventListener('click', async () => {
        const emails = prompt('Send a test to (comma-separated emails):');
        if (!emails) return;
        await ed.sendTest(emails);
    });

    // ---- Block library drawer ----
    const drawer       = document.getElementById('blocks-drawer');
    const list         = document.getElementById('blocks-list');
    const libraryUrl   = @json(route('admin.blocks.library'));
    const saveBlockUrl = @json(route('admin.blocks.saveFromDesign'));
    async function renderBlockList() {
        list.innerHTML = '<p class="text-xs text-gray-500">Loading…</p>';
        try {
            const blocks = await ed.loadBlockLibrary(libraryUrl);
            if (!blocks.length) {
                list.innerHTML = '<p class="text-xs text-gray-500 p-4 text-center border border-dashed border-gray-800 rounded">No reusable blocks yet. Build a section, click "＋ Save as Block".</p>';
                return;
            }
            list.innerHTML = '';
            blocks.forEach(b => {
                const card = document.createElement('button');
                card.type = 'button';
                card.className = 'w-full text-left bg-gray-900 hover:bg-gray-800 border border-gray-800 hover:border-red-700 rounded-lg p-3 transition-colors';
                card.innerHTML = `
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-[10px] uppercase tracking-wide text-red-400">${b.category}</span>
                        <span class="text-[10px] text-gray-600">#${b.id}</span>
                    </div>
                    <div class="text-white text-sm font-medium">${b.name}</div>
                    ${b.description ? `<div class="text-xs text-gray-500 mt-0.5">${b.description}</div>` : ''}
                    <div class="text-[10px] text-emerald-400 mt-1">Click to insert →</div>`;
                card.addEventListener('click', () => ed.insertBlock(b));
                list.appendChild(card);
            });
        } catch (e) {
            list.innerHTML = '<p class="text-xs text-red-400 p-3">Failed to load blocks: ' + e.message + '</p>';
        }
    }
    document.getElementById('btn-blocks').addEventListener('click', () => { drawer.classList.remove('hidden'); renderBlockList(); });
    document.getElementById('btn-blocks-close').addEventListener('click', () => drawer.classList.add('hidden'));
    document.getElementById('btn-save-as-block').addEventListener('click', async () => {
        const name = prompt('Save current canvas as a reusable block.\nName:');
        if (!name) return;
        const category = prompt('Category (header, hero, content, cta, video, devotional, footer, custom):', 'custom') || 'custom';
        await ed.saveDesignAsBlock({ name, category, url: saveBlockUrl });
    });
});

// ---- Generate Email with AI (whole-email generator) ----
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || @json(csrf_token());
const AI_GENERATE_URL = @json(route('admin.campaigns.aiGenerateBody', $campaign));

(function initAiGenerate() {
    const btn        = document.getElementById('btn-ai');
    const modal      = document.getElementById('ai-modal');
    const closeBtn   = document.getElementById('ai-modal-close');
    const cancelBtn  = document.getElementById('ai-modal-cancel');
    const submitBtn  = document.getElementById('ai-modal-submit');
    const promptEl   = document.getElementById('ai-modal-prompt');
    const overwrite  = document.getElementById('ai-modal-overwrite');
    const fillMeta   = document.getElementById('ai-modal-fill-meta');
    const heroMode   = document.getElementById('ai-modal-hero-mode');
    const errorEl    = document.getElementById('ai-modal-error');
    const statusEl   = document.getElementById('ai-modal-status');
    const customPane = document.getElementById('ai-style-custom');

    // Show/hide the custom-color/font panel only when "Custom" mode is picked.
    function syncStyleMode() {
        const mode = (document.querySelector('input[name=ai-style-mode]:checked') || {}).value || 'brand';
        if (customPane) customPane.classList.toggle('hidden', mode !== 'custom');
    }
    document.querySelectorAll('input[name=ai-style-mode]').forEach(r => r.addEventListener('change', syncStyleMode));
    syncStyleMode();

    function open() {
        errorEl.classList.add('hidden'); errorEl.textContent = '';
        statusEl.classList.add('hidden');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => promptEl.focus(), 50);
    }
    function close() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    btn?.addEventListener('click', open);
    closeBtn?.addEventListener('click', close);
    cancelBtn?.addEventListener('click', close);
    modal?.addEventListener('click', (e) => { if (e.target === modal) close(); });

    submitBtn?.addEventListener('click', async () => {
        const prompt = (promptEl.value || '').trim();
        errorEl.classList.add('hidden'); errorEl.textContent = '';
        if (prompt.length < 5) {
            errorEl.textContent = 'Please describe the email (at least 5 characters).';
            errorEl.classList.remove('hidden');
            return;
        }

        submitBtn.disabled = true;
        const origLabel = submitBtn.textContent;
        submitBtn.textContent = 'Generating…';
        statusEl.classList.remove('hidden');

        try {
            const fd = new FormData();
            fd.append('prompt', prompt);
            fd.append('hero_mode', (heroMode && heroMode.value) || 'smart');
            // Style mode + custom overrides (server validates and ignores blanks).
            const mode = (document.querySelector('input[name=ai-style-mode]:checked') || {}).value || 'brand';
            fd.append('style_mode', mode);
            if (mode === 'custom' && customPane) {
                customPane.querySelectorAll('input[name], select[name]').forEach(el => {
                    if (el.value !== '') fd.append(el.name, el.value);
                });
            }
            const r = await fetch(AI_GENERATE_URL, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
                body: fd,
            });
            let j = null;
            try { j = await r.json(); } catch (_) {}
            if (!j) j = { ok: false, error: 'HTTP ' + r.status };
            if (!j.ok) {
                errorEl.textContent = j.error || 'AI generation failed.';
                errorEl.classList.remove('hidden');
                return;
            }

            // Hydrate the canvas. Replace = loadDesign; append = round-trip merge.
            const editor = window.unlayer || (ed && ed.editor);
            if (!editor || !editor.loadDesign) {
                errorEl.textContent = 'Editor not ready. Try again in a moment.';
                errorEl.classList.remove('hidden');
                return;
            }
            if (overwrite.checked) {
                editor.loadDesign(j.design);
            } else {
                // Merge new rows into the existing body.
                editor.saveDesign((current) => {
                    try {
                        const newRows = (j.design?.body?.rows) || [];
                        const merged = JSON.parse(JSON.stringify(current));
                        merged.body = merged.body || { rows: [] };
                        merged.body.rows = (merged.body.rows || []).concat(newRows);
                        editor.loadDesign(merged);
                    } catch (e) {
                        editor.loadDesign(j.design); // Fallback: replace.
                    }
                });
            }

            // Optionally update subject + preheader inputs.
            if (fillMeta.checked) {
                if (j.subject) {
                    const s = document.querySelector('input[name=subject]');
                    if (s) { s.value = j.subject; s.dispatchEvent(new Event('change', {bubbles:true})); }
                }
                if (j.preheader) {
                    const p = document.querySelector('input[name=preheader]');
                    if (p) { p.value = j.preheader; p.dispatchEvent(new Event('change', {bubbles:true})); }
                }
            }

            // Surface a non-fatal warning if hero image generation failed
            // (the email body still loads — we just didn't get an image).
            const toast = window.UnlayerEditor && window.UnlayerEditor.showToast;
            if (j.hero_error) {
                toast ? toast(j.hero_error, 'err') : console.warn(j.hero_error);
            } else if (j.hero_source === 'generated' && toast) {
                toast('Hero image generated and added to your library', 'ok');
            } else if (j.hero_source === 'library' && toast) {
                toast('Matched a Library image as the hero', 'ok');
            }

            // When auto-style was requested, tell the user what Claude picked
            // (or that it fell back) so it's never a silent no-op.
            if (mode === 'auto' && toast) {
                const s = j.style || {};
                const picked = Object.keys(s).length;
                if (picked === 0) {
                    toast('AI style proposal failed — used your brand defaults', 'err');
                } else {
                    const bits = [];
                    if (s.primary_color)  bits.push('primary ' + s.primary_color);
                    if (s.accent_color)   bits.push('accent ' + s.accent_color);
                    if (s.heading_font)   bits.push('heading ' + s.heading_font.split(',')[0].trim());
                    if (s.density)        bits.push('density ' + s.density);
                    toast('AI style: ' + bits.join(' · '), 'ok');
                }
            }

            close();
        } catch (e) {
            errorEl.textContent = e.message || 'Network error.';
            errorEl.classList.remove('hidden');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = origLabel;
            statusEl.classList.add('hidden');
        }
    });
})();

// ---- Replace-with-template modal ----
(function initTplModal() {
    const btn      = document.getElementById('btn-template');
    const modal    = document.getElementById('tpl-modal');
    const closeBtn = document.getElementById('tpl-modal-close');
    const cancelBtn= document.getElementById('tpl-modal-cancel');
    if (!btn || !modal) return;
    const open  = () => { modal.classList.remove('hidden'); modal.classList.add('flex'); };
    const close = () => { modal.classList.add('hidden');    modal.classList.remove('flex'); };
    btn.addEventListener('click', open);
    closeBtn?.addEventListener('click', close);
    cancelBtn?.addEventListener('click', close);
    modal.addEventListener('click', (e) => { if (e.target === modal) close(); });
})();
</script>

{{-- Flatpickr + timezone helper for the schedule row --}}
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script>
(function () {
    var input  = document.getElementById('editScheduledAt');
    var tzSel  = document.getElementById('editScheduleTz');
    var hint   = document.getElementById('editScheduledAtHint');
    if (!input || !tzSel) return;

    var detectedTz;
    try { detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (e) { detectedTz = null; }

    // Inject the detected zone into the dropdown if missing.
    if (detectedTz) {
        var have = false;
        for (var i = 0; i < tzSel.options.length; i++) {
            if (tzSel.options[i].value === detectedTz) { have = true; break; }
        }
        if (!have) {
            var opt = document.createElement('option');
            opt.value = detectedTz;
            opt.textContent = 'Detected — ' + detectedTz;
            tzSel.insertBefore(opt, tzSel.firstChild);
        }
    }

    if (window.flatpickr) {
        flatpickr(input, {
            enableTime: true,
            dateFormat: 'Y-m-d\\TH:i',
            altInput: true,
            altFormat: 'D, M j, Y at h:i K',
            minuteIncrement: 5,
            time_24hr: false,
            onChange: refreshHint,
            onReady: refreshHint,
        });
    }

    function refreshHint() {
        var raw = input.value;
        var tz  = tzSel.value;
        if (!raw || !hint) { if (hint) hint.textContent = ''; return; }
        var label = tz;
        if (detectedTz && detectedTz !== tz) label += ' — your browser is in ' + detectedTz;
        else if (detectedTz === tz)          label += ' (matches your browser)';
        hint.innerHTML = '<i class="fa-regular fa-clock mr-1"></i>Stored as UTC; entered as wall-clock in <strong>' + label + '</strong>.';
    }

    tzSel.addEventListener('change', refreshHint);
    input.addEventListener('change', refreshHint);
    refreshHint();
})();
</script>
@endpush