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

@push('styles')
<style>
.check-row { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 0; border-bottom:1px solid #1f2937; }
.check-row:last-child { border-bottom:none; }
.check-icon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; flex-shrink:0; margin-top:1px; }
.check-ok   { background:#052e16; color:#4ade80; border:1px solid #166534; }
.check-warn { background:#2a1f0f; color:#fcd34d; border:1px solid #854d0e; }
.check-err  { background:#2a0f0f; color:#f87171; border:1px solid #991b1b; }
.check-info { background:#0f1a2e; color:#93c5fd; border:1px solid #1e3a5f; }
.score-ring { transform:rotate(-90deg); }
.launch-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.25rem; border-radius:.75rem; font-size:.875rem; font-weight:600; transition:all .15s; cursor:pointer; }
</style>
{{-- Flatpickr (date/time picker) — CDN'd to avoid touching the Vite build. --}}
<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; }
    .flatpickr-time input:hover, .flatpickr-time input:focus { background:#1f2937 !important; }
</style>
@endpush

@section('admin')
@php
    $statusColors = [
        'draft'     => ['text'=>'text-gray-300', 'bg'=>'bg-gray-800',     'border'=>'border-gray-700'],
        'scheduled' => ['text'=>'text-blue-300',  'bg'=>'bg-blue-900/30',  'border'=>'border-blue-700/50'],
        'queued'    => ['text'=>'text-purple-300','bg'=>'bg-purple-900/30','border'=>'border-purple-700/50'],
        'sending'   => ['text'=>'text-emerald-300','bg'=>'bg-emerald-900/30','border'=>'border-emerald-700/50'],
        'paused'    => ['text'=>'text-amber-300', 'bg'=>'bg-amber-900/20', 'border'=>'border-amber-700/40'],
        'sent'      => ['text'=>'text-emerald-300','bg'=>'bg-emerald-900/20','border'=>'border-emerald-700/40'],
        'canceled'  => ['text'=>'text-gray-500',  'bg'=>'bg-gray-900',     'border'=>'border-gray-700'],
        'failed'    => ['text'=>'text-red-300',   'bg'=>'bg-red-900/20',   'border'=>'border-red-700/40'],
    ];
    $sc = $statusColors[$campaign->status] ?? $statusColors['draft'];

    $errorIssues = array_values(array_filter($issues, fn($i) => $i['level'] === 'error'));
    $warnings    = array_values(array_filter($issues, fn($i) => $i['level'] === 'warning'));
    $infos       = array_values(array_filter($issues, fn($i) => $i['level'] === 'info'));

    $errCount  = count($errorIssues);
    $warnCount = count($warnings);
    $totalChecks = max(1, count($issues));
    $passedChecks = count($infos);
    $score = empty($issues) ? 100 : max(0, 100 - $errCount * 25 - $warnCount * 10);
    $scoreColor = $score >= 80 ? '#4ade80' : ($score >= 50 ? '#fcd34d' : '#f87171');

    $sentPct = $campaign->total_recipients > 0
        ? min(100, ($campaign->sent_count / max(1, $campaign->total_recipients)) * 100) : 0;
@endphp

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

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-600 mb-5">
        <a href="{{ route('admin.campaigns.index') }}" class="hover:text-gray-400 transition-colors">Campaigns</a>
        <i class="fa-solid fa-chevron-right text-[9px]"></i>
        <span class="text-gray-400">{{ Str::limit($campaign->name, 40) }}</span>
    </nav>

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-7">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2 mb-2">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border {{ $sc['bg'] }} {{ $sc['text'] }} {{ $sc['border'] }}">
                    @if($campaign->status === 'sending')<span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>@endif
                    {{ ucfirst($campaign->status) }}
                </span>
                @if($campaign->approval_status && $campaign->approval_status !== 'none')
                    @php
                        $apv = [
                            'pending'  => ['bg'=>'bg-amber-900/30','text'=>'text-amber-300','border'=>'border-amber-700/50','icon'=>'fa-hourglass-half','label'=>'Pending Approval'],
                            'approved' => ['bg'=>'bg-emerald-900/30','text'=>'text-emerald-300','border'=>'border-emerald-700/50','icon'=>'fa-circle-check','label'=>'Approved'],
                            'rejected' => ['bg'=>'bg-red-900/30','text'=>'text-red-300','border'=>'border-red-700/50','icon'=>'fa-circle-xmark','label'=>'Rejected'],
                        ][$campaign->approval_status] ?? null;
                    @endphp
                    @if($apv)
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border {{ $apv['bg'] }} {{ $apv['text'] }} {{ $apv['border'] }}" data-test="approval-badge" data-approval="{{ $campaign->approval_status }}">
                            <i class="fa-solid {{ $apv['icon'] }} text-[10px]"></i>{{ $apv['label'] }}
                        </span>
                    @endif
                @endif
                @if($campaign->subject_b && $campaign->ab_split_percent)
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-purple-900/30 text-purple-300 border border-purple-700/40" title="Subject A/B split: {{ $campaign->ab_split_percent }}% → variant B"><i class="fa-solid fa-flask text-[9px]"></i>A/B {{ $campaign->ab_split_percent }}%</span>
                @endif
                @if($campaign->is_quick_send)<span class="px-2 py-0.5 rounded-full text-xs bg-amber-900/20 text-amber-400 border border-amber-700/40"><i class="fa-solid fa-bolt text-[9px] mr-0.5"></i>Quick Send</span>@endif
            </div>
            <h1 class="text-2xl font-bold text-white leading-tight">{{ $campaign->name }}</h1>
            <p class="text-gray-400 text-sm mt-1">{{ $campaign->subject }}</p>
            @if($campaign->preheader)<p class="text-gray-600 text-xs mt-0.5 italic">{{ $campaign->preheader }}</p>@endif
        </div>
        <div class="flex flex-wrap gap-2 flex-shrink-0">
            @if($campaign->isEditable())
                <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                   class="flex items-center gap-1.5 px-3 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white rounded-xl text-xs font-medium transition-colors">
                    <i class="fa-solid fa-pen-to-square text-[10px]"></i> Edit
                </a>
            @endif
            <a href="{{ route('admin.campaigns.report', $campaign) }}"
               class="flex items-center gap-1.5 px-3 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white rounded-xl text-xs font-medium transition-colors">
                <i class="fa-solid fa-chart-line text-[10px]"></i> Report
            </a>
            <a target="_blank" href="{{ route('campaigns.viewInBrowser', ['token'=>$campaign->view_token]) }}"
               class="flex items-center gap-1.5 px-3 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white rounded-xl text-xs font-medium transition-colors">
                <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i> Preview
            </a>
        </div>
    </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 flex items-center gap-2"><i class="fa-solid fa-circle-check"></i>{{ session('success') }}</div>@endif
    @if(session('error'))<div class="mb-5 p-3 rounded-xl bg-red-900/30 border border-red-700/50 text-red-300 text-sm flex items-center gap-2"><i class="fa-solid fa-triangle-exclamation"></i>{{ session('error') }}</div>@endif

    {{-- Key metrics --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-4">
            <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Audience</div>
            <div class="text-2xl font-bold text-white">{{ number_format($audience) }}</div>
            <div class="text-gray-600 text-xs mt-0.5">active subscribers</div>
        </div>
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-4">
            <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Sent</div>
            <div class="text-2xl font-bold text-white">{{ number_format($campaign->sent_count) }}</div>
            <div class="text-gray-600 text-xs mt-0.5">of {{ number_format($campaign->total_recipients) }} queued</div>
        </div>
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-4">
            <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Failed</div>
            <div class="text-2xl font-bold {{ $campaign->failed_count > 0 ? 'text-red-400' : 'text-white' }}">{{ number_format($campaign->failed_count) }}</div>
            <div class="text-gray-600 text-xs mt-0.5">delivery errors</div>
        </div>
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-4">
            <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Progress</div>
            <div class="text-2xl font-bold text-white">{{ number_format($sentPct, 0) }}<span class="text-sm text-gray-500">%</span></div>
            <div class="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-full rounded-full bg-gradient-to-r from-red-600 to-red-400 transition-all" style="width:{{ $sentPct }}%"></div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">

        {{-- Preflight checklist --}}
        <div class="lg:col-span-2 bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-semibold text-white uppercase tracking-wider">Pre-send Checklist</h2>
                @if(empty($issues))
                    <span class="text-xs text-emerald-400 font-semibold bg-emerald-900/30 border border-emerald-700/40 px-2.5 py-1 rounded-full">All clear</span>
                @elseif($errCount > 0)
                    <span class="text-xs text-red-400 font-semibold bg-red-900/30 border border-red-700/40 px-2.5 py-1 rounded-full">{{ $errCount }} error{{ $errCount > 1 ? 's' : '' }}</span>
                @else
                    <span class="text-xs text-amber-400 font-semibold bg-amber-900/20 border border-amber-700/40 px-2.5 py-1 rounded-full">{{ $warnCount }} warning{{ $warnCount > 1 ? 's' : '' }}</span>
                @endif
            </div>

            @if(empty($issues))
            <div class="flex items-center gap-3 py-4">
                <div class="w-10 h-10 rounded-full bg-emerald-900/40 border border-emerald-700/40 flex items-center justify-center">
                    <i class="fa-solid fa-check text-emerald-400"></i>
                </div>
                <div>
                    <p class="text-emerald-300 font-medium text-sm">All checks passed</p>
                    <p class="text-gray-500 text-xs">This campaign is ready to send.</p>
                </div>
            </div>
            @else
            <div class="divide-y divide-gray-800/50">
                @foreach($errorIssues as $i)
                <div class="check-row">
                    <div class="check-icon check-err"><i class="fa-solid fa-xmark"></i></div>
                    <div>
                        <p class="text-red-300 text-sm font-medium">{{ $i['message'] }}</p>
                        @if(!empty($i['detail']))<p class="text-gray-500 text-xs mt-0.5">{{ $i['detail'] }}</p>@endif
                    </div>
                </div>
                @endforeach
                @foreach($warnings as $i)
                <div class="check-row">
                    <div class="check-icon check-warn"><i class="fa-solid fa-triangle-exclamation text-[10px]"></i></div>
                    <div>
                        <p class="text-amber-300 text-sm">{{ $i['message'] }}</p>
                        @if(!empty($i['detail']))<p class="text-gray-500 text-xs mt-0.5">{{ $i['detail'] }}</p>@endif
                    </div>
                </div>
                @endforeach
                @foreach($infos as $i)
                <div class="check-row">
                    <div class="check-icon check-info"><i class="fa-solid fa-circle-info text-[10px]"></i></div>
                    <div><p class="text-gray-400 text-sm">{{ $i['message'] }}</p></div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Readiness score --}}
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6 flex flex-col items-center justify-center text-center">
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Readiness Score</p>
            <div class="relative w-28 h-28 mb-4">
                <svg viewBox="0 0 100 100" class="w-full h-full">
                    <circle cx="50" cy="50" r="40" fill="none" stroke="#1f2937" stroke-width="8"/>
                    <circle cx="50" cy="50" r="40" fill="none"
                            stroke="{{ $scoreColor }}"
                            stroke-width="8"
                            stroke-linecap="round"
                            stroke-dasharray="{{ round($score * 2.513) }} 251.3"
                            class="score-ring"
                            style="transition:stroke-dasharray .8s ease;"/>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-2xl font-bold text-white">{{ $score }}</span>
                    <span class="text-xs text-gray-500">/100</span>
                </div>
            </div>
            @if($score === 100)
                <p class="text-emerald-400 text-sm font-semibold">Launch ready</p>
                <p class="text-gray-600 text-xs mt-0.5">All systems go.</p>
            @elseif($score >= 60)
                <p class="text-amber-300 text-sm font-semibold">Nearly ready</p>
                <p class="text-gray-600 text-xs mt-0.5">Review warnings above.</p>
            @else
                <p class="text-red-400 text-sm font-semibold">Needs attention</p>
                <p class="text-gray-600 text-xs mt-0.5">Fix errors before sending.</p>
            @endif
        </div>
    </div>

    {{-- Approval workflow + A/B winner --}}
    @php
        $reviewer = $campaign->approved_by ? \App\Models\User::find($campaign->approved_by) : null;
    @endphp
    <div class="grid grid-cols-1 {{ ($campaign->subject_b && $campaign->ab_split_percent) ? 'lg:grid-cols-2' : '' }} gap-5 mb-6">
        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6" data-test="approval-panel">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-9 h-9 rounded-xl bg-violet-900/30 border border-violet-700/40 flex items-center justify-center">
                    <i class="fa-solid fa-user-check text-violet-300 text-sm"></i>
                </div>
                <div>
                    <h2 class="text-sm font-semibold text-white">Approval workflow</h2>
                    <p class="text-gray-600 text-xs">Lock down the bytes a reviewer signs off on.</p>
                </div>
            </div>

            @if($campaign->approval_status === 'pending')
                <p class="text-amber-300 text-sm mb-3"><i class="fa-solid fa-hourglass-half mr-1"></i>Awaiting approval. The campaign body and schedule are locked until this review completes.</p>
                @if($campaign->approval_notes)<p class="text-gray-500 text-xs mb-3 italic">Author notes: "{{ $campaign->approval_notes }}"</p>@endif
                <div class="flex flex-wrap gap-2">
                    <form method="POST" action="{{ route('admin.campaigns.approve', $campaign) }}" data-test="approve-form">
                        @csrf
                        <button class="px-3 py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white rounded-lg text-xs font-semibold"><i class="fa-solid fa-check mr-1"></i>Approve</button>
                    </form>
                    <form method="POST" action="{{ route('admin.campaigns.reject', $campaign) }}" class="flex flex-1 gap-2 items-stretch min-w-[260px]" onsubmit="return this.querySelector('input[name=notes]').value.trim().length > 0 || (alert('A rejection reason is required.') &amp;&amp; false);" data-test="reject-form">
                        @csrf
                        <input type="text" name="notes" required placeholder="Reason (required)…" class="flex-1 px-2 py-1 bg-gray-950 border border-gray-700 rounded text-xs text-white">
                        <button class="px-3 py-1.5 bg-red-700 hover:bg-red-600 text-white rounded-lg text-xs font-semibold"><i class="fa-solid fa-xmark mr-1"></i>Reject</button>
                    </form>
                </div>
            @elseif($campaign->approval_status === 'approved')
                <p class="text-emerald-300 text-sm"><i class="fa-solid fa-circle-check mr-1"></i>Approved {{ optional($campaign->approved_at)->diffForHumans() }} @if($reviewer) by <strong>{{ $reviewer->name }}</strong>@endif. Ready to launch.</p>
                @if($campaign->approval_notes)<p class="text-gray-500 text-xs mt-2 italic">"{{ $campaign->approval_notes }}"</p>@endif
            @elseif($campaign->approval_status === 'rejected')
                <p class="text-red-300 text-sm"><i class="fa-solid fa-circle-xmark mr-1"></i>Rejected {{ optional($campaign->approved_at)->diffForHumans() }} @if($reviewer) by <strong>{{ $reviewer->name }}</strong>@endif.</p>
                @if($campaign->approval_notes)<p class="text-gray-300 text-sm mt-2 p-2 bg-red-950/40 border border-red-900/40 rounded">{{ $campaign->approval_notes }}</p>@endif
                <p class="text-xs text-gray-500 mt-3">Edit the campaign and resubmit when ready.</p>
            @else
                <p class="text-gray-400 text-sm mb-3">No review requested yet.</p>
                @if(in_array($campaign->status, ['draft']))
                    <form method="POST" action="{{ route('admin.campaigns.submitApproval', $campaign) }}" class="flex flex-wrap gap-2" data-test="submit-approval-form">
                        @csrf
                        <input type="text" name="notes" placeholder="Note for reviewer (optional)" class="flex-1 min-w-[200px] px-2 py-1 bg-gray-950 border border-gray-700 rounded text-xs text-white">
                        <button class="px-3 py-1.5 bg-violet-700 hover:bg-violet-600 text-white rounded-lg text-xs font-semibold"><i class="fa-solid fa-paper-plane mr-1"></i>Submit for approval</button>
                    </form>
                @else
                    <p class="text-xs text-gray-600">Only drafts can be submitted for approval.</p>
                @endif
            @endif
        </div>

        @if($campaign->subject_b && $campaign->ab_split_percent && !empty($abStats))
            <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6" data-test="ab-panel">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-9 h-9 rounded-xl bg-purple-900/30 border border-purple-700/40 flex items-center justify-center">
                        <i class="fa-solid fa-flask text-purple-300 text-sm"></i>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-white">A/B winner</h2>
                        <p class="text-gray-600 text-xs">{{ $campaign->ab_split_percent }}% of recipients receive variant B; pick winner by opens or clicks.</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 mb-4">
                    @foreach(['a' => 'Subject A', 'b' => 'Subject B'] as $key => $label)
                        @php $s = $abStats[$key]; $isWinner = $campaign->winner_variant === $key; @endphp
                        <div class="rounded-lg p-3 border {{ $isWinner ? 'border-emerald-600/60 bg-emerald-900/20' : 'border-gray-800 bg-gray-900/40' }}" data-test="ab-cell-{{ $key }}">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs uppercase tracking-wider text-gray-500">{{ $label }} @if($isWinner)<span class="text-emerald-300 text-[10px] ml-1">★ winner</span>@endif</span>
                                <span class="text-[10px] text-gray-600">{{ $s['sent'] }} sent</span>
                            </div>
                            <p class="text-xs text-gray-300 truncate" title="{{ $key === 'b' ? $campaign->subject_b : $campaign->subject }}">{{ $key === 'b' ? $campaign->subject_b : $campaign->subject }}</p>
                            <div class="flex gap-3 mt-2 text-xs">
                                <span class="text-gray-300"><i class="fa-regular fa-eye text-gray-500 mr-1"></i>{{ $s['opens'] }} <span class="text-gray-600">({{ $s['open_rate'] }}%)</span></span>
                                <span class="text-gray-300"><i class="fa-solid fa-arrow-pointer text-gray-500 mr-1"></i>{{ $s['clicks'] }} <span class="text-gray-600">({{ $s['click_rate'] }}%)</span></span>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if($campaign->winner_variant)
                    <p class="text-emerald-300 text-xs"><i class="fa-solid fa-trophy mr-1"></i>Variant <strong>{{ strtoupper($campaign->winner_variant) }}</strong> picked on <strong>{{ $campaign->winner_metric }}</strong> {{ optional($campaign->winner_picked_at)->diffForHumans() }}.</p>
                @else
                    <form method="POST" action="{{ route('admin.campaigns.pickWinner', $campaign) }}" class="flex items-center gap-2" data-test="pick-winner-form">
                        @csrf
                        <label class="text-xs text-gray-400">Decide by</label>
                        <select name="metric" class="bg-gray-950 border border-gray-700 rounded px-2 py-1 text-xs text-white" data-test="winner-metric">
                            <option value="open">Opens</option>
                            <option value="click">Clicks</option>
                        </select>
                        <button class="px-3 py-1 bg-purple-700 hover:bg-purple-600 text-white rounded-lg text-xs font-semibold"><i class="fa-solid fa-trophy mr-1"></i>Pick winner</button>
                    </form>
                @endif
            </div>
        @endif
    </div>

    {{-- Schedule & launch --}}
    @php
        // Curated common zones; the JS layer below will inject the browser's
        // detected zone if it isn't already in this list, so any user gets a
        // sensible default without having to scroll through 400+ IANA names.
        $tzOptions = [
            'America/New_York'    => 'Eastern  (New York)',
            'America/Chicago'     => 'Central  (Chicago)',
            'America/Denver'      => 'Mountain (Denver)',
            'America/Phoenix'     => 'Mountain (Phoenix — no DST)',
            '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',
        ];
        $defaultTz = $campaign->schedule_timezone ?: config('app.timezone', 'America/Denver');
        // datetime-local default: 15 minutes from now in the chosen tz.
        try {
            $defaultWhen = \Illuminate\Support\Carbon::now($defaultTz)->addMinutes(15)->format('Y-m-d\TH:i');
        } catch (\Throwable) {
            $defaultWhen = \Illuminate\Support\Carbon::now()->addMinutes(15)->format('Y-m-d\TH:i');
        }
    @endphp
    <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6 mb-5"
         x-data="{ open:false, mode:'{{ $campaign->schedule_mode === 'datetime' ? 'schedule' : 'now' }}' }">
        <h2 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Schedule &amp; Launch</h2>

        <div class="flex flex-wrap items-center gap-3 text-sm text-gray-400 mb-5 p-3 bg-gray-900/60 border border-gray-800/60 rounded-xl">
            <i class="fa-regular fa-calendar text-gray-600"></i>
            <span>Mode: <strong class="text-gray-200">{{ ucfirst($campaign->schedule_mode) }}</strong></span>
            @if($campaign->scheduled_at)
                <span class="text-gray-600">·</span>
                <span><i class="fa-regular fa-clock mr-1 text-gray-600"></i>
                    @if($campaign->schedule_timezone)
                        {{ $campaign->scheduled_at->copy()->setTimezone($campaign->schedule_timezone)->format('M j, Y · g:i A') }}
                        <span class="text-gray-500 text-xs">({{ $campaign->schedule_timezone }})</span>
                    @else
                        {{ $campaign->scheduled_at->format('M j, Y · g:i A') }} <span class="text-gray-500 text-xs">UTC</span>
                    @endif
                </span>
            @endif
            @if($campaign->throttle_per_minute)
                <span class="text-gray-600">·</span>
                <span class="text-gray-400 text-xs"><i class="fa-solid fa-gauge-high mr-1"></i>throttle {{ $campaign->throttle_per_minute }}/min</span>
            @endif
            @if($campaign->cron_expression)<span class="text-gray-600">·</span><code class="text-xs text-purple-300 bg-purple-900/20 px-1.5 py-0.5 rounded">{{ $campaign->cron_expression }}</code>@endif
            @if($campaign->next_run_at)<span class="text-gray-600">·</span><span class="text-gray-500 text-xs">next {{ $campaign->next_run_at->diffForHumans() }}</span>@endif
        </div>

        <div class="flex flex-wrap gap-3">
            @if(in_array($campaign->status, ['draft','paused','scheduled']))
                @php $approvalBlocks = in_array($campaign->approval_status, ['pending','rejected'], true); @endphp
                <button type="button"
                        @click="open=true"
                        @if($errCount > 0 || $approvalBlocks) disabled @endif
                        data-test="open-launch"
                        title="@if($approvalBlocks){{ $campaign->approval_status === 'pending' ? 'Awaiting approval' : 'Rejected — edit and resubmit before scheduling' }}@endif"
                        class="launch-btn {{ ($errCount > 0 || $approvalBlocks) ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-900/40' }}">
                    <i class="fa-solid fa-rocket text-sm"></i>
                    {{ $campaign->status === 'paused' ? 'Resume &amp; Send' : 'Send / Schedule' }}
                    @if($approvalBlocks)<span class="text-[10px] ml-1 opacity-70">· locked</span>@endif
                </button>
            @endif
            @if($campaign->isPausable())
                <form method="POST" action="{{ route('admin.campaigns.pause', $campaign) }}">@csrf
                    <button class="launch-btn bg-amber-900/40 hover:bg-amber-800/60 border border-amber-700/40 text-amber-300">
                        <i class="fa-solid fa-pause text-sm"></i> Pause
                    </button>
                </form>
            @endif
            @if($campaign->status==='paused')
                <form method="POST" action="{{ route('admin.campaigns.resume', $campaign) }}">@csrf
                    <button class="launch-btn bg-emerald-900/40 hover:bg-emerald-800/60 border border-emerald-700/40 text-emerald-300">
                        <i class="fa-solid fa-play text-sm"></i> Resume
                    </button>
                </form>
            @endif
            @if($campaign->isCancelable())
                <form method="POST" action="{{ route('admin.campaigns.cancel', $campaign) }}"
                      onsubmit="return confirm('Cancel campaign? Already-sent emails are not recalled.');">@csrf
                    <button class="launch-btn bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-300">
                        <i class="fa-solid fa-stop text-sm"></i> Cancel
                    </button>
                </form>
            @endif
            @if(!in_array($campaign->status, ['sent','sending']))
                <form method="POST" action="{{ route('admin.campaigns.destroy', $campaign) }}"
                      onsubmit="return confirm('Delete this campaign permanently?');">
                    @csrf @method('DELETE')
                    <button class="launch-btn bg-red-900/20 hover:bg-red-900/50 border border-red-800/30 text-red-400">
                        <i class="fa-solid fa-trash text-sm"></i> Delete
                    </button>
                </form>
            @endif
        </div>

        {{-- Unified Send / Schedule modal --}}
        <div x-show="open" x-cloak
             x-transition.opacity
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
             @keydown.escape.window="open=false">
            <div class="bg-gray-950 border border-gray-800 rounded-2xl shadow-2xl w-full max-w-lg p-6"
                 @click.outside="open=false">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-white">Send this campaign</h3>
                    <button type="button" @click="open=false" class="text-gray-500 hover:text-gray-200">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <form method="POST" action="{{ route('admin.campaigns.schedule', $campaign) }}" class="space-y-4">
                    @csrf

                    <div class="grid grid-cols-2 gap-2 text-sm">
                        <label class="flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-colors"
                               :class="mode==='now' ? 'border-red-600 bg-red-900/20 text-red-200' : 'border-gray-800 text-gray-300 hover:border-gray-700'">
                            <input type="radio" name="send_mode" value="now" x-model="mode" data-test="send-mode-now" class="accent-red-600">
                            <span><i class="fa-solid fa-bolt mr-1"></i> Send now</span>
                        </label>
                        <label class="flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-colors"
                               :class="mode==='schedule' ? 'border-red-600 bg-red-900/20 text-red-200' : 'border-gray-800 text-gray-300 hover:border-gray-700'">
                            <input type="radio" name="send_mode" value="schedule" x-model="mode" data-test="send-mode-schedule" class="accent-red-600">
                            <span><i class="fa-regular fa-clock mr-1"></i> Schedule</span>
                        </label>
                    </div>

                    <div x-show="mode==='schedule'" x-transition class="space-y-3">
                        {{-- Auto-detected browser timezone banner. Populated by
                             the script below so users never have to guess. --}}
                        <div id="tzDetectBanner"
                             class="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-blue-900/20 border border-blue-800/40 text-blue-200 text-xs"
                             style="display:none;">
                            <div>
                                <i class="fa-solid fa-location-crosshairs mr-1"></i>
                                Your browser is in <strong id="tzDetectName">…</strong>
                                <span class="text-blue-300/70" id="tzDetectOffset"></span>.
                                Current local time: <strong id="tzDetectClock">…</strong>
                            </div>
                            <button type="button" id="tzUseDetected"
                                    class="px-2 py-1 rounded bg-blue-800/60 hover:bg-blue-700 text-white text-[11px] font-semibold whitespace-nowrap">
                                Use this zone
                            </button>
                        </div>

                        <div>
                            <label class="block text-xs uppercase tracking-wider text-gray-500 mb-1">Send at</label>
                            <input type="text" name="scheduled_at" id="scheduledAtInput"
                                   value="{{ $campaign->scheduled_at && $campaign->schedule_timezone
                                        ? $campaign->scheduled_at->copy()->setTimezone($campaign->schedule_timezone)->format('Y-m-d\TH:i')
                                        : $defaultWhen }}"
                                   placeholder="Click to choose date & time"
                                   data-test="scheduled-at"
                                   class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-white text-sm cursor-pointer">
                            <p id="scheduledAtPreview" class="text-[11px] text-gray-500 mt-1"></p>
                        </div>
                        <div>
                            <label class="block text-xs uppercase tracking-wider text-gray-500 mb-1">Timezone</label>
                            <select name="schedule_timezone" id="scheduleTzSelect" data-test="schedule-tz"
                                    class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-white text-sm">
                                @foreach($tzOptions as $tz => $label)
                                    <option value="{{ $tz }}" @selected($defaultTz === $tz)>{{ $label }} — {{ $tz }}</option>
                                @endforeach
                            </select>
                            <p class="text-[11px] text-gray-600 mt-1">Stored as UTC; displayed back in this zone.</p>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs uppercase tracking-wider text-gray-500 mb-1">Throttle (emails per minute, blank = unlimited)</label>
                        <input type="number" min="0" max="10000" name="throttle_per_minute"
                               value="{{ $campaign->throttle_per_minute }}"
                               placeholder="e.g. 600"
                               data-test="throttle-input"
                               class="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-white text-sm">
                        <p class="text-[11px] text-gray-600 mt-1">Caps Resend API pressure during large blasts.</p>
                    </div>

                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="open=false"
                                class="px-4 py-2 text-sm rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-200">Cancel</button>
                        <button type="submit" data-test="confirm-launch"
                                class="px-4 py-2 text-sm rounded-lg bg-red-600 hover:bg-red-500 text-white font-semibold">
                            <i class="fa-solid fa-rocket mr-1"></i>
                            <span x-text="mode==='now' ? 'Send now' : 'Schedule send'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Send test --}}
    <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-9 h-9 rounded-xl bg-amber-900/30 border border-amber-700/30 flex items-center justify-center">
                <i class="fa-solid fa-vial text-amber-400 text-sm"></i>
            </div>
            <div>
                <h2 class="text-sm font-semibold text-white">Send a Test</h2>
                <p class="text-gray-600 text-xs">Send yourself a preview before launching.</p>
            </div>
        </div>
        <form method="POST" action="{{ route('admin.campaigns.sendTest', $campaign) }}" class="flex flex-wrap gap-2">
            @csrf
            <input name="emails" placeholder="you@example.com, colleague@example.com" required
                   class="flex-1 min-w-[240px] px-3 py-2 bg-gray-950 border border-gray-700/60 rounded-xl text-white text-sm placeholder-gray-600 focus:outline-none focus:border-amber-600">
            <button class="flex items-center gap-2 px-4 py-2 bg-amber-700 hover:bg-amber-600 text-white rounded-xl text-sm font-semibold transition-colors">
                <i class="fa-solid fa-paper-plane text-xs"></i> Send Test
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script>
(function () {
    // ---- 1. Detect the user's browser timezone -----------------------------
    var detectedTz;
    try { detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (e) { detectedTz = null; }

    function offsetLabel(tz) {
        try {
            var d = new Date();
            // formatToParts with 'longOffset' gives "GMT-06:00" etc.
            var parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'longOffset' }).formatToParts(d);
            var off = (parts.find(function (p) { return p.type === 'timeZoneName'; }) || {}).value || '';
            return off ? '(' + off + ')' : '';
        } catch (e) { return ''; }
    }

    function liveClock(tz) {
        try {
            return new Intl.DateTimeFormat([], {
                timeZone: tz, weekday: 'short', month: 'short', day: 'numeric',
                hour: 'numeric', minute: '2-digit', hour12: true
            }).format(new Date());
        } catch (e) { return ''; }
    }

    var tzSelect    = document.getElementById('scheduleTzSelect');
    var banner      = document.getElementById('tzDetectBanner');
    var bannerName  = document.getElementById('tzDetectName');
    var bannerOff   = document.getElementById('tzDetectOffset');
    var bannerClock = document.getElementById('tzDetectClock');
    var useDetected = document.getElementById('tzUseDetected');
    var atInput     = document.getElementById('scheduledAtInput');
    var atPreview   = document.getElementById('scheduledAtPreview');

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

        bannerName.textContent  = detectedTz;
        bannerOff.textContent   = ' ' + offsetLabel(detectedTz);
        bannerClock.textContent = liveClock(detectedTz);
        banner.style.display = 'flex';

        // Live clock refresh.
        setInterval(function () { bannerClock.textContent = liveClock(detectedTz); }, 30000);

        useDetected.addEventListener('click', function () {
            tzSelect.value = detectedTz;
            tzSelect.dispatchEvent(new Event('change'));
        });

        // If the saved zone matches detected, hide the "Use this zone" CTA so
        // we don't nag — but keep the banner up so user knows what's happening.
        if (tzSelect.value === detectedTz) {
            useDetected.textContent = '✓ Selected';
            useDetected.disabled = true;
            useDetected.classList.add('opacity-60', 'cursor-default');
        }
    }

    // ---- 2. Flatpickr on the "scheduled at" input --------------------------
    if (window.flatpickr && atInput) {
        flatpickr(atInput, {
            enableTime: true,
            dateFormat: 'Y-m-d\\TH:i',
            altInput: true,
            altFormat: 'D, M j, Y at h:i K',
            minuteIncrement: 5,
            minDate: 'today',
            time_24hr: false,
            onChange: updatePreview,
            onReady: updatePreview,
        });
    }

    // ---- 3. Live preview: "this is X minutes from now in your local time" --
    function updatePreview() {
        if (!atInput || !atPreview || !tzSelect) return;
        var raw = atInput.value;            // "2026-05-05T14:30"
        var tz  = tzSelect.value;
        if (!raw) { atPreview.textContent = ''; return; }

        // Interpret the wall-clock value AS-IF it were in `tz`, then format
        // back into the viewer's local time so they see both perspectives.
        try {
            // Build a date string that browsers will parse as "this wall time
            // in tz" by computing the offset for that instant.
            var match = raw.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
            if (!match) return;
            var iso = match[1]+'-'+match[2]+'-'+match[3]+'T'+match[4]+':'+match[5]+':00';

            // Compute the offset of `tz` at that moment.
            var asUtc = new Date(iso + 'Z'); // pretend it's UTC first
            var asTz  = new Date(asUtc.toLocaleString('en-US', { timeZone: tz }));
            var asLcl = new Date(asUtc.toLocaleString('en-US'));
            var offsetMs = asTz.getTime() - asLcl.getTime();
            var trueUtc  = new Date(asUtc.getTime() - offsetMs);

            var inViewerTz = detectedTz && detectedTz !== tz
                ? new Intl.DateTimeFormat([], { weekday:'short', month:'short', day:'numeric', hour:'numeric', minute:'2-digit', hour12:true, timeZone: detectedTz }).format(trueUtc) + ' (' + detectedTz + ')'
                : null;

            var nowMs = Date.now();
            var diffMin = Math.round((trueUtc.getTime() - nowMs) / 60000);
            var rel;
            if (diffMin < 0)        rel = 'in the past';
            else if (diffMin < 60)  rel = 'in ' + diffMin + ' min';
            else if (diffMin < 1440) rel = 'in ' + Math.round(diffMin/60) + ' hr';
            else                    rel = 'in ' + Math.round(diffMin/1440) + ' day(s)';

            atPreview.innerHTML = '<i class="fa-regular fa-clock mr-1"></i>'
                + 'Sends ' + rel
                + (inViewerTz ? ' — your local: <strong class="text-gray-300">' + inViewerTz + '</strong>' : '');
        } catch (e) {
            atPreview.textContent = '';
        }
    }
    if (tzSelect) tzSelect.addEventListener('change', updatePreview);
    if (atInput)  atInput.addEventListener('change', updatePreview);
    updatePreview();
})();
</script>
@endpush