@php
    $distributions = [
        ['Sumber Trafik', $report->traffic, 'source_name', 'visitor_count'],
        ['Pelayar Web', $report->browsers, 'browser_name', 'visit_count'],
        ['Jenis Peranti', $report->devices, 'device_type', 'visit_count'],
        ['Geografi', $report->geography, 'country', 'visitor_count'],
    ];
    $totalEmissions = $report->carbon->sum('calculated_emissions_gco2e');
@endphp

@if ($report->visitors)
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat-card label="Jumlah Pelawat" :value="number_format($report->visitors->total_visitors)" />
        <x-stat-card label="Pelawat Baharu" :value="number_format($report->visitors->new_visitors)"
                     :hint="$report->visitors->newVisitorPercentage().'% daripada jumlah'" tone="emerald" />
        <x-stat-card label="Pelawat Berulang" :value="number_format($report->visitors->returning_visitors)" tone="indigo" />
        <x-stat-card label="Purata Masa" :value="$report->visitors->averageTimeForHumans()" tone="slate" />
    </div>
@endif

@if ($report->visitors?->monthly_breakdown)
    <x-card title="Trend Pelawat Tahunan" class="mt-6">
        @php
            // Ordered by the calendar, not by however the JSON keys happen to
            // be stored — an imported report can hold them alphabetically.
            $stored = $report->visitors->monthly_breakdown;
            $breakdown = collect(\App\Services\VisitorTrendBuilder::MONTH_KEYS)
                ->mapWithKeys(fn ($month) => [$month => (int) ($stored[$month] ?? 0)]);
            $peak = max(1, $breakdown->max());
        @endphp
        <div class="flex items-end gap-2" style="height: 160px">
            @foreach ($breakdown as $month => $value)
                <div class="flex h-full w-full flex-col justify-end" title="{{ ucfirst($month) }}: {{ number_format($value) }}">
                    <div class="rounded-t bg-indigo-500" style="height: {{ max(1, $value / $peak * 100) }}%"></div>
                </div>
            @endforeach
        </div>
        <div class="mt-2 flex gap-2 text-center text-xs text-slate-500">
            @foreach ($breakdown as $month => $value)
                <span class="w-full">{{ ucfirst($month) }}</span>
            @endforeach
        </div>
    </x-card>
@endif

<div class="mt-6 grid gap-6 lg:grid-cols-2">
    @foreach ($distributions as [$title, $rows, $labelKey, $countKey])
        @if ($rows->isNotEmpty())
            <x-card :title="$title">
                <div class="space-y-3">
                    @php $max = max(1, $rows->max($countKey)); @endphp
                    @foreach ($rows->sortByDesc($countKey) as $row)
                        <div class="flex items-center gap-3">
                            <span class="w-32 shrink-0 truncate text-sm text-slate-700">{{ $row->{$labelKey} }}</span>
                            <div class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-indigo-500" style="width: {{ $row->{$countKey} / $max * 100 }}%"></div>
                            </div>
                            <span class="w-20 shrink-0 text-right text-xs tabular-nums text-slate-600">
                                {{ number_format($row->{$countKey}) }}
                                <span class="text-slate-400">({{ $row->percentage }}%)</span>
                            </span>
                        </div>
                    @endforeach
                </div>
            </x-card>
        @endif
    @endforeach
</div>

@if ($report->topPages->isNotEmpty() || $report->searchQueries->isNotEmpty())
    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        @if ($report->topPages->isNotEmpty())
            <x-card title="Halaman Paling Kerap Dilawati" body-class="p-0">
                <x-page-table :headers="['Halaman', ['Lawatan', 'text-right']]">
                    @foreach ($report->topPages->sortByDesc('visit_count') as $page)
                        <tr>
                            <td class="max-w-xs px-5 py-2.5">
                                <p class="truncate text-slate-800">{{ $page->page_title ?: $page->page_url }}</p>
                                <p class="truncate text-xs text-slate-500">{{ $page->page_url }}</p>
                            </td>
                            <td class="px-5 py-2.5 text-right tabular-nums text-slate-600">{{ number_format($page->visit_count) }}</td>
                        </tr>
                    @endforeach
                </x-page-table>
            </x-card>
        @endif

        @if ($report->searchQueries->isNotEmpty())
            <x-card title="Carian Popular" body-class="p-0">
                <x-page-table :headers="['Kata Carian', ['Bilangan', 'text-right']]">
                    @foreach ($report->searchQueries->sortByDesc('search_count') as $query)
                        <tr>
                            <td class="px-5 py-2.5 text-slate-800">{{ $query->query_text }}</td>
                            <td class="px-5 py-2.5 text-right tabular-nums text-slate-600">{{ number_format($query->search_count) }}</td>
                        </tr>
                    @endforeach
                </x-page-table>
            </x-card>
        @endif
    </div>
@endif

@if ($report->incidents->isNotEmpty())
    <x-card title="Kalendar Insiden" description="Setiap petak mewakili satu hari dalam bulan laporan." class="mt-6">
        <div class="flex flex-wrap gap-1.5">
            @foreach ($report->incidents as $incident)
                <div class="grid size-8 place-items-center rounded text-xs font-medium
                            {{ $incident->has_incident ? 'bg-rose-500 text-white' : 'bg-emerald-100 text-emerald-700' }}"
                     title="{{ $incident->has_incident ? $incident->title : 'Tiada insiden' }}">
                    {{ $incident->day_number }}
                </div>
            @endforeach
        </div>

        @php $active = $report->incidents->where('has_incident', true); @endphp
        @if ($active->isNotEmpty())
            <div class="mt-5 divide-y divide-slate-100 border-t border-slate-100">
                @foreach ($active as $incident)
                    <div class="py-3">
                        <div class="flex items-center gap-2">
                            <x-badge :color="$incident->severityColor()">Hari {{ $incident->day_number }}</x-badge>
                            <p class="text-sm font-medium text-slate-900">{{ $incident->title }}</p>
                        </div>
                        @if ($incident->description)
                            <p class="mt-1 text-sm text-slate-600">{{ $incident->description }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>
@endif

@if ($report->security->isNotEmpty())
    <x-card title="Status Keselamatan &amp; CMS" class="mt-6" body-class="p-0">
        <x-page-table :headers="['Laman Web', 'SSL', 'Tamat SSL', 'CMS', 'Versi', 'Terkini']">
            @foreach ($report->security as $row)
                <tr>
                    <td class="px-5 py-3 text-slate-800">{{ $row->website->displayName() }}</td>
                    <td class="px-5 py-3">
                        <x-badge :color="$row->ssl_status === 'Valid' ? 'emerald' : 'rose'">{{ $row->ssl_status ?? '—' }}</x-badge>
                    </td>
                    <td class="px-5 py-3 whitespace-nowrap text-slate-600">{{ $row->ssl_expiry?->format('d M Y') ?? '—' }}</td>
                    <td class="px-5 py-3 text-slate-600">{{ $row->cms_name ?? '—' }}</td>
                    <td class="px-5 py-3 text-slate-600">
                        {{ $row->cms_version ?? '—' }}
                        @if ($row->isOutdated())
                            <x-badge color="amber">Perlu kemas kini</x-badge>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-slate-600">{{ $row->cms_latest_version ?? '—' }}</td>
                </tr>
            @endforeach
        </x-page-table>
    </x-card>
@endif

@if ($report->carbon->isNotEmpty())
    <x-card title="Jejak Karbon Digital" :description="'Jumlah pelepasan '.number_format($totalEmissions / 1000, 2).' kg CO2e bagi bulan ini (model SWDM v4).'" class="mt-6" body-class="p-0">
        <x-page-table :headers="['Laman Web', ['Berat Halaman', 'text-right'], ['Paparan', 'text-right'], ['Data', 'text-right'], ['Pelepasan', 'text-right'], ['Per Lawatan', 'text-right'], ['Pokok/Tahun', 'text-right']]">
            @foreach ($report->carbon as $row)
                <tr>
                    <td class="px-5 py-3 text-slate-800">{{ $row->website->displayName() }}</td>
                    <td class="px-5 py-3 text-right tabular-nums text-slate-600">{{ number_format($row->page_weight_kb, 1) }} KB</td>
                    <td class="px-5 py-3 text-right tabular-nums text-slate-600">{{ number_format($row->monthly_pageviews) }}</td>
                    <td class="px-5 py-3 text-right tabular-nums text-slate-600">{{ number_format($row->data_transfer_gb, 2) }} GB</td>
                    <td class="px-5 py-3 text-right font-semibold tabular-nums text-slate-900">{{ number_format($row->emissionsKg(), 2) }} kg</td>
                    <td class="px-5 py-3 text-right tabular-nums text-slate-600">{{ $row->gramsPerVisit() }} g</td>
                    <td class="px-5 py-3 text-right tabular-nums text-slate-600">{{ $row->treesPerYear() }}</td>
                </tr>
            @endforeach
        </x-page-table>
    </x-card>
@endif

@php $sections = $report->sectionContent(); @endphp
@if (collect($sections)->filter()->isNotEmpty())
    <div class="mt-6 space-y-6">
        @foreach (\App\Models\MonthlyReport::SECTIONS as $key => $label)
            @if (! empty($sections[$key]))
                <x-card :title="$label">
                    <x-rich-text :html="$sections[$key]" />
                </x-card>
            @endif
        @endforeach
    </div>
@endif