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

@section('content')
<div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $campaign->name }}</h2>
            <p class="text-sm text-slate-500">
                <x-status-badge :status="$campaign->status"/>
                · {{ number_format($campaign->sent_count) }} sent
                @if ($campaign->started_at) · started {{ $campaign->started_at->format('d M Y H:i') }}@endif
            </p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('campaigns.show', $campaign) }}" class="btn-secondary">Campaign</a>
            @can('export reports')
                <a href="{{ route('reports.export', $campaign) }}" class="btn-primary">Export CSV</a>
            @endcan
        </div>
    </div>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-7">
        <x-stat-card label="Delivery rate" :value="$rates['delivery'].'%'" tone="green"/>
        <x-stat-card label="Bounce rate" :value="$rates['bounce'].'%'" :tone="$rates['bounce'] > 5 ? 'red' : 'amber'"/>
        <x-stat-card label="Complaint rate" :value="$rates['complaint'].'%'" :tone="$rates['complaint'] > 0.3 ? 'red' : 'default'"/>
        <x-stat-card label="Open rate*" :value="$rates['open'].'%'"/>
        <x-stat-card label="Click rate" :value="$rates['click'].'%'"/>
        <x-stat-card label="Click-to-open" :value="$rates['cto'].'%'"/>
        <x-stat-card label="Unsubscribe rate" :value="$rates['unsubscribe'].'%'"/>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="card-pad">
            <h3 class="mb-4 text-base font-semibold text-slate-900 dark:text-white">Activity over time</h3>
            <canvas id="timelineChart" height="140" role="img" aria-label="Campaign activity timeline"></canvas>
        </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">Top clicked links</h3>
            <table class="table">
                <thead><tr><th>URL</th><th class="w-24">Clicks</th><th class="w-24">Unique</th></tr></thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($topLinks as $link)
                    <tr>
                        <td class="max-w-sm truncate">{{ $link->url }}</td>
                        <td class="tabular-nums">{{ number_format($link->clicks) }}</td>
                        <td class="tabular-nums">{{ number_format($link->unique_clicks) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="py-8 text-center text-sm text-slate-500">No clicks recorded yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        @foreach ([['Country', $byCountry], ['Industry', $byIndustry], ['Source', $bySource]] as [$label, $rows])
            <div class="card">
                <h3 class="border-b border-slate-200 px-5 py-4 text-sm font-semibold text-slate-900 dark:border-slate-800 dark:text-white">By {{ strtolower($label) }}</h3>
                <table class="table">
                    <thead><tr><th>{{ $label }}</th><th>Sent</th><th>Opened*</th><th>Clicked</th></tr></thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    @forelse ($rows as $row)
                        <tr>
                            <td class="max-w-32 truncate">{{ $row->label }}</td>
                            <td class="tabular-nums">{{ number_format($row->sent) }}</td>
                            <td class="tabular-nums">{{ number_format($row->opened) }}</td>
                            <td class="tabular-nums">{{ number_format($row->clicked) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-6 text-center text-sm text-slate-500">No data.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        @endforeach
    </div>
    <p class="help">* Open tracking is approximate — privacy features in modern email clients can inflate or hide opens.</p>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const timeline = @json($timeline);
        const labels = Object.keys(timeline);
        const series = (type) => labels.map((day) => timeline[day][type] ?? 0);

        new Chart(document.getElementById('timelineChart'), {
            type: 'bar',
            data: {
                labels,
                datasets: [
                    { label: 'Sent', data: series('sent'), backgroundColor: '#3b63f6' },
                    { label: 'Opened', data: series('opened'), backgroundColor: '#10b981' },
                    { label: 'Clicked', data: series('clicked'), backgroundColor: '#f59e0b' },
                ],
            },
            options: {
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
                plugins: { legend: { position: 'bottom' } },
            },
        });
    });
</script>
@endpush