@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">

    {{-- Health banners --}}
    @unless ($cronHealthy)
        <div class="flex items-start gap-3 rounded-xl bg-amber-50 p-4 ring-1 ring-amber-200 dark:bg-amber-950/40 dark:ring-amber-900">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
            <div class="text-sm text-amber-800 dark:text-amber-200">
                <p class="font-semibold">Cron does not appear to be running.</p>
                <p>No scheduler heartbeat in the last 10 minutes — campaigns and imports will not process. Check the cPanel cron job. <a href="{{ route('system-status') }}" class="font-medium underline">System status →</a></p>
            </div>
        </div>
    @endunless
    @unless ($providerConfigured)
        <div class="flex items-start gap-3 rounded-xl bg-sky-50 p-4 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:ring-sky-900">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm text-sky-800 dark:text-sky-200">
                <span class="font-semibold">Email provider not configured.</span>
                Add your {{ $providerName }} credentials under <a href="{{ route('settings.edit', ['tab' => 'provider']) }}" class="font-medium underline">Settings → Email Provider</a> before sending campaigns.
            </p>
        </div>
    @endunless

    {{-- Contact stats --}}
    <div>
        <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Contacts</h2>
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
            <x-stat-card label="Total contacts" :value="number_format($contactsTotal)"/>
            <x-stat-card label="Active" :value="number_format($contactsByStatus['active'] ?? 0)" tone="green"/>
            <x-stat-card label="Invalid" :value="number_format($contactsByStatus['invalid'] ?? 0)" tone="amber"/>
            <x-stat-card label="Unsubscribed" :value="number_format($contactsByStatus['unsubscribed'] ?? 0)" tone="red"/>
            <x-stat-card label="Suppressed" :value="number_format($suppressedTotal)" tone="red"/>
            <x-stat-card label="Lists / Segments" :value="number_format($listsTotal).' / '.number_format($segmentsTotal)"/>
        </div>
    </div>

    {{-- Campaign + email stats --}}
    <div>
        <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Sending</h2>
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
            <x-stat-card label="Campaigns" :value="number_format($campaignsTotal)"
                         :sub="($campaignsByStatus['draft'] ?? 0).' draft · '.($campaignsByStatus['scheduled'] ?? 0).' scheduled'"/>
            <x-stat-card label="Pending queue" :value="number_format($pendingRecipients)" tone="blue"/>
            <x-stat-card label="Emails sent" :value="number_format($totals['sent'])"/>
            <x-stat-card label="Delivered" :value="number_format($totals['delivered'])" :sub="$rates['delivery'].'% delivery rate'" tone="green"/>
            <x-stat-card label="Bounces" :value="number_format($totals['soft_bounces'] + $totals['hard_bounces'])" :sub="$rates['bounce'].'% bounce rate'" tone="amber"/>
            <x-stat-card label="Complaints" :value="number_format($totals['complaints'])" :sub="$rates['complaint'].'% complaint rate'" tone="red"/>
        </div>
    </div>

    {{-- Engagement + charts --}}
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="card-pad lg:col-span-2">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-900 dark:text-white">Emails sent — last 14 days</h3>
            </div>
            <canvas id="sendChart" height="110" role="img" aria-label="Emails sent per day chart"></canvas>
        </div>
        <div class="card-pad">
            <h3 class="mb-4 text-base font-semibold text-slate-900 dark:text-white">Engagement</h3>
            <dl class="space-y-4 text-sm">
                @foreach ([
                    ['Open rate (approx.)', $rates['open'].'%', $rates['open']],
                    ['Click rate', $rates['click'].'%', $rates['click']],
                    ['Unsubscribe rate', $rates['unsubscribe'].'%', $rates['unsubscribe']],
                ] as [$label, $display, $val])
                    <div>
                        <div class="flex justify-between"><dt class="text-slate-500 dark:text-slate-400">{{ $label }}</dt><dd class="font-semibold tabular-nums text-slate-900 dark:text-white">{{ $display }}</dd></div>
                        <div class="progress-track mt-1.5"><div class="progress-bar" style="width: {{ min(100, $val) }}%"></div></div>
                    </div>
                @endforeach
            </dl>
            <p class="help mt-4">Open tracking is approximate — privacy features in modern email clients pre-load images, so real open rates may differ.</p>
        </div>
    </div>

    {{-- Sending progress --}}
    @if ($sendingCampaigns->isNotEmpty())
        <div class="card-pad">
            <h3 class="mb-4 text-base font-semibold text-slate-900 dark:text-white">Currently sending</h3>
            <div class="space-y-4">
                @foreach ($sendingCampaigns as $campaign)
                    <div>
                        <div class="mb-1 flex items-center justify-between text-sm">
                            <a href="{{ route('campaigns.show', $campaign) }}" class="font-medium text-brand-600 hover:underline dark:text-brand-400">{{ $campaign->name }}</a>
                            <span class="tabular-nums text-slate-500">{{ 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>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Recent activity --}}
    <div class="grid gap-6 lg:grid-cols-3">
        <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 campaigns</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($recentCampaigns as $campaign)
                    <li class="flex items-center justify-between gap-2 px-5 py-3 text-sm">
                        <a href="{{ route('campaigns.show', $campaign) }}" class="truncate font-medium hover:text-brand-600">{{ $campaign->name }}</a>
                        <x-status-badge :status="$campaign->status"/>
                    </li>
                @empty
                    <li class="px-5 py-6 text-center text-sm text-slate-500">No campaigns yet.</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 imports</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($recentImports as $import)
                    <li class="flex items-center justify-between gap-2 px-5 py-3 text-sm">
                        <a href="{{ route('imports.show', $import) }}" class="truncate font-medium hover:text-brand-600">{{ $import->original_filename }}</a>
                        <x-status-badge :status="$import->status"/>
                    </li>
                @empty
                    <li class="px-5 py-6 text-center text-sm text-slate-500">No imports yet.</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 unsubscribes</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($recentUnsubscribes as $unsubscribe)
                    <li class="px-5 py-3 text-sm">
                        <p class="truncate font-medium">{{ $unsubscribe->email_normalized }}</p>
                        <p class="text-xs text-slate-500">{{ $unsubscribe->unsubscribed_at->diffForHumans() }}</p>
                    </li>
                @empty
                    <li class="px-5 py-6 text-center text-sm text-slate-500">No unsubscribes yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const labels = @json($sendTimeline->keys());
        const data = @json($sendTimeline->values());
        const dark = () => document.documentElement.classList.contains('dark');

        const chart = new Chart(document.getElementById('sendChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Emails sent',
                    data,
                    fill: true,
                    tension: 0.35,
                    borderColor: '#3b63f6',
                    backgroundColor: 'rgba(59, 99, 246, 0.12)',
                    pointRadius: 3,
                }],
            },
            options: {
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false }, ticks: { color: dark() ? '#94a3b8' : '#64748b' } },
                    y: { beginAtZero: true, ticks: { precision: 0, color: dark() ? '#94a3b8' : '#64748b' } },
                },
            },
        });
        window.addEventListener('theme-changed', () => {
            const color = dark() ? '#94a3b8' : '#64748b';
            chart.options.scales.x.ticks.color = color;
            chart.options.scales.y.ticks.color = color;
            chart.update();
        });
    });
</script>
@endpush