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

@push('styles')
<style>
.kpi-card { background:linear-gradient(160deg,#111827 0%,#0d1117 100%); border:1px solid #1f2937; border-radius:.875rem; padding:1.25rem; }
.kpi-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; margin-bottom:.25rem; }
.kpi-val   { font-size:1.75rem; font-weight:800; line-height:1; color:#fff; }
.kpi-sub   { font-size:.7rem; color:#6b7280; margin-top:.25rem; }
.donut-ring { transform-origin:center; transform:rotate(-90deg); }
.hbar { height:28px; border-radius:4px; background:#1f2937; position:relative; overflow:hidden; }
.hbar-fill { position:absolute; left:0; top:0; bottom:0; border-radius:4px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.link-row { display:flex; align-items:center; gap:.75rem; padding:.625rem 0; border-bottom:1px solid #1f2937; }
.link-row:last-child { border-bottom:none; }
.link-bar { flex:1; height:6px; border-radius:3px; background:#1f2937; overflow:hidden; }
.link-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#3b82f6,#06b6d4); }
</style>
@endpush

@section('admin')
@php
    $pct = fn($v) => number_format($v * 100, 2) . '%';
    $pctShort = fn($v) => number_format($v * 100, 1) . '%';

    // Industry benchmark hints
    $openBench  = 0.25;
    $clickBench = 0.03;
    $openColor  = $stats['open_rate']  >= $openBench  ? '#4ade80' : ($stats['open_rate']  >= $openBench * 0.6  ? '#fcd34d' : '#f87171');
    $clickColor = $stats['click_rate'] >= $clickBench ? '#4ade80' : ($stats['click_rate'] >= $clickBench * 0.6 ? '#fcd34d' : '#f87171');
    $bounceOk   = $stats['bounce_rate'] <= 0.02;
    $complaintOk = $stats['complaint_rate'] <= 0.003;

    // For SVG donut rings (circumference = 2πr at r=32 → ≈201)
    $circ = 201.06;
    $openDash  = round(min($stats['open_rate']  / max(0.001, $openBench  * 1.5), 1) * $circ, 2);
    $clickDash = round(min($stats['click_rate'] / max(0.001, $clickBench * 1.5), 1) * $circ, 2);
@endphp

<div class="max-w-6xl 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>
        <a href="{{ route('admin.campaigns.show', $campaign) }}" class="hover:text-gray-400 transition-colors">{{ Str::limit($campaign->name, 30) }}</a>
        <i class="fa-solid fa-chevron-right text-[9px]"></i>
        <span class="text-gray-400">Analytics</span>
    </nav>

    <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-7">
        <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->sent_at)
            <p class="text-gray-600 text-xs mt-1"><i class="fa-regular fa-calendar mr-1"></i>Sent {{ $campaign->sent_at->format('M j, Y') }}</p>
            @endif
        </div>
        <a href="{{ route('admin.campaigns.show', $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 flex-shrink-0">
            <i class="fa-solid fa-arrow-left text-[10px]"></i> Back
        </a>
    </div>

    @if($campaign->auto_paused)
    <div class="mb-5 p-4 bg-red-900/30 border border-red-700/50 rounded-xl text-red-300 flex items-start gap-3">
        <i class="fa-solid fa-circle-exclamation mt-0.5 flex-shrink-0"></i>
        <div>
            <p class="font-semibold">Auto-paused</p>
            <p class="text-sm text-red-400/80 mt-0.5">Campaign exceeded the 0.3% complaint-rate threshold and was automatically paused.</p>
        </div>
    </div>
    @endif

    {{-- Primary KPIs with donut visuals --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">

        {{-- Open rate (with donut) --}}
        <div class="kpi-card flex flex-col items-center text-center">
            <div class="kpi-label">Open Rate</div>
            <div class="relative w-20 h-20 my-2">
                <svg viewBox="0 0 72 72" class="w-full h-full">
                    <circle cx="36" cy="36" r="32" fill="none" stroke="#1f2937" stroke-width="7"/>
                    <circle cx="36" cy="36" r="32" fill="none"
                            stroke="{{ $openColor }}" stroke-width="7" stroke-linecap="round"
                            stroke-dasharray="{{ $openDash }} {{ $circ }}"
                            class="donut-ring"
                            style="transition:stroke-dasharray .8s ease"/>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white font-bold text-sm">{{ $pctShort($stats['open_rate']) }}</span>
                </div>
            </div>
            <div class="kpi-sub">{{ number_format($stats['unique_opens']) }} unique opens</div>
        </div>

        {{-- Click rate (with donut) --}}
        <div class="kpi-card flex flex-col items-center text-center">
            <div class="kpi-label">Click Rate</div>
            <div class="relative w-20 h-20 my-2">
                <svg viewBox="0 0 72 72" class="w-full h-full">
                    <circle cx="36" cy="36" r="32" fill="none" stroke="#1f2937" stroke-width="7"/>
                    <circle cx="36" cy="36" r="32" fill="none"
                            stroke="{{ $clickColor }}" stroke-width="7" stroke-linecap="round"
                            stroke-dasharray="{{ $clickDash }} {{ $circ }}"
                            class="donut-ring"
                            style="transition:stroke-dasharray .8s ease"/>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white font-bold text-sm">{{ $pctShort($stats['click_rate']) }}</span>
                </div>
            </div>
            <div class="kpi-sub">{{ number_format($stats['unique_clicks']) }} unique clicks</div>
        </div>

        {{-- Delivery --}}
        <div class="kpi-card">
            <div class="kpi-label">Delivered</div>
            <div class="kpi-val">{{ number_format($stats['delivered']) }}</div>
            <div class="kpi-sub">of {{ number_format($stats['sent']) }} sent</div>
            @php $deliveredPct = $stats['sent'] > 0 ? $stats['delivered'] / $stats['sent'] : 0; @endphp
            <div class="mt-3 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-full rounded-full bg-gradient-to-r from-emerald-700 to-emerald-400"
                     style="width:{{ number_format($deliveredPct * 100) }}%"></div>
            </div>
        </div>

        {{-- CTOR --}}
        <div class="kpi-card">
            <div class="kpi-label">CTOR</div>
            <div class="kpi-val" style="color:{{ $stats['ctor'] >= 0.1 ? '#4ade80' : '#fff' }}">{{ $pctShort($stats['ctor']) }}</div>
            <div class="kpi-sub">click-to-open rate</div>
            <div class="mt-2 text-xs text-gray-600">Clicks among openers</div>
        </div>
    </div>

    {{-- Health metrics row --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="kpi-card">
            <div class="kpi-label">Bounce Rate</div>
            <div class="kpi-val text-xl" style="color:{{ $bounceOk ? '#fff' : '#fcd34d' }}">{{ $pct($stats['bounce_rate']) }}</div>
            <div class="kpi-sub">{{ number_format($stats['bounced']) }} bounced · threshold 2%</div>
            <div class="mt-2 flex items-center gap-1.5 text-xs {{ $bounceOk ? 'text-emerald-400' : 'text-amber-400' }}">
                <i class="fa-solid {{ $bounceOk ? 'fa-circle-check' : 'fa-triangle-exclamation' }} text-[10px]"></i>
                {{ $bounceOk ? 'Healthy' : 'Above threshold' }}
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Complaint Rate</div>
            <div class="kpi-val text-xl" style="color:{{ $complaintOk ? '#fff' : '#f87171' }}">{{ $pct($stats['complaint_rate']) }}</div>
            <div class="kpi-sub">threshold 0.30%</div>
            <div class="mt-2 flex items-center gap-1.5 text-xs {{ $complaintOk ? 'text-emerald-400' : 'text-red-400' }}">
                <i class="fa-solid {{ $complaintOk ? 'fa-circle-check' : 'fa-circle-exclamation' }} text-[10px]"></i>
                {{ $complaintOk ? 'Within limit' : 'Exceeds limit' }}
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Unsubscribes</div>
            <div class="kpi-val text-xl">{{ number_format($stats['unsubscribed']) }}</div>
            <div class="kpi-sub">from this campaign</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-label">Total Opens</div>
            <div class="kpi-val text-xl">{{ number_format($stats['total_opens']) }}</div>
            <div class="kpi-sub">incl. repeat opens</div>
        </div>
    </div>

    {{-- Hourly engagement chart --}}
    <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6 mb-5">
        <h2 class="text-sm font-semibold text-white uppercase tracking-wider mb-1">Engagement by Hour</h2>
        <p class="text-gray-600 text-xs mb-5">Opens and clicks in the first 48 h after sending.</p>

        @if(empty($hourly))
        <div class="text-center py-10">
            <i class="fa-solid fa-chart-bar text-3xl text-gray-700 mb-3 block"></i>
            <p class="text-gray-500 text-sm">No engagement events recorded yet.</p>
        </div>
        @else
        @php
            $maxHourly = max(1, ...array_map(fn($b) => max($b['opens'], $b['clicks']), $hourly));
        @endphp
        <div class="space-y-1.5">
            @foreach($hourly as $b)
            @php
                $openW  = ($b['opens']  / $maxHourly) * 100;
                $clickW = ($b['clicks'] / $maxHourly) * 100;
            @endphp
            <div class="flex items-center gap-3 text-xs">
                <span class="text-gray-600 font-mono w-14 flex-shrink-0 text-right">{{ substr($b['bucket'], -5) }}</span>
                <div class="flex-1 space-y-0.5">
                    {{-- Opens --}}
                    <div class="hbar">
                        <div class="hbar-fill bg-gradient-to-r from-emerald-800 to-emerald-500" style="width:{{ $openW }}%"></div>
                        @if($b['opens'] > 0)
                        <span class="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] font-medium text-emerald-300/80">{{ $b['opens'] }} opens</span>
                        @endif
                    </div>
                    {{-- Clicks --}}
                    <div class="hbar">
                        <div class="hbar-fill bg-gradient-to-r from-blue-800 to-blue-500" style="width:{{ $clickW }}%"></div>
                        @if($b['clicks'] > 0)
                        <span class="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] font-medium text-blue-300/80">{{ $b['clicks'] }} clicks</span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="flex items-center gap-4 mt-4 text-xs text-gray-500">
            <span class="flex items-center gap-1.5"><span class="w-3 h-1.5 rounded-full bg-emerald-500 inline-block"></span> Opens</span>
            <span class="flex items-center gap-1.5"><span class="w-3 h-1.5 rounded-full bg-blue-500 inline-block"></span> Clicks</span>
        </div>
        @endif
    </div>

    {{-- Top clicked links --}}
    <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6">
        <h2 class="text-sm font-semibold text-white uppercase tracking-wider mb-1">Top Clicked Links</h2>
        <p class="text-gray-600 text-xs mb-5">Ranked by total clicks.</p>

        @if($topLinks->isEmpty())
        <div class="text-center py-8">
            <i class="fa-solid fa-link text-2xl text-gray-700 mb-2 block"></i>
            <p class="text-gray-500 text-sm">No link clicks recorded yet.</p>
        </div>
        @else
        @php $maxClicks = max(1, $topLinks->max('clicks')); @endphp
        <div class="divide-y divide-gray-800/50">
            @foreach($topLinks as $link)
            <div class="link-row">
                <div class="flex-1 min-w-0">
                    <a target="_blank" class="text-blue-400 hover:text-blue-300 text-sm truncate block transition-colors" href="{{ $link->url }}">
                        {{ $link->url }}
                    </a>
                    <div class="link-bar mt-1.5">
                        <div class="link-bar-fill" style="width:{{ ($link->clicks / $maxClicks) * 100 }}%"></div>
                    </div>
                </div>
                <div class="text-right flex-shrink-0 space-y-0.5">
                    <div class="text-white font-bold text-sm">{{ number_format($link->clicks) }}</div>
                    <div class="text-gray-600 text-xs">{{ number_format($link->unique_clicks) }} uniq.</div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection