@extends('layouts.app')

@section('title', 'Detail CCTV - ' . $cctv->name)

@section('content')
<div>
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-3xl font-bold">Detail CCTV: {{ $cctv->name }}</h2>
        <a href="{{ route('cctvs.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">
            ← Kembali
        </a>
    </div>

    <!-- Live Stream Section -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">Live Stream</h3>
            <div class="flex gap-2">
                <button onclick="captureSnapshot()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">
                    📸 Ambil Snapshot
                </button>
                <button onclick="toggleStream()" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 text-sm" id="streamToggle">
                    ▶️ Mulai Stream
                </button>
            </div>
        </div>
        <div class="relative bg-black rounded-lg overflow-hidden" style="height: 480px;">
            @if($cctv->rtsp_url || $cctv->stream_url)
                <video id="cctvStream" class="w-full h-full object-contain" controls autoplay muted>
                    <source src="{{ $cctv->stream_url ?? $cctv->rtsp_url }}" type="application/x-mpegURL">
                    Browser Anda tidak mendukung video streaming.
                </video>
                <div id="streamStatus" class="absolute top-4 right-4 bg-black/70 text-white px-3 py-1 rounded text-sm">
                    <span class="w-2 h-2 inline-block bg-red-500 rounded-full animate-pulse mr-2"></span>
                    <span id="statusText">Menghubungkan...</span>
                </div>
            @else
                <div class="flex items-center justify-center h-full text-gray-400">
                    <div class="text-center">
                        <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                        <p class="text-lg">Stream URL belum dikonfigurasi</p>
                        <p class="text-sm mt-2">Hubungi administrator untuk mengatur RTSP/Stream URL</p>
                    </div>
                </div>
            @endif
        </div>
        <div class="mt-4 flex items-center justify-between text-sm text-gray-600">
            <div>
                <span class="font-medium">Status:</span>
                <span id="connectionStatus" class="ml-2">-</span>
            </div>
            <div>
                <span class="font-medium">FPS:</span>
                <span id="fpsCounter" class="ml-2">-</span>
            </div>
            <div>
                <span class="font-medium">Resolusi:</span>
                <span id="resolutionInfo" class="ml-2">-</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-xl font-bold mb-4">Informasi CCTV</h3>
            <dl class="space-y-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Nama</dt>
                    <dd class="text-sm text-gray-900">{{ $cctv->name }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Code</dt>
                    <dd class="text-sm text-gray-900">{{ $cctv->code }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Sumber</dt>
                    <dd class="text-sm text-gray-900">{{ ucfirst($cctv->source) }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="text-sm">
                        <span class="px-2 py-1 text-xs rounded-full 
                            {{ $cctv->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ ucfirst($cctv->status) }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Alamat</dt>
                    <dd class="text-sm text-gray-900">{{ $cctv->address }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Radius Coverage</dt>
                    <dd class="text-sm text-gray-900">{{ $cctv->radius_coverage }} meter</dd>
                </div>
            </dl>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-xl font-bold mb-4">Lokasi</h3>
            <p class="text-sm text-gray-900 mb-2">Koordinat: {{ $cctv->latitude }}, {{ $cctv->longitude }}</p>
            <div id="map" style="height: 300px; width: 100%;"></div>
        </div>
    </div>

    @if($cctv->snapshots->count() > 0)
    <div class="bg-white rounded-lg shadow p-6 mt-6">
        <h3 class="text-xl font-bold mb-4">Snapshots Terbaru</h3>
        <div class="grid grid-cols-4 gap-4">
            @foreach($cctv->snapshots->take(8) as $snapshot)
            <img src="{{ $snapshot->snapshot_url }}" alt="Snapshot" class="w-full h-32 object-cover rounded">
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    // Map initialization
    var map = L.map('map').setView([{{ $cctv->latitude }}, {{ $cctv->longitude }}], 15);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    L.marker([{{ $cctv->latitude }}, {{ $cctv->longitude }}]).addTo(map);

    // CCTV Stream handling
    const video = document.getElementById('cctvStream');
    const streamStatus = document.getElementById('streamStatus');
    const statusText = document.getElementById('statusText');
    const connectionStatus = document.getElementById('connectionStatus');
    const fpsCounter = document.getElementById('fpsCounter');
    const resolutionInfo = document.getElementById('resolutionInfo');
    let streamActive = false;
    let fpsInterval;
    let frameCount = 0;

    @if($cctv->rtsp_url || $cctv->stream_url)
    // Initialize HLS.js for HLS streams
    if (video && Hls.isSupported()) {
        const streamUrl = '{{ $cctv->stream_url ?? $cctv->rtsp_url }}';
        
        if (streamUrl.includes('.m3u8') || streamUrl.includes('hls')) {
            const hls = new Hls({
                enableWorker: true,
                lowLatencyMode: true,
                backBufferLength: 90
            });
            
            hls.loadSource(streamUrl);
            hls.attachMedia(video);
            
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                video.play().catch(e => {
                    console.error('Autoplay prevented:', e);
                    statusText.textContent = 'Klik play untuk memulai';
                });
                updateStatus('connected');
            });
            
            hls.on(Hls.Events.ERROR, function(event, data) {
                if (data.fatal) {
                    switch(data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            updateStatus('network_error');
                            hls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            updateStatus('media_error');
                            hls.recoverMediaError();
                            break;
                        default:
                            updateStatus('error');
                            hls.destroy();
                            break;
                    }
                }
            });
        } else {
            // For RTSP or other protocols, show placeholder
            video.style.display = 'none';
            statusText.textContent = 'RTSP stream memerlukan konversi ke HLS/WebRTC';
            connectionStatus.textContent = 'Tidak didukung langsung di browser';
        }
    } else if (video && video.canPlayType('application/vnd.apple.mpegurl')) {
        // Native HLS support (Safari)
        video.src = '{{ $cctv->stream_url ?? $cctv->rtsp_url }}';
        video.addEventListener('loadedmetadata', function() {
            updateStatus('connected');
        });
    }

    // Video event listeners
    if (video) {
        video.addEventListener('play', function() {
            streamActive = true;
            updateStatus('playing');
            startFPSCounter();
        });

        video.addEventListener('pause', function() {
            streamActive = false;
            updateStatus('paused');
            stopFPSCounter();
        });

        video.addEventListener('waiting', function() {
            updateStatus('buffering');
        });

        video.addEventListener('playing', function() {
            updateStatus('playing');
        });

        video.addEventListener('error', function(e) {
            updateStatus('error');
            console.error('Video error:', e);
        });

        video.addEventListener('loadedmetadata', function() {
            if (video.videoWidth && video.videoHeight) {
                resolutionInfo.textContent = video.videoWidth + 'x' + video.videoHeight;
            }
        });
    }

    function updateStatus(status) {
        const statusMap = {
            'connecting': { text: 'Menghubungkan...', color: 'yellow', conn: 'Menghubungkan' },
            'connected': { text: 'Terhubung', color: 'green', conn: 'Terhubung' },
            'playing': { text: 'Streaming', color: 'green', conn: 'Aktif' },
            'paused': { text: 'Dijeda', color: 'yellow', conn: 'Dijeda' },
            'buffering': { text: 'Buffering...', color: 'yellow', conn: 'Buffering' },
            'network_error': { text: 'Error Jaringan', color: 'red', conn: 'Error' },
            'media_error': { text: 'Error Media', color: 'red', conn: 'Error' },
            'error': { text: 'Error', color: 'red', conn: 'Error' }
        };

        const statusInfo = statusMap[status] || statusMap['error'];
        statusText.textContent = statusInfo.text;
        const indicator = streamStatus.querySelector('span');
        indicator.className = 'w-2 h-2 inline-block rounded-full mr-2 ' + 
            (statusInfo.color === 'green' ? 'bg-green-500' : 
             statusInfo.color === 'yellow' ? 'bg-yellow-500 animate-pulse' : 'bg-red-500');
        connectionStatus.textContent = statusInfo.conn;
    }

    function startFPSCounter() {
        frameCount = 0;
        fpsInterval = setInterval(function() {
            frameCount++;
        }, 1000);
        
        setInterval(function() {
            if (streamActive) {
                fpsCounter.textContent = frameCount + ' fps';
                frameCount = 0;
            }
        }, 1000);
    }

    function stopFPSCounter() {
        if (fpsInterval) {
            clearInterval(fpsInterval);
        }
        fpsCounter.textContent = '-';
    }

    function toggleStream() {
        if (!video) return;
        
        if (video.paused) {
            video.play().then(() => {
                document.getElementById('streamToggle').textContent = '⏸️ Jeda Stream';
            }).catch(e => {
                console.error('Play failed:', e);
                alert('Gagal memulai stream. Pastikan browser mengizinkan autoplay.');
            });
        } else {
            video.pause();
            document.getElementById('streamToggle').textContent = '▶️ Mulai Stream';
        }
    }

    function captureSnapshot() {
        if (!video || video.readyState < 2) {
            alert('Stream belum siap. Tunggu beberapa saat.');
            return;
        }

        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            const formData = new FormData();
            formData.append('snapshot', blob, 'snapshot-' + Date.now() + '.jpg');
            formData.append('_token', '{{ csrf_token() }}');

            fetch('{{ route("cctvs.snapshot", $cctv->id) }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Snapshot berhasil diambil!');
                    // Reload page to show new snapshot
                    setTimeout(() => location.reload(), 1000);
                } else {
                    alert('Gagal mengambil snapshot: ' + (data.message || 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Gagal mengambil snapshot');
            });
        }, 'image/jpeg', 0.9);
    }
    @endif
</script>
@endpush