@extends('layouts.app')
@section('title', $campaign->name)

@section('content')
<div class="space-y-6"
     @if (in_array($campaign->status, ['queued', 'sending']))
         x-data x-init="setTimeout(() => window.location.reload(), 15000)"
     @endif
>
    <div class="card-pad">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <div class="flex items-center gap-3">
                    <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $campaign->name }}</h2>
                    <x-status-badge :status="$campaign->status"/>
                </div>
                <p class="mt-1 text-sm text-slate-500">
                    {{ $campaign->subject }} · Audience: {{ $campaign->segment?->name ?? $campaign->contactList?->name ?? '—' }}
                    @if ($campaign->scheduled_at) · Scheduled {{ $campaign->scheduled_at->timezone(\App\Support\Settings::get('app.timezone', 'Europe/London'))->format('d M Y H:i') }}@endif
                </p>
                @if ($campaign->last_error)
                    <p class="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:bg-amber-950/50 dark:text-amber-200">{{ $campaign->last_error }}</p>
                @endif
            </div>
            <div class="flex flex-wrap gap-2">
                @if ($campaign->isEditable())
                    @can('manage campaigns')
                        <a href="{{ route('campaigns.edit', $campaign) }}" class="btn-secondary">Edit</a>
                        <a href="{{ route('campaigns.review', $campaign) }}" class="btn-primary">Review &amp; send</a>
                    @endcan
                @endif
                @can('send campaigns')
                    @if ($campaign->canPause())
                        <x-confirm-form :action="route('campaigns.pause', $campaign)" buttonClass="btn-secondary"
                                        message="Pause this campaign? Sending stops within seconds; you can resume any time." confirmLabel="Pause">
                            Pause
                        </x-confirm-form>
                    @endif
                    @if ($campaign->canResume())
                        <form method="POST" action="{{ route('campaigns.resume', $campaign) }}">@csrf<button class="btn-primary">Resume</button></form>
                    @endif
                    @if ($campaign->canCancel())
                        <x-confirm-form :action="route('campaigns.cancel', $campaign)" buttonClass="btn-danger"
                                        message="Cancel this campaign permanently? Queued recipients will not receive the email. This cannot be undone." confirmLabel="Cancel campaign">
                            Cancel
                        </x-confirm-form>
                    @endif
                @endcan
                @can('manage campaigns')
                    <form method="POST" action="{{ route('campaigns.duplicate', $campaign) }}">@csrf<button class="btn-secondary">Duplicate</button></form>
                @endcan
                @can('view reports')
                    @if ($campaign->sent_count > 0)
                        <a href="{{ route('reports.show', $campaign) }}" class="btn-secondary">Full report</a>
                    @endif
                @endcan
            </div>
        </div>

        @if (in_array($campaign->status, ['queued', 'sending', 'paused']))
            <div class="mt-5">
                <div class="mb-1 flex justify-between text-sm text-slate-500">
                    <span>{{ $campaign->status === 'queued' ? 'Building recipient queue…' : 'Sending in batches via cron' }}</span>
                    <span>{{ number_format($campaign->sent_count) }} / {{ number_format($campaign->total_recipients) }} · {{ $campaign->progressPercent() }}%</span>
                </div>
                <div class="progress-track"><div class="progress-bar" style="width: {{ $campaign->progressPercent() }}%"></div></div>
            </div>
        @endif
    </div>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-8">
        <x-stat-card label="Recipients" :value="number_format($campaign->total_recipients)"/>
        <x-stat-card label="Sent" :value="number_format($campaign->sent_count)" tone="blue"/>
        <x-stat-card label="Delivered" :value="number_format($campaign->delivered_count)" tone="green"/>
        <x-stat-card label="Failed" :value="number_format($campaign->failed_count)" tone="red"/>
        <x-stat-card label="Bounces" :value="number_format($campaign->soft_bounce_count + $campaign->hard_bounce_count)" tone="amber"/>
        <x-stat-card label="Complaints" :value="number_format($campaign->complaint_count)" tone="red"/>
        <x-stat-card label="Opens*" :value="number_format($campaign->unique_open_count)"/>
        <x-stat-card label="Clicks" :value="number_format($campaign->unique_click_count)"/>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="card">
            <h3 class="border-b border-slate-200 px-5 py-4 text-base font-semibold text-slate-900 dark:border-slate-800 dark:text-white">Queue breakdown</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($recipientBreakdown as $status => $total)
                    <li class="flex items-center justify-between px-5 py-3 text-sm">
                        <x-status-badge :status="$status"/>
                        <span class="tabular-nums font-medium">{{ number_format($total) }}</span>
                    </li>
                @empty
                    <li class="px-5 py-8 text-center text-sm text-slate-500">Recipient queue not built yet — it is created when the campaign starts.</li>
                @endforelse
            </ul>
        </div>
        <div class="card">
            <h3 class="border-b border-slate-200 px-5 py-4 text-base font-semibold text-slate-900 dark:border-slate-800 dark:text-white">Recent events</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($recentEvents as $event)
                    <li class="flex items-center gap-3 px-5 py-2.5 text-sm">
                        <x-status-badge :status="$event->type" class="shrink-0"/>
                        <span class="min-w-0 flex-1 truncate">{{ $event->contact?->email ?? '—' }}</span>
                        <time class="shrink-0 text-xs text-slate-500">{{ $event->occurred_at->diffForHumans() }}</time>
                    </li>
                @empty
                    <li class="px-5 py-8 text-center text-sm text-slate-500">No events yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
    <p class="help">* Opens are approximate due to privacy protections in modern email clients.</p>
</div>
@endsection