@extends('layouts.app')

@section('title', 'Live Camera')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-white">Live Camera Dashboard</h1>
            <p class="text-sm text-gray-400 mt-1">Monitor streaming video dari petugas lapangan</p>
        </div>
        <div class="flex items-center gap-3">
            <select id="grid-layout" class="px-3 py-2 bg-white/5 border border-white/10 rounded-md text-sm text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="1">1 Kamera</option>
                <option value="4" selected>4 Kamera</option>
                <option value="9">9 Kamera</option>
                <option value="16">16 Kamera</option>
            </select>
            <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
            </span>
        </div>
    </div>

    <!-- Camera Grid -->
    <div id="camera-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
        <!-- Camera streams will be loaded here -->
        <div class="col-span-full text-center py-12 text-gray-500">
            <i data-lucide="video-off" class="w-12 h-12 mx-auto mb-3 text-gray-600"></i>
            <p class="text-sm">Memuat stream kamera...</p>
        </div>
    </div>
</div>

<!-- Fullscreen Modal -->
<div id="fullscreen-modal" class="hidden fixed inset-0 z-50 bg-black" aria-labelledby="fullscreen-title" role="dialog" aria-modal="true">
    <div class="flex flex-col h-full">
        <div class="flex items-center justify-between px-6 py-4 border-b border-white/10">
            <h3 class="text-lg font-semibold text-white" id="fullscreen-title">Live Camera</h3>
            <button onclick="closeFullscreen()" class="text-gray-400 hover:text-white">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <div class="flex-1 flex items-center justify-center p-4">
            <video id="fullscreen-video" autoplay muted class="w-full h-full object-contain"></video>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let streams = [];
let gridLayout = 4;

// Load active streams
loadStreams();

// Listen for new streams
@if(config('broadcasting.default') === 'pusher' && config('broadcasting.connections.pusher.key'))
Echo.channel('streams')
    .listen('.stream.started', (e) => {
        addStream(e.stream);
    })
    .listen('.stream.stopped', (e) => {
        removeStream(e.stream_id);
    });
@endif

function loadStreams() {
    fetch('/api/streams?status=active')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                streams = data.data || [];
                renderStreams();
            }
        })
        .catch(error => {
            console.error('Error loading streams:', error);
            document.getElementById('camera-grid').innerHTML = `
                <div class="col-span-full text-center py-12 text-gray-500">
                    <i data-lucide="alert-circle" class="w-12 h-12 mx-auto mb-3 text-gray-600"></i>
                    <p class="text-sm">Gagal memuat stream</p>
                </div>
            `;
            if (window.lucide) lucide.createIcons();
        });
}

function renderStreams() {
    const grid = document.getElementById('camera-grid');
    const cols = Math.sqrt(gridLayout);
    
    // Set grid columns
    if (gridLayout === 1) {
        grid.className = 'grid grid-cols-1 gap-4';
    } else if (gridLayout === 4) {
        grid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
    } else if (gridLayout === 9) {
        grid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4';
    } else {
        grid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4';
    }
    
    grid.innerHTML = '';

    if (streams.length === 0) {
        grid.innerHTML = `
            <div class="col-span-full text-center py-12 text-gray-500">
                <i data-lucide="video-off" class="w-12 h-12 mx-auto mb-3 text-gray-600"></i>
                <p class="text-sm">Tidak ada stream aktif</p>
            </div>
        `;
        if (window.lucide) lucide.createIcons();
        return;
    }

    streams.slice(0, gridLayout).forEach(stream => {
        const streamCard = document.createElement('div');
        streamCard.className = 'glass-panel rounded-lg border border-white/5 overflow-hidden hover:border-white/20 transition';
        streamCard.innerHTML = `
            <div class="p-3 border-b border-white/10 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i data-lucide="user" class="w-4 h-4 text-gray-400"></i>
                    <span class="text-sm font-medium text-white">${stream.officer?.name || 'Unknown'}</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="px-2 py-1 text-xs font-medium rounded-full ${stream.is_recording ? 'bg-red-500/20 text-red-400 border border-red-500/30' : 'bg-green-500/20 text-green-400 border border-green-500/30'}">
                        ${stream.is_recording ? 'Recording' : 'Live'}
                    </span>
                </div>
            </div>
            <div class="relative bg-black aspect-video cursor-pointer group" onclick="openFullscreen(${stream.id})">
                <video 
                    id="stream-${stream.id}" 
                    autoplay 
                    muted 
                    class="w-full h-full object-cover"
                ></video>
                <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                    <i data-lucide="maximize" class="w-8 h-8 text-white"></i>
                </div>
                <div class="absolute bottom-2 right-2 flex items-center gap-2">
                    <div class="px-2 py-1 bg-black/70 rounded text-xs text-white">
                        <i data-lucide="signal" class="w-3 h-3 inline"></i>
                        ${stream.quality_metrics?.bitrate ? (stream.quality_metrics.bitrate / 1000).toFixed(0) + ' kbps' : 'N/A'}
                    </div>
                </div>
            </div>
        `;
        grid.appendChild(streamCard);
        
        // Initialize WebRTC stream
        initStream(stream);
    });

    if (window.lucide) lucide.createIcons();
}

function initStream(stream) {
    // WebRTC initialization code here
    // This would connect to the media server and display the stream
    console.log('Initializing stream:', stream.id);
    
    // Placeholder: In production, this would initialize WebRTC connection
    const videoElement = document.getElementById(`stream-${stream.id}`);
    if (videoElement && stream.stream_url) {
        videoElement.src = stream.stream_url;
    }
}

function openFullscreen(streamId) {
    const stream = streams.find(s => s.id === streamId);
    if (stream) {
        document.getElementById('fullscreen-title').textContent = stream.officer?.name || 'Live Camera';
        const modal = document.getElementById('fullscreen-modal');
        const fullscreenVideo = document.getElementById('fullscreen-video');
        const sourceVideo = document.getElementById(`stream-${streamId}`);
        
        if (sourceVideo) {
            fullscreenVideo.src = sourceVideo.src;
            fullscreenVideo.currentTime = sourceVideo.currentTime;
        }
        
        modal.classList.remove('hidden');
        if (window.lucide) lucide.createIcons();
    }
}

function closeFullscreen() {
    document.getElementById('fullscreen-modal').classList.add('hidden');
    const fullscreenVideo = document.getElementById('fullscreen-video');
    fullscreenVideo.src = '';
}

function addStream(newStream) {
    if (!streams.find(s => s.id === newStream.id)) {
        streams.push(newStream);
        renderStreams();
    }
}

function removeStream(streamId) {
    streams = streams.filter(s => s.id !== streamId);
    renderStreams();
}

document.getElementById('grid-layout').addEventListener('change', (e) => {
    gridLayout = parseInt(e.target.value);
    renderStreams();
});

// Auto-refresh every 10 seconds
setInterval(loadStreams, 10000);

// Initialize icons
if (window.lucide) {
    lucide.createIcons();
}
</script>
@endpush