@extends('admin.layout')
@section('title', 'Kunjungan')
@section('subtitle', 'Berapa yang membuka aplikasi. Satu perangkat dihitung sekali per halaman tiap jam, waktu Asia/Jakarta')

@section('content')
    {{-- Filter periode di atas, supaya jelas semua angka di bawah mengikutinya. --}}
    <div class="flex flex-wrap items-center justify-end gap-3">
        @include('admin.partials.period-picker', [
            'start' => $start,
            'end' => $end,
            'target' => route('admin.analytics'),
        ])

        {{-- Satuan grafik. Periode yang sedang aktif ikut dibawa, jadi menukar
             satuan tidak mengubah rentangnya. --}}
        <div class="flex items-center gap-1 bg-white border border-line rounded-xl p-1" role="group" aria-label="Satuan grafik">
            <span class="text-xs text-sub font-medium px-2">Show</span>
            @foreach (['hari' => 'Hari', 'jam' => 'Jam'] as $opt => $text)
                <a href="{{ route('admin.analytics', ['start' => $start->toDateString(), 'end' => $end->toDateString(), 'show' => $opt]) }}"
                   @if ($show === $opt) aria-current="true" @endif
                   class="px-3 py-1.5 rounded-lg text-sm font-semibold transition
                          {{ $show === $opt ? 'bg-brand text-white' : 'text-sub hover:bg-brand-soft hover:text-brand-dark' }}">
                    {{ $text }}
                </a>
            @endforeach
        </div>
    </div>

    <div class="flex flex-wrap gap-3 mt-4">
        <div class="bg-white rounded-2xl border border-line px-5 py-4">
            <div class="text-xs text-sub font-medium">Kunjungan pada periode ini</div>
            <div class="text-[11px] text-sub/70">maks. 1 per perangkat/halaman tiap jam</div>
            <div class="text-2xl font-extrabold mt-1">{{ number_format($totalViews) }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-line px-5 py-4">
            <div class="text-xs text-sub font-medium">Perangkat</div>
            <div class="text-[11px] text-sub/70">dijumlahkan dari hitungan tiap hari</div>
            <div class="text-2xl font-extrabold mt-1">{{ number_format($totalVisitors) }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-line px-5 py-4">
            <div class="text-xs text-sub font-medium">Rentang</div>
            <div class="text-sm font-bold mt-2">{{ $start->translatedFormat('d M Y') }} – {{ $end->translatedFormat('d M Y') }}</div>
            <div class="text-xs text-sub mt-0.5">{{ $days }} hari</div>
        </div>
    </div>

    {{-- Kunjungan lama tidak menyimpan jam maupun peran. Disebutkan
         terang-terangan supaya grafik yang lebih rendah dari total periode tidak
         dibaca sebagai data yang hilang. --}}
    @if ($viewsWithoutRole > 0 || $viewsWithoutHour > 0)
        <div class="mt-4 bg-accent-soft border border-accent/20 rounded-2xl px-5 py-4 text-sm space-y-1">
            @if ($viewsWithoutRole > 0)
                <div>
                    <span class="font-bold">{{ number_format($viewsWithoutRole) }} kunjungan</span> pada periode ini dicatat sebelum
                    pencatatan per peran aktif, jadi tidak diketahui pengguna, mitra, atau tamu — dan tidak masuk garis mana pun.
                </div>
            @endif
            @if ($viewsWithoutHour > 0)
                <div>
                    <span class="font-bold">{{ number_format($viewsWithoutHour) }} kunjungan</span> dicatat sebelum
                    pencatatan per jam aktif, jadi jamnya tidak diketahui dan tidak masuk profil jam.
                </div>
            @endif
            <div class="text-sub">Kartu “Kunjungan pada periode ini” tetap menghitung semuanya.</div>
        </div>
    @endif

    {{-- Grafik kunjungan, satu garis per peran. Digambar sebagai SVG langsung
         dari data — tanpa pustaka chart, supaya CMS tidak menarik JS dari luar.
         "Perangkat" tidak digambar di sini: enam garis jadi tak terbaca,
         angkanya ada di tabel di bawah. --}}
    @php
        $w = 760; $h = 240;                 // kanvas
        $padL = 44; $padR = 16; $padT = 16; $padB = 28;
        $plotW = $w - $padL - $padR;
        $plotH = $h - $padT - $padB;

        // Tamu digambar samar dan putus-putus: jumlahnya biasanya paling besar,
        // dan yang dicari di grafik ini biasanya pengguna vs mitra.
        $lines = [
            'customer' => ['color' => '#2563EB', 'dash' => null],
            'mitra' => ['color' => '#EA580C', 'dash' => null],
            'guest' => ['color' => '#A8A29E', 'dash' => '5 4'],
        ];

        $points = $series->values();
        $peak = max(1, $points->max(fn ($p) => max($p['views'])));
        // Skala dibulatkan ke atas ke angka bulat supaya label sumbunya rapi.
        $step = max(1, (int) ceil($peak / 4));
        $topY = $step * 4;

        $n = max(1, $points->count() - 1);
        $xAt = fn ($i) => $padL + ($n === 0 ? $plotW / 2 : $i * $plotW / $n);
        $yAt = fn ($v) => $padT + $plotH - ($v / $topY * $plotH);

        $path = fn (string $role) => $points
            ->map(fn ($p, $i) => ($i ? 'L' : 'M').round($xAt($i), 1).' '.round($yAt($p['views'][$role]), 1))
            ->implode(' ');

        // Label tanggal dibatasi ~7 supaya tidak bertumpuk di rentang panjang.
        $labelEvery = max(1, (int) ceil($points->count() / 7));

        // Titik-titik yang dipakai lapisan sorot di JS, sudah dalam satuan
        // viewBox supaya JS tidak perlu tahu skalanya.
        $chartJson = $points->map(fn ($p, $i) => [
            'label' => $p['label'],
            'total' => $p['total'],
            // Alamat rincian titik ini: per tanggal pada satuan hari, per jam
            // pada profil jam. Keduanya membuka popup yang sama.
            'detail' => $p['date']
                ? route('admin.analytics.day', ['date' => $p['date']])
                : route('admin.analytics.hour', ['hour' => (int) $p['tick'], 'start' => $start->toDateString(), 'end' => $end->toDateString()]),
            'views' => $p['views'],
            'x' => round($xAt($i), 1),
            'y' => collect($lines)->map(fn ($_, $role) => round($yAt($p['views'][$role]), 1))->all(),
        ])->values()->toJson();

        $rolesJson = collect($lines)
            ->map(fn ($line, $role) => ['name' => $roles[$role], 'color' => $line['color']])
            ->toJson();
    @endphp

    <div class="bg-white rounded-2xl border border-line p-5 mt-4">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="font-bold text-sm">
                {{ $show === 'jam' ? 'Kunjungan per jam' : 'Tren kunjungan harian' }}
                <span class="text-sub font-medium">
                    · {{ $show === 'jam' ? 'seluruh hari pada periode ini dijumlahkan per jam' : 'satu titik per hari' }}
                </span>
                <span class="ml-1 text-[11px] font-semibold text-brand">klik grafik untuk rincian</span>
            </div>
            {{-- Legenda: identitas tidak pernah lewat warna saja — namanya
                 ditulis, dan garis tamu juga dibedakan lewat pola putus-putus. --}}
            <div class="flex items-center gap-4 text-xs text-sub font-medium">
                @foreach ($lines as $role => $line)
                    <span class="flex items-center gap-1.5">
                        <svg width="14" height="4" aria-hidden="true">
                            <line x1="0" y1="2" x2="14" y2="2" stroke="{{ $line['color'] }}" stroke-width="3"
                                  @if ($line['dash']) stroke-dasharray="{{ $line['dash'] }}" @endif />
                        </svg>
                        {{ $roles[$role] }}
                        <span class="text-ink font-bold">{{ number_format($roleTotals[$role]['views']) }}</span>
                    </span>
                @endforeach
            </div>
        </div>

        <div class="relative mt-3" id="chart-wrap">
            <svg id="pv-chart" viewBox="0 0 {{ $w }} {{ $h }}"
                 class="w-full h-auto select-none cursor-pointer" role="img"
                 aria-label="Grafik kunjungan {{ $show === 'jam' ? 'per jam 00 sampai 23' : 'per hari' }} pada periode {{ $start->translatedFormat('d M Y') }} sampai {{ $end->translatedFormat('d M Y') }}, dipisah untuk pengguna, mitra, dan tamu">
                {{-- Grid & label sumbu Y, sengaja tipis agar tidak bersaing dengan data. --}}
                @for ($i = 0; $i <= 4; $i++)
                    @php($gv = $topY / 4 * $i)
                    <line x1="{{ $padL }}" x2="{{ $w - $padR }}" y1="{{ round($yAt($gv), 1) }}" y2="{{ round($yAt($gv), 1) }}"
                          stroke="#EFEDEB" stroke-width="1" />
                    <text x="{{ $padL - 8 }}" y="{{ round($yAt($gv), 1) + 4 }}" text-anchor="end"
                          font-size="10" fill="#78716C">{{ (int) $gv }}</text>
                @endfor

                {{-- Label sumbu X: tanggal, atau jam kalau satuannya jam. --}}
                @foreach ($points as $i => $p)
                    @if ($i % $labelEvery === 0 || $i === $points->count() - 1)
                        <text x="{{ round($xAt($i), 1) }}" y="{{ $h - 8 }}" text-anchor="middle"
                              font-size="10" fill="#78716C">{{ $p['tick'] }}</text>
                    @endif
                @endforeach

                {{-- Garis tiap peran. Tamu digambar lebih dulu supaya pengguna
                     dan mitra — yang lebih sering dibaca — ada di atasnya. --}}
                @foreach (array_reverse($lines, true) as $role => $line)
                    <path d="{{ $path($role) }}" fill="none" stroke="{{ $line['color'] }}" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round"
                          @if ($line['dash']) stroke-dasharray="{{ $line['dash'] }}" @endif />
                @endforeach

                {{-- Penanda titik terakhir, jadi ujung tiap garis tetap jelas
                     tanpa perlu menunjuk apa pun. --}}
                @php($last = $points->last())
                @php($lx = round($xAt($points->count() - 1), 1))
                @foreach ($lines as $role => $line)
                    <circle cx="{{ $lx }}" cy="{{ round($yAt($last['views'][$role]), 1) }}" r="4.5"
                            fill="{{ $line['color'] }}" stroke="#fff" stroke-width="2" />
                @endforeach

                {{-- Lapisan sorot: garis bantu + titik, digerakkan oleh JS. --}}
                <line id="pv-cross" x1="0" x2="0" y1="{{ $padT }}" y2="{{ $padT + $plotH }}"
                      stroke="#78716C" stroke-width="1" stroke-dasharray="3 3" opacity="0" />
                @foreach ($lines as $role => $line)
                    <circle data-dot="{{ $role }}" r="5" fill="{{ $line['color'] }}" stroke="#fff" stroke-width="2" opacity="0" />
                @endforeach
            </svg>

            {{-- Tooltip mengikuti kursor. --}}
            <div id="pv-tip" class="pointer-events-none absolute hidden z-10 rounded-xl bg-ink text-white text-xs px-3 py-2 shadow-lg"></div>
        </div>
    </div>

    <script>
        (() => {
            const svg = document.getElementById('pv-chart');
            const wrap = document.getElementById('chart-wrap');
            const tip = document.getElementById('pv-tip');
            const cross = document.getElementById('pv-cross');
            const data = {!! $chartJson !!};
            const roles = {!! $rolesJson !!};
            const dots = Object.fromEntries(
                Object.keys(roles).map(role => [role, svg.querySelector(`[data-dot="${role}"]`)]),
            );

            // Titik yang sedang disorot. Handler klik memakainya supaya tidak
            // perlu menghitung ulang posisi kursor.
            let current = null;

            const hide = () => {
                tip.classList.add('hidden');
                cross.setAttribute('opacity', 0);
                Object.values(dots).forEach(dot => dot.setAttribute('opacity', 0));
            };

            svg.addEventListener('mousemove', e => {
                const box = svg.getBoundingClientRect();
                // Posisi kursor dikembalikan ke satuan viewBox sebelum dicari
                // titik terdekatnya.
                const vx = (e.clientX - box.left) / box.width * {{ $w }};
                let near = data[0];
                for (const d of data) {
                    if (Math.abs(d.x - vx) < Math.abs(near.x - vx)) near = d;
                }
                current = near;

                cross.setAttribute('x1', near.x);
                cross.setAttribute('x2', near.x);
                cross.setAttribute('opacity', 1);

                for (const [role, dot] of Object.entries(dots)) {
                    dot.setAttribute('cx', near.x);
                    dot.setAttribute('cy', near.y[role]);
                    dot.setAttribute('opacity', 1);
                }

                tip.innerHTML =
                    '<div class="font-semibold">' + near.label + '</div>' +
                    Object.entries(roles).map(([role, meta]) =>
                        '<div class="mt-1 flex items-center gap-1.5">' +
                        '<span style="width:8px;height:8px;border-radius:99px;background:' + meta.color + ';display:inline-block"></span>' +
                        meta.name + ' <b>' + near.views[role] + '</b></div>',
                    ).join('') +
                    '<div class="mt-1 pt-1 border-t border-white/20">Total <b>' + near.total + '</b></div>';
                tip.classList.remove('hidden');

                const px = near.x / {{ $w }} * box.width;
                // Tooltip dijaga tetap di dalam kotak grafik.
                tip.style.left = Math.min(Math.max(px - tip.offsetWidth / 2, 0), wrap.clientWidth - tip.offsetWidth) + 'px';
                tip.style.top = '0px';
            });

            svg.addEventListener('mouseleave', hide);

            // Klik titik → buka rincian tanggalnya. Lewat event, bukan memanggil
            // langsung: skrip popup didefinisikan setelah ini di halaman, jadi
            // urutan pemuatannya tidak boleh jadi soal.
            svg.addEventListener('click', () => {
                if (current?.detail) {
                    document.dispatchEvent(new CustomEvent('analytics:open-detail', {detail: current.detail}));
                }
            });
        })();
    </script>

    <div class="grid lg:grid-cols-2 gap-4 mt-4">
        {{-- Rincian mengikuti satuan grafik: per jam kalau "Jam" dipilih, dan
             ikut dipisah per peran seperti grafiknya. Dibaca dari $series yang
             sama, jadi tabel dan grafik tidak mungkin berbeda angka. --}}
        <div class="bg-white rounded-2xl border border-line overflow-hidden">
            <div class="px-5 py-4 border-b border-line font-bold text-sm">{{ $show === 'jam' ? 'Per jam' : 'Per hari' }}</div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm whitespace-nowrap">
                    <thead class="text-xs text-sub bg-canvas">
                        <tr>
                            <th class="text-left font-semibold px-5 py-2">{{ $show === 'jam' ? 'Jam' : 'Tanggal' }}</th>
                            @foreach ($roles as $name)
                                <th class="text-right font-semibold px-3 py-2">{{ $name }}</th>
                            @endforeach
                            <th class="text-right font-semibold px-3 py-2">Total</th>
                            <th class="text-right font-semibold px-5 py-2">Perangkat</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Jam urut maju (00→23); hari urut mundur supaya yang
                             terbaru ada di atas, seperti sebelumnya. Ditulis
                             sebagai @php(...) sebaris, bukan blok @php: satu
                             berkas Blade tidak boleh mencampur keduanya kalau
                             yang sebaris muncul lebih dulu — blok raw-nya akan
                             menelan semua yang ada di antaranya. --}}
                        @php($rows = $show === 'jam' ? $series : $series->reverse())
                        @forelse ($rows as $row)
                            <tr class="border-t border-line">
                                <td class="px-5 py-2.5">
                                    @if ($row['total'])
                                        {{-- Baris yang ada kunjungannya bisa dibuka untuk
                                             melihat riwayat aksesnya. Baris kosong tidak
                                             dibuat bisa diklik: tidak ada isinya. --}}
                                        <button type="button"
                                                data-detail="{{ $row['date']
                                                    ? route('admin.analytics.day', ['date' => $row['date']])
                                                    : route('admin.analytics.hour', ['hour' => (int) $row['tick'], 'start' => $start->toDateString(), 'end' => $end->toDateString()]) }}"
                                                class="text-brand font-semibold hover:underline">
                                            {{ $row['label'] }}
                                        </button>
                                    @else
                                        {{ $row['label'] }}
                                    @endif
                                </td>
                                @foreach ($roles as $role => $name)
                                    <td class="px-3 py-2.5 text-right {{ $row['views'][$role] ? 'font-semibold' : 'text-line' }}">
                                        {{ $row['views'][$role] ? number_format($row['views'][$role]) : '–' }}
                                    </td>
                                @endforeach
                                <td class="px-3 py-2.5 text-right {{ $row['total'] ? 'font-semibold' : 'text-line' }}">{{ $row['total'] ? number_format($row['total']) : '–' }}</td>
                                <td class="px-5 py-2.5 text-right {{ $row['visitors'] ? 'text-sub' : 'text-line' }}">{{ $row['visitors'] ? number_format($row['visitors']) : '–' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="{{ count($roles) + 3 }}" class="px-5 py-6 text-sub">Belum ada data kunjungan.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Per halaman --}}
        <div class="bg-white rounded-2xl border border-line overflow-hidden">
            <div class="px-5 py-4 border-b border-line font-bold text-sm">Per halaman (periode terpilih)</div>
            <table class="w-full text-sm">
                <thead class="text-xs text-sub bg-canvas">
                    <tr>
                        <th class="text-left font-semibold px-5 py-2">Halaman</th>
                        <th class="text-right font-semibold px-5 py-2">Kunjungan</th>
                        <th class="text-right font-semibold px-5 py-2">Perangkat</th>
                    </tr>
                </thead>
                <tbody>
                    @php($max = $pages->max('views') ?: 1)
                    @forelse ($pages as $row)
                        <tr class="border-t border-line">
                            <td class="px-5 py-2.5">
                                <div class="font-medium">{{ $row->page }}</div>
                                {{-- Bar proporsional terhadap halaman terpopuler. --}}
                                <div class="mt-1 h-1.5 rounded-full bg-brand-soft overflow-hidden">
                                    <div class="h-full bg-brand" style="width: {{ round($row->views / $max * 100) }}%"></div>
                                </div>
                            </td>
                            <td class="px-5 py-2.5 text-right font-semibold align-top">{{ number_format($row->views) }}</td>
                            <td class="px-5 py-2.5 text-right text-sub align-top">{{ number_format($row->visitors) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-5 py-6 text-sub">Belum ada data kunjungan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Matriks hari × halaman --}}
    @if ($pages->isNotEmpty())
        <div class="bg-white rounded-2xl border border-line overflow-hidden mt-4">
            <div class="px-5 py-4 border-b border-line font-bold text-sm">Rincian hari × halaman</div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm whitespace-nowrap">
                    <thead class="text-xs text-sub bg-canvas">
                        <tr>
                            <th class="text-left font-semibold px-5 py-2 sticky left-0 bg-canvas">Tanggal</th>
                            @foreach ($pages as $p)
                                <th class="text-right font-semibold px-4 py-2">{{ $p->page }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($daily as $row)
                            @php($key = $row->date->toDateString())
                            <tr class="border-t border-line">
                                <td class="px-5 py-2.5 sticky left-0 bg-white">{{ $row->date->format('d M') }}</td>
                                @foreach ($pages as $p)
                                    @php($n = (int) ($matrix[$key][$p->page] ?? 0))
                                    <td class="px-4 py-2.5 text-right {{ $n ? 'font-semibold' : 'text-line' }}">{{ $n ?: '–' }}</td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- Popup rincian tanggal. Isinya diminta ke server saat dibuka, bukan
         dirender ikut halaman: memuat data pribadi, jadi hanya ditarik kalau
         admin memang membukanya. --}}
    <div id="day-modal" hidden>
        <div class="fixed inset-0 z-40 bg-ink/40" data-role="backdrop"></div>
        <div class="fixed inset-0 z-40 grid place-items-center p-4 pointer-events-none">
            <div class="pointer-events-auto w-full max-w-3xl bg-white rounded-2xl border border-line shadow-xl overflow-hidden"
                 role="dialog" aria-modal="true" aria-label="Rincian kunjungan tanggal" data-role="panel">
                <div data-role="body">
                    <div class="px-6 py-10 text-center text-sub text-sm">Memuat…</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (() => {
            const modal = document.getElementById('day-modal');
            const body = modal.querySelector('[data-role="body"]');
            const close = () => {
                modal.hidden = true;
                body.innerHTML = '<div class="px-6 py-10 text-center text-sub text-sm">Memuat…</div>';
            };

            async function open(url) {
                modal.hidden = false;

                try {
                    const res = await fetch(url, {
                        headers: {'X-Requested-With': 'XMLHttpRequest'},
                    });
                    if (!res.ok) throw new Error(res.status);
                    body.innerHTML = await res.text();

                    // Potongan HTML membawa <script> untuk petanya; innerHTML
                    // tidak menjalankannya, jadi tiap script disalin ulang.
                    body.querySelectorAll('script').forEach(old => {
                        const fresh = document.createElement('script');
                        fresh.textContent = old.textContent;
                        old.replaceWith(fresh);
                    });
                } catch {
                    body.innerHTML = '<div class="px-6 py-10 text-center text-sm">'
                        + '<div class="font-semibold">Rincian gagal dimuat.</div>'
                        + '<div class="text-sub mt-1">Coba tutup lalu buka lagi.</div></div>';
                }
            }

            // Delegasi: tombol tanggalnya ada di dalam tabel yang bisa
            // tergambar ulang, dan tombol tutup datang bersama isi popup.
            document.addEventListener('click', e => {
                const trigger = e.target.closest('[data-detail]');
                if (trigger) return open(trigger.dataset.detail);
                if (e.target.closest('#day-modal [data-role="backdrop"], #day-modal [data-role="close"]')) close();
            });
            document.addEventListener('keydown', e => {
                if (e.key === 'Escape' && !modal.hidden) close();
            });
            // Dipancarkan grafik saat salah satu titiknya diklik.
            document.addEventListener('analytics:open-detail', e => open(e.detail));
        })();
    </script>
@endsection