@extends('layouts.admin.master')

@section('stylesheet')
    <style>
        .cctv-live-shell {
            --cctv-bg: #07111f;
            --cctv-panel: #0c1a2f;
            --cctv-panel-soft: #12243d;
            --cctv-line: rgba(148, 163, 184, 0.28);
            --cctv-text: #e5eefb;
            --cctv-muted: #96a7bf;
            --cctv-blue: #2f80ed;
            --cctv-red: #d22630;
            --cctv-green: #22c55e;
            --cctv-amber: #f59e0b;
            --cctv-cyan: #38bdf8;
            min-height: calc(100vh - 126px);
            margin: -0.25rem -0.25rem 0;
            padding: 1rem;
            color: var(--cctv-text);
            background: var(--cctv-bg);
            overflow: hidden;
            position: relative;
            z-index: 0;
        }

        .cctv-live-shell * {
            letter-spacing: 0;
        }

        .cctv-live-header,
        .cctv-panel,
        .cctv-stat,
        .cctv-mode-btn,
        .cctv-feed-card,
        .cctv-district-btn,
        .cctv-priority-item {
            border: 1px solid var(--cctv-line);
            background: var(--cctv-panel);
            border-radius: 8px;
        }

        .cctv-live-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: center;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .cctv-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #9cc7ff;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .cctv-live-title {
            margin: 0.2rem 0 0;
            color: #ffffff;
            font-size: clamp(1.35rem, 2vw, 2rem);
            font-weight: 800;
        }

        .cctv-live-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .cctv-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-height: 34px;
            padding: 0.42rem 0.7rem;
            color: var(--cctv-text);
            background: var(--cctv-panel-soft);
            border: 1px solid var(--cctv-line);
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .cctv-modebar {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.65rem;
            margin-bottom: 1rem;
        }

        .cctv-mode-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 42px;
            width: 100%;
            color: var(--cctv-text);
            font-weight: 800;
            border-radius: 8px;
            transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
        }

        .cctv-mode-btn:hover,
        .cctv-mode-btn.is-active {
            color: #ffffff;
            border-color: rgba(56, 189, 248, 0.75);
            background: #12305a;
        }

        .cctv-live-grid {
            display: grid;
            grid-template-columns: minmax(280px, 1.05fr) minmax(360px, 1.65fr) minmax(260px, 0.9fr);
            gap: 1rem;
        }

        .cctv-left-stack,
        .cctv-right-stack {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 1rem;
        }

        .cctv-panel {
            min-width: 0;
            overflow: hidden;
        }

        .cctv-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--cctv-line);
        }

        .cctv-panel-title {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            margin: 0;
            color: #ffffff;
            font-size: 0.95rem;
            font-weight: 800;
        }

        .cctv-panel-body {
            padding: 1rem;
        }

        .cctv-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .cctv-stat {
            padding: 0.85rem;
        }

        .cctv-stat-label {
            color: var(--cctv-muted);
            font-size: 0.78rem;
            font-weight: 700;
        }

        .cctv-stat-value {
            margin-top: 0.25rem;
            color: #ffffff;
            font-size: 1.65rem;
            font-weight: 900;
            line-height: 1;
        }

        .cctv-stat--online .cctv-stat-value {
            color: var(--cctv-green);
        }

        .cctv-stat--offline .cctv-stat-value,
        .cctv-stat--critical .cctv-stat-value {
            color: #ff6972;
        }

        .cctv-stat--maintenance .cctv-stat-value {
            color: var(--cctv-amber);
        }

        .cctv-map {
            width: 100%;
            min-height: 390px;
            background: #0a1424;
            position: relative;
            z-index: 0;
        }

        .cctv-live-shell .leaflet-container {
            z-index: 0;
        }

        .cctv-live-shell .leaflet-pane {
            z-index: 1;
        }

        .cctv-live-shell .leaflet-tile-pane {
            z-index: 1;
        }

        .cctv-live-shell .leaflet-overlay-pane {
            z-index: 2;
        }

        .cctv-live-shell .leaflet-marker-pane {
            z-index: 3;
        }

        .cctv-live-shell .leaflet-tooltip-pane,
        .cctv-live-shell .leaflet-popup-pane,
        .cctv-live-shell .leaflet-top,
        .cctv-live-shell .leaflet-bottom {
            z-index: 4;
        }

        .cctv-player {
            display: flex;
            min-height: 440px;
            flex-direction: column;
            background: #050b14;
        }

        .cctv-player-screen {
            position: relative;
            display: flex;
            min-height: 300px;
            flex: 1;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #020617;
        }

        .cctv-player-screen iframe,
        .cctv-player-screen img,
        .cctv-player-screen video {
            width: 100%;
            height: 100%;
            min-height: 300px;
            border: 0;
            object-fit: cover;
        }

        .cctv-player-empty {
            max-width: 380px;
            padding: 1.25rem;
            text-align: center;
            color: var(--cctv-muted);
        }

        .cctv-player-empty i {
            display: block;
            margin-bottom: 0.65rem;
            color: var(--cctv-cyan);
            font-size: 2.4rem;
        }

        .cctv-player-caption {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.75rem;
            align-items: center;
            padding: 0.9rem 1rem;
            border-top: 1px solid var(--cctv-line);
            background: var(--cctv-panel);
        }

        .cctv-camera-name {
            margin: 0;
            color: #ffffff;
            font-size: 1rem;
            font-weight: 900;
        }

        .cctv-camera-location {
            margin-top: 0.2rem;
            color: var(--cctv-muted);
            font-size: 0.82rem;
        }

        .cctv-camera-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .cctv-status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            min-height: 28px;
            padding: 0.28rem 0.55rem;
            color: #ffffff;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 800;
        }

        .cctv-status::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 999px;
            background: currentColor;
        }

        .cctv-status--online {
            color: #baf7cd;
            background: rgba(34, 197, 94, 0.14);
        }

        .cctv-status--offline {
            color: #ffb4b9;
            background: rgba(210, 38, 48, 0.2);
        }

        .cctv-status--maintenance {
            color: #ffd899;
            background: rgba(245, 158, 11, 0.17);
        }

        .cctv-status--nonaktif {
            color: #cbd5e1;
            background: rgba(148, 163, 184, 0.15);
        }

        .cctv-feed-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .cctv-feed-card {
            min-height: 168px;
            padding: 0;
            color: var(--cctv-text);
            overflow: hidden;
            text-align: left;
        }

        .cctv-feed-card.is-active {
            border-color: rgba(56, 189, 248, 0.9);
            box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
        }

        .cctv-feed-thumb {
            display: flex;
            height: 94px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: var(--cctv-muted);
            background: #050b14;
        }

        .cctv-feed-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cctv-feed-thumb i {
            font-size: 1.8rem;
        }

        .cctv-feed-info {
            padding: 0.65rem;
        }

        .cctv-feed-name {
            display: -webkit-box;
            min-height: 2.2rem;
            margin-bottom: 0.45rem;
            overflow: hidden;
            color: #ffffff;
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1.3;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .cctv-feed-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            color: var(--cctv-muted);
            font-size: 0.72rem;
        }

        .cctv-district-list,
        .cctv-priority-list,
        .cctv-incident-flow {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .cctv-district-btn,
        .cctv-priority-item {
            width: 100%;
            padding: 0.7rem;
            color: var(--cctv-text);
            text-align: left;
        }

        .cctv-district-btn.is-active,
        .cctv-priority-item:hover {
            border-color: rgba(56, 189, 248, 0.75);
            background: #12305a;
        }

        .cctv-district-row,
        .cctv-priority-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .cctv-district-name,
        .cctv-priority-name {
            min-width: 0;
            color: #ffffff;
            font-weight: 800;
        }

        .cctv-district-bar {
            height: 0.45rem;
            margin-top: 0.55rem;
            overflow: hidden;
            background: rgba(148, 163, 184, 0.22);
            border-radius: 999px;
        }

        .cctv-district-bar span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--cctv-red), var(--cctv-blue), var(--cctv-green));
            border-radius: inherit;
        }

        .cctv-incident-step {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr);
            gap: 0.65rem;
            align-items: center;
            color: var(--cctv-muted);
        }

        .cctv-incident-step i {
            display: inline-flex;
            width: 38px;
            height: 38px;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: #12305a;
            border-radius: 8px;
            font-size: 1.15rem;
        }

        .cctv-incident-step strong {
            display: block;
            color: #ffffff;
            font-size: 0.84rem;
        }

        .cctv-map-popup {
            min-width: 180px;
        }

        .cctv-map-popup strong {
            display: block;
            color: #0f172a;
            font-size: 0.9rem;
        }

        .cctv-marker {
            display: block;
            width: 18px;
            height: 18px;
            border: 3px solid #ffffff;
            background: #64748b;
            border-radius: 999px;
            box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.35);
        }

        .cctv-marker--online {
            background: var(--cctv-green);
        }

        .cctv-marker--offline {
            background: var(--cctv-red);
        }

        .cctv-marker--maintenance {
            background: var(--cctv-amber);
        }

        .cctv-district-tooltip {
            padding: 0.3rem 0.55rem;
            color: #ffffff;
            background: rgba(7, 17, 31, 0.82);
            border: 1px solid rgba(148, 163, 184, 0.45);
            border-radius: 999px;
            box-shadow: none;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .cctv-district-tooltip::before {
            display: none;
        }

        .cctv-live-shell.is-incident .cctv-live-grid {
            grid-template-columns: minmax(0, 1fr) minmax(360px, 1.2fr);
        }

        .cctv-live-shell.is-incident .cctv-left-stack {
            display: none;
        }

        .cctv-live-shell.is-incident .cctv-player {
            min-height: 620px;
        }

        @media (max-width: 1399.98px) {
            .cctv-live-grid {
                grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.35fr);
            }

            .cctv-right-stack {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .cctv-live-header,
            .cctv-player-caption {
                grid-template-columns: 1fr;
            }

            .cctv-live-meta,
            .cctv-camera-actions {
                justify-content: flex-start;
            }

            .cctv-modebar {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .cctv-live-grid,
            .cctv-live-shell.is-incident .cctv-live-grid {
                grid-template-columns: 1fr;
            }

            .cctv-live-shell.is-incident .cctv-left-stack {
                display: flex;
            }

            .cctv-right-stack {
                display: flex;
            }

            .cctv-feed-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .cctv-live-shell {
                margin: -0.75rem -0.75rem 0;
                padding: 0.75rem;
            }

            .cctv-modebar,
            .cctv-stats,
            .cctv-feed-grid {
                grid-template-columns: 1fr;
            }

            .cctv-map {
                min-height: 320px;
            }

            .cctv-player {
                min-height: 360px;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $summaryCards = [
            ['label' => 'Total Kamera', 'value' => $summary['total'] ?? 0, 'class' => ''],
            ['label' => 'Online', 'value' => $summary['online'] ?? 0, 'class' => 'cctv-stat--online'],
            ['label' => 'Offline', 'value' => $summary['offline'] ?? 0, 'class' => 'cctv-stat--offline'],
            ['label' => 'Maintenance', 'value' => $summary['maintenance'] ?? 0, 'class' => 'cctv-stat--maintenance'],
            ['label' => 'Recording', 'value' => $summary['recording'] ?? 0, 'class' => ''],
            ['label' => 'Perlu Perhatian', 'value' => $summary['critical'] ?? 0, 'class' => 'cctv-stat--critical'],
        ];
    @endphp

    <div class="cctv-live-shell" id="cctvLiveShell">
        <div class="cctv-live-header">
            <div>
                <span class="cctv-kicker"><i class="bx bx-cctv"></i> Command Center Kota Tomohon</span>
                <h3 class="cctv-live-title">Live CCTV Command Center</h3>
            </div>
            <div class="cctv-live-meta">
                <span class="cctv-chip"><i class="bx bx-time-five"></i><span id="cctvClock">--:--:--</span></span>
                <span class="cctv-chip"><i class="bx bx-video"></i>{{ number_format($summary['online'] ?? 0) }} online</span>
                <span class="cctv-chip"><i class="bx bx-map"></i>{{ number_format($summary['total'] ?? 0) }} titik</span>
                <a href="{{ route('admin.smart_city.cctv') }}" class="cctv-chip text-decoration-none">
                    <i class="bx bx-slider-alt"></i>Kelola CCTV
                </a>
            </div>
        </div>

        <div class="cctv-modebar" role="group" aria-label="Mode tampilan CCTV">
            <button type="button" class="cctv-mode-btn is-active" data-mode="city">
                <i class="bx bx-grid-alt"></i> Dashboard Kota
            </button>
            <button type="button" class="cctv-mode-btn" data-mode="district">
                <i class="bx bx-map-pin"></i> Per Kecamatan
            </button>
            <button type="button" class="cctv-mode-btn" data-mode="rotation">
                <i class="bx bx-refresh"></i> Rotasi Prioritas
            </button>
            <button type="button" class="cctv-mode-btn" data-mode="incident">
                <i class="bx bx-fullscreen"></i> Mode Insiden
            </button>
        </div>

        <div class="cctv-live-grid">
            <div class="cctv-left-stack">
                <section class="cctv-panel">
                    <div class="cctv-panel-header">
                        <h5 class="cctv-panel-title"><i class="bx bx-pie-chart-alt-2"></i> Ringkasan Kota</h5>
                    </div>
                    <div class="cctv-panel-body">
                        <div class="cctv-stats">
                            @foreach ($summaryCards as $card)
                                <div class="cctv-stat {{ $card['class'] }}">
                                    <div class="cctv-stat-label">{{ $card['label'] }}</div>
                                    <div class="cctv-stat-value">{{ number_format($card['value']) }}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>

                <section class="cctv-panel">
                    <div class="cctv-panel-header">
                        <h5 class="cctv-panel-title"><i class="bx bx-map-alt"></i> Peta Titik CCTV</h5>
                    </div>
                    <div id="cctvMap" class="cctv-map"></div>
                </section>

                <section class="cctv-panel">
                    <div class="cctv-panel-header">
                        <h5 class="cctv-panel-title"><i class="bx bx-buildings"></i> Kecamatan</h5>
                    </div>
                    <div class="cctv-panel-body">
                        <div class="cctv-district-list" id="cctvDistrictList">
                            <button type="button" class="cctv-district-btn is-active" data-district="all">
                                <div class="cctv-district-row">
                                    <span class="cctv-district-name">Semua Kecamatan</span>
                                    <span>{{ number_format($summary['total'] ?? 0) }}</span>
                                </div>
                                <div class="cctv-district-bar"><span style="width: 100%"></span></div>
                            </button>
                            @foreach ($districtSummary as $district)
                                @php
                                    $total = (int) ($district['total'] ?? 0);
                                    $online = (int) ($district['online'] ?? 0);
                                    $percentage = $total > 0 ? (int) round(($online / $total) * 100) : 0;
                                @endphp
                                <button type="button" class="cctv-district-btn" data-district="{{ $district['name'] }}">
                                    <div class="cctv-district-row">
                                        <span class="cctv-district-name">{{ $district['name'] }}</span>
                                        <span>{{ $online }}/{{ $total }}</span>
                                    </div>
                                    <div class="cctv-district-bar"><span style="width: {{ $percentage }}%"></span></div>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>

            <main class="cctv-panel cctv-player" aria-live="polite">
                <div class="cctv-player-screen" id="cctvPlayerScreen">
                    <div class="cctv-player-empty">
                        <i class="bx bx-video-off"></i>
                        <div>Belum ada kamera aktif yang dipilih.</div>
                    </div>
                </div>
                <div class="cctv-player-caption">
                    <div>
                        <h4 class="cctv-camera-name" id="cctvSelectedName">Pilih kamera</h4>
                        <div class="cctv-camera-location" id="cctvSelectedMeta">Peta dan grid akan mengikuti kamera yang dipilih.</div>
                    </div>
                    <div class="cctv-camera-actions">
                        <span class="cctv-status cctv-status--nonaktif" id="cctvSelectedStatus">-</span>
                        <a href="#" class="btn btn-sm btn-outline-light disabled" id="cctvSelectedDetail">
                            <i class="bx bx-detail"></i> Detail
                        </a>
                    </div>
                </div>
            </main>

            <aside class="cctv-right-stack">
                <section class="cctv-panel">
                    <div class="cctv-panel-header">
                        <h5 class="cctv-panel-title"><i class="bx bx-alarm-exclamation"></i> Prioritas</h5>
                        <span class="cctv-chip">{{ $priorityCameras->count() }}</span>
                    </div>
                    <div class="cctv-panel-body">
                        <div class="cctv-priority-list" id="cctvPriorityList">
                            @forelse ($priorityCameras as $camera)
                                <button type="button" class="cctv-priority-item" data-camera-id="{{ $camera['id'] }}">
                                    <div class="cctv-priority-row">
                                        <span class="cctv-priority-name">{{ $camera['name'] }}</span>
                                        <span class="cctv-status cctv-status--{{ $camera['status'] }}">{{ $camera['status_label'] }}</span>
                                    </div>
                                    <div class="small mt-2 text-white-50">{{ $camera['district'] }} | {{ $camera['location'] }}</div>
                                </button>
                            @empty
                                <div class="text-white-50">Belum ada kamera prioritas.</div>
                            @endforelse
                        </div>
                    </div>
                </section>

                <section class="cctv-panel">
                    <div class="cctv-panel-header">
                        <h5 class="cctv-panel-title"><i class="bx bx-git-branch"></i> Alur Insiden</h5>
                    </div>
                    <div class="cctv-panel-body">
                        <div class="cctv-incident-flow">
                            <div class="cctv-incident-step">
                                <i class="bx bx-siren"></i>
                                <div><strong>Deteksi kejadian</strong><span>Monitor visual dan status kamera.</span></div>
                            </div>
                            <div class="cctv-incident-step">
                                <i class="bx bx-search-alt"></i>
                                <div><strong>Verifikasi visual</strong><span>Pilih feed, cek lokasi, simpan catatan.</span></div>
                            </div>
                            <div class="cctv-incident-step">
                                <i class="bx bx-group"></i>
                                <div><strong>Eskalasi OPD</strong><span>Hubungkan ke OPD atau petugas terkait.</span></div>
                            </div>
                            <div class="cctv-incident-step">
                                <i class="bx bx-clipboard"></i>
                                <div><strong>Dokumentasi</strong><span>Catat kronologi untuk evaluasi.</span></div>
                            </div>
                        </div>
                    </div>
                </section>
            </aside>
        </div>

        <section class="cctv-panel mt-3">
            <div class="cctv-panel-header">
                <h5 class="cctv-panel-title"><i class="bx bx-cctv"></i> Display Kamera</h5>
                <span class="cctv-chip" id="cctvFilterLabel">Semua kamera</span>
            </div>
            <div class="cctv-panel-body">
                <div class="cctv-feed-grid" id="cctvFeedGrid"></div>
            </div>
        </section>
    </div>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const cameraFeed = @json($cameraFeed);
            const priorityCameras = @json($priorityCameras);
            const tomohonCenter = [1.324, 124.838];
            const districtCenters = {
                'Tomohon Selatan': [1.280134, 124.814605],
                'Tomohon Tengah': [1.319545, 124.84756],
                'Tomohon Utara': [1.364548, 124.81736],
                'Tomohon Barat': [1.327416, 124.777536],
                'Tomohon Timur': [1.332283, 124.873899],
                'Belum Terklasifikasi': [1.324, 124.838],
            };
            const districtShapes = {
                'Tomohon Utara': [
                    [1.3416903, 124.7860994],
                    [1.3385968, 124.7879896],
                    [1.3279484, 124.7944996],
                    [1.3239624, 124.7959323],
                    [1.3258286, 124.8065522],
                    [1.325741, 124.811625],
                    [1.3279165, 124.8204519],
                    [1.3304371, 124.826836],
                    [1.3327789, 124.8328766],
                    [1.3378428, 124.8387224],
                    [1.3416563, 124.8460343],
                    [1.3481627, 124.8545773],
                    [1.3521015, 124.8638164],
                    [1.3633923, 124.8572949],
                    [1.3748959, 124.8475942],
                    [1.3871781, 124.842437],
                    [1.4045683, 124.8380392],
                    [1.4044428, 124.832256],
                    [1.4001585, 124.8049967],
                    [1.3978603, 124.7909842],
                    [1.3924741, 124.7842534],
                    [1.3871128, 124.7781777],
                    [1.374764, 124.7754346],
                    [1.3621289, 124.770903],
                ],
                'Tomohon Tengah': [
                    [1.3197374, 124.8229921],
                    [1.3145977, 124.8246534],
                    [1.3062457, 124.8288778],
                    [1.3044673, 124.829972],
                    [1.3122385, 124.8413951],
                    [1.3053563, 124.8435299],
                    [1.2872241, 124.8523881],
                    [1.2884657, 124.8575287],
                    [1.2940974, 124.8646062],
                    [1.2987136, 124.8686554],
                    [1.3104716, 124.8734571],
                    [1.3129578, 124.8746353],
                    [1.3201152, 124.8444787],
                    [1.3435057, 124.867443],
                    [1.3510726, 124.8626749],
                    [1.3520071, 124.8621573],
                    [1.3457773, 124.8501337],
                    [1.3402429, 124.8436025],
                    [1.3378428, 124.8387224],
                    [1.3329136, 124.8308556],
                    [1.3307477, 124.8252085],
                    [1.3279336, 124.8204865],
                    [1.3260941, 124.8206731],
                ],
                'Tomohon Timur': [
                    [1.3250181, 124.8385578],
                    [1.3213753, 124.8383001],
                    [1.3179927, 124.8446085],
                    [1.3154595, 124.8470222],
                    [1.312002, 124.8530043],
                    [1.3077315, 124.8567987],
                    [1.3093382, 124.8596294],
                    [1.3100789, 124.862881],
                    [1.3128669, 124.8710078],
                    [1.3129578, 124.8746353],
                    [1.3207247, 124.8759426],
                    [1.3284962, 124.8792659],
                    [1.3397197, 124.9002001],
                    [1.3486284, 124.9094972],
                    [1.3562844, 124.8911617],
                    [1.3568336, 124.8842398],
                    [1.3520702, 124.8706211],
                    [1.3521015, 124.8638164],
                    [1.3338134, 124.8576197],
                    [1.333353, 124.8553699],
                    [1.3336623, 124.8530523],
                    [1.3326558, 124.8516651],
                    [1.3313304, 124.849733],
                    [1.3290188, 124.8474654],
                ],
                'Tomohon Barat': [
                    [1.3124612, 124.7313468],
                    [1.3075255, 124.7339144],
                    [1.3000815, 124.744247],
                    [1.29303, 124.7514773],
                    [1.2931028, 124.7623887],
                    [1.2963419, 124.7762434],
                    [1.2961171, 124.778944],
                    [1.3022415, 124.793624],
                    [1.3033, 124.8008704],
                    [1.3102828, 124.8093906],
                    [1.318528, 124.8238338],
                    [1.3193112, 124.8237263],
                    [1.3273387, 124.8051586],
                    [1.3304023, 124.7929968],
                    [1.3355139, 124.7898734],
                    [1.3416903, 124.7860994],
                    [1.3588971, 124.7780578],
                    [1.3621289, 124.770903],
                    [1.3546617, 124.7647495],
                    [1.3493361, 124.7600063],
                    [1.3371755, 124.7471879],
                    [1.3314677, 124.7379195],
                    [1.3261475, 124.7335061],
                ],
                'Tomohon Selatan': [
                    [1.290349, 124.7702474],
                    [1.283377, 124.7857055],
                    [1.2723976, 124.7977729],
                    [1.2696373, 124.8003784],
                    [1.2682568, 124.8061605],
                    [1.2425847, 124.8189618],
                    [1.2425427, 124.8197048],
                    [1.2600203, 124.8327947],
                    [1.2640509, 124.8473341],
                    [1.2648686, 124.848555],
                    [1.2819285, 124.8549723],
                    [1.2893042, 124.8589621],
                    [1.2927345, 124.8497277],
                    [1.3013055, 124.8471409],
                    [1.3136926, 124.8408863],
                    [1.3151921, 124.8399818],
                    [1.3146096, 124.8259947],
                    [1.3177246, 124.8236214],
                    [1.3150851, 124.8188817],
                    [1.3118841, 124.8121619],
                    [1.3080952, 124.8049505],
                    [1.3055994, 124.8002741],
                    [1.3022415, 124.793624],
                    [1.2924896, 124.77222],
                ],
            };
            const fallbackOffsets = [
                [0, 0],
                [0.006, 0.006],
                [-0.006, 0.006],
                [0.006, -0.006],
                [-0.006, -0.006],
                [0.011, 0],
                [0, 0.011],
                [-0.011, 0],
                [0, -0.011],
            ];
            const shell = document.getElementById('cctvLiveShell');
            const mapElement = document.getElementById('cctvMap');
            const feedGrid = document.getElementById('cctvFeedGrid');
            const playerScreen = document.getElementById('cctvPlayerScreen');
            const selectedName = document.getElementById('cctvSelectedName');
            const selectedMeta = document.getElementById('cctvSelectedMeta');
            const selectedStatus = document.getElementById('cctvSelectedStatus');
            const selectedDetail = document.getElementById('cctvSelectedDetail');
            const filterLabel = document.getElementById('cctvFilterLabel');
            const clock = document.getElementById('cctvClock');
            const markers = new Map();
            let map = null;
            let districtLayer = null;
            let markerLayer = null;
            let activeCameraId = null;
            let activeDistrict = 'all';
            let rotationTimer = null;
            let rotationIndex = 0;

            const escapeHtml = (value) => String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');

            const hasRawCoordinates = (camera) => camera
                && camera.latitude !== null
                && camera.longitude !== null
                && camera.latitude !== ''
                && camera.longitude !== ''
                && Number.isFinite(Number(camera.latitude))
                && Number.isFinite(Number(camera.longitude));
            const resolveCameraLatLng = (camera, index) => {
                if (hasRawCoordinates(camera)) {
                    return [Number(camera.latitude), Number(camera.longitude), false];
                }

                const center = districtCenters[camera.district] ?? tomohonCenter;
                const offset = fallbackOffsets[index % fallbackOffsets.length];

                return [
                    Number((center[0] + offset[0]).toFixed(6)),
                    Number((center[1] + offset[1]).toFixed(6)),
                    true,
                ];
            };
            const cameras = cameraFeed.map((camera, index) => {
                const [mapLatitude, mapLongitude, estimatedLocation] = resolveCameraLatLng(camera, index);

                return {
                    ...camera,
                    map_latitude: mapLatitude,
                    map_longitude: mapLongitude,
                    estimated_location: estimatedLocation,
                };
            });
            activeCameraId = cameras[0]?.id ?? null;
            const statusClass = (status) => `cctv-status cctv-status--${status || 'nonaktif'}`;
            const hasCoordinates = (camera) => camera
                && camera.map_latitude !== null
                && camera.map_longitude !== null
                && camera.map_latitude !== ''
                && camera.map_longitude !== ''
                && Number.isFinite(Number(camera.map_latitude))
                && Number.isFinite(Number(camera.map_longitude));
            const cameraLatLng = (camera) => [Number(camera.map_latitude), Number(camera.map_longitude)];
            const filteredCameras = () => activeDistrict === 'all'
                ? cameras
                : cameras.filter((camera) => camera.district === activeDistrict);

            function updateClock() {
                clock.textContent = new Intl.DateTimeFormat('id-ID', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                    timeZone: 'Asia/Makassar',
                }).format(new Date());
            }

            function initMap() {
                if (!window.L || !mapElement) {
                    return;
                }

                map = L.map(mapElement, {
                    zoomControl: true,
                    attributionControl: false,
                }).setView(tomohonCenter, 12);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                }).addTo(map);

                renderDistrictShapes();
                markerLayer = L.layerGroup().addTo(map);
                renderMarkers();
            }

            function buildDistrictFeatures() {
                return Object.entries(districtShapes).map(([name, coordinates]) => ({
                    type: 'Feature',
                    properties: { name },
                    geometry: {
                        type: 'Polygon',
                        coordinates: [coordinates.map(([lat, lng]) => [lng, lat])],
                    },
                }));
            }

            function renderDistrictShapes() {
                if (!map) {
                    return;
                }

                if (districtLayer) {
                    districtLayer.remove();
                }

                districtLayer = L.geoJSON({
                    type: 'FeatureCollection',
                    features: buildDistrictFeatures(),
                }, {
                    style: (feature) => {
                        const isActive = activeDistrict === 'all' || activeDistrict === feature.properties.name;

                        return {
                            color: isActive ? '#38bdf8' : '#64748b',
                            fillColor: isActive ? '#2f80ed' : '#475569',
                            fillOpacity: isActive ? 0.16 : 0.06,
                            opacity: isActive ? 0.95 : 0.45,
                            weight: isActive ? 2 : 1,
                        };
                    },
                    onEachFeature: (feature, layer) => {
                        layer.bindTooltip(feature.properties.name, {
                            permanent: true,
                            direction: 'center',
                            className: 'cctv-district-tooltip',
                        });
                    },
                }).addTo(map);
            }

            function districtBounds() {
                const districts = activeDistrict === 'all'
                    ? Object.keys(districtShapes)
                    : [activeDistrict];
                const points = districts
                    .flatMap((district) => districtShapes[district] ?? [])
                    .map(([lat, lng]) => L.latLng(lat, lng));

                return points.length ? L.latLngBounds(points) : null;
            }

            function markerIcon(status) {
                return L.divIcon({
                    className: '',
                    html: `<span class="cctv-marker cctv-marker--${escapeHtml(status || 'nonaktif')}"></span>`,
                    iconSize: [18, 18],
                    iconAnchor: [9, 9],
                });
            }

            function renderMarkers() {
                if (!map || !markerLayer) {
                    return;
                }

                markerLayer.clearLayers();
                markers.clear();

                const bounds = [];
                filteredCameras().filter(hasCoordinates).forEach((camera) => {
                    const latLng = cameraLatLng(camera);
                    const marker = L.marker(latLng, { icon: markerIcon(camera.status) })
                        .bindPopup(`
                            <div class="cctv-map-popup">
                                <strong>${escapeHtml(camera.name)}</strong>
                                <span>${escapeHtml(camera.location)}</span><br>
                                <span>${escapeHtml(camera.status_label)} | ${escapeHtml(camera.district)}</span>
                                ${camera.estimated_location ? '<br><span>Estimasi titik area</span>' : ''}
                            </div>
                        `)
                        .on('click', () => selectCamera(camera.id, true));

                    marker.addTo(markerLayer);
                    markers.set(camera.id, marker);
                    bounds.push(latLng);
                });

                if (bounds.length > 1) {
                    map.fitBounds(bounds, { padding: [32, 32], maxZoom: 15 });
                } else if (bounds.length === 1) {
                    map.setView(bounds[0], 15);
                } else if (districtBounds()?.isValid()) {
                    map.fitBounds(districtBounds(), { padding: [24, 24], maxZoom: 13 });
                } else {
                    map.setView(tomohonCenter, 12);
                }
            }

            function renderFeeds() {
                const list = filteredCameras();

                if (!list.length) {
                    feedGrid.innerHTML = '<div class="text-white-50">Belum ada kamera pada filter ini.</div>';
                    return;
                }

                feedGrid.innerHTML = list.map((camera) => {
                    const thumb = camera.snapshot_url
                        ? `<img src="${escapeHtml(camera.snapshot_url)}" alt="${escapeHtml(camera.name)}">`
                        : '<i class="bx bx-video"></i>';

                    return `
                        <button type="button" class="cctv-feed-card ${camera.id === activeCameraId ? 'is-active' : ''}" data-camera-id="${camera.id}">
                            <div class="cctv-feed-thumb">${thumb}</div>
                            <div class="cctv-feed-info">
                                <div class="cctv-feed-name">${escapeHtml(camera.name)}</div>
                                <div class="cctv-feed-meta">
                                    <span>${escapeHtml(camera.district)}</span>
                                    <span class="${statusClass(camera.status)}">${escapeHtml(camera.status_label)}</span>
                                </div>
                            </div>
                        </button>
                    `;
                }).join('');

                feedGrid.querySelectorAll('[data-camera-id]').forEach((button) => {
                    button.addEventListener('click', () => selectCamera(Number(button.dataset.cameraId), true));
                });
            }

            function canUseAsVideo(url) {
                return /^https?:\/\//i.test(String(url ?? ''));
            }

            function renderPlayer(camera) {
                if (!camera) {
                    playerScreen.innerHTML = `
                        <div class="cctv-player-empty">
                            <i class="bx bx-video-off"></i>
                            <div>Belum ada kamera aktif yang dipilih.</div>
                        </div>
                    `;
                    selectedName.textContent = 'Pilih kamera';
                    selectedMeta.textContent = 'Peta dan grid akan mengikuti kamera yang dipilih.';
                    selectedStatus.className = statusClass('nonaktif');
                    selectedStatus.textContent = '-';
                    selectedDetail.href = '#';
                    selectedDetail.classList.add('disabled');
                    return;
                }

                if (camera.public_embed_url) {
                    playerScreen.innerHTML = '';
                    const frame = document.createElement('iframe');
                    frame.src = camera.public_embed_url;
                    frame.title = camera.name;
                    frame.loading = 'lazy';
                    frame.allow = 'autoplay; fullscreen; encrypted-media; picture-in-picture';
                    playerScreen.appendChild(frame);
                } else if (canUseAsVideo(camera.stream_url) && !String(camera.stream_url).toLowerCase().startsWith('rtsp://')) {
                    playerScreen.innerHTML = '';
                    const video = document.createElement('video');
                    video.src = camera.stream_url;
                    video.controls = true;
                    video.autoplay = true;
                    video.muted = true;
                    video.playsInline = true;
                    playerScreen.appendChild(video);
                } else if (camera.snapshot_url) {
                    playerScreen.innerHTML = '';
                    const image = document.createElement('img');
                    image.src = camera.snapshot_url;
                    image.alt = camera.name;
                    playerScreen.appendChild(image);
                } else {
                    playerScreen.innerHTML = `
                        <div class="cctv-player-empty">
                            <i class="bx bx-video-off"></i>
                            <div>Feed live belum tersedia untuk kamera ini.</div>
                            <div class="small mt-2">${escapeHtml(camera.protocol)} | ${escapeHtml(camera.code)}</div>
                        </div>
                    `;
                }

                selectedName.textContent = camera.name;
                selectedMeta.textContent = `${camera.location} | ${camera.district} | ${camera.organization}`;
                selectedStatus.className = statusClass(camera.status);
                selectedStatus.textContent = camera.status_label;
                selectedDetail.href = camera.detail_url;
                selectedDetail.classList.remove('disabled');
            }

            function selectCamera(cameraId, panMap = false) {
                const parsedCameraId = cameraId === null || cameraId === undefined ? null : Number(cameraId);
                activeCameraId = Number.isFinite(parsedCameraId) ? parsedCameraId : null;
                const camera = activeCameraId === null
                    ? null
                    : cameras.find((item) => Number(item.id) === activeCameraId) ?? null;

                renderPlayer(camera);
                renderFeeds();

                if (panMap && camera && hasCoordinates(camera) && map) {
                    const latLng = cameraLatLng(camera);
                    map.setView(latLng, Math.max(map.getZoom(), 15));
                    markers.get(camera.id)?.openPopup();
                }
            }

            function setDistrict(district) {
                activeDistrict = district;
                filterLabel.textContent = district === 'all' ? 'Semua kamera' : district;

                document.querySelectorAll('.cctv-district-btn').forEach((button) => {
                    button.classList.toggle('is-active', button.dataset.district === district);
                });

                renderDistrictShapes();
                renderMarkers();
                renderFeeds();

                const currentInFilter = filteredCameras().some((camera) => Number(camera.id) === Number(activeCameraId));
                if (!currentInFilter) {
                    selectCamera(filteredCameras()[0]?.id ?? null);
                }
            }

            function stopRotation() {
                if (rotationTimer) {
                    clearInterval(rotationTimer);
                    rotationTimer = null;
                }
            }

            function startRotation() {
                const rotationList = (priorityCameras.length ? priorityCameras : cameras).map((camera) => camera.id);
                if (!rotationList.length) {
                    return;
                }

                stopRotation();
                rotationIndex = 0;
                selectCamera(rotationList[rotationIndex], true);
                rotationTimer = setInterval(() => {
                    rotationIndex = (rotationIndex + 1) % rotationList.length;
                    selectCamera(rotationList[rotationIndex], true);
                }, 7000);
            }

            function setMode(mode) {
                document.querySelectorAll('.cctv-mode-btn').forEach((button) => {
                    button.classList.toggle('is-active', button.dataset.mode === mode);
                });

                shell.classList.toggle('is-incident', mode === 'incident');

                if (mode !== 'rotation') {
                    stopRotation();
                }

                if (mode === 'city') {
                    setDistrict('all');
                }

                if (mode === 'rotation') {
                    startRotation();
                }

                if (mode === 'incident') {
                    setTimeout(() => map?.invalidateSize(), 250);
                    const fullscreenRequest = shell.requestFullscreen?.();
                    if (fullscreenRequest?.catch) {
                        fullscreenRequest.catch(() => {});
                    }
                }

                setTimeout(() => map?.invalidateSize(), 250);
            }

            document.querySelectorAll('.cctv-mode-btn').forEach((button) => {
                button.addEventListener('click', () => setMode(button.dataset.mode));
            });

            document.querySelectorAll('.cctv-district-btn').forEach((button) => {
                button.addEventListener('click', () => {
                    setMode('district');
                    setDistrict(button.dataset.district);
                });
            });

            document.querySelectorAll('.cctv-priority-item').forEach((button) => {
                button.addEventListener('click', () => selectCamera(Number(button.dataset.cameraId), true));
            });

            updateClock();
            setInterval(updateClock, 1000);
            initMap();
            renderFeeds();
            selectCamera(activeCameraId);
        });
    </script>
@endsection