@extends('layouts.app')
@section('title', 'Mobile Screen Viewer')
@section('content')
<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
            <div class="card p-3">
                <h5>Your ID</h5>
                <div class="mb-3">
                    <input type="text" id="myId" class="form-control form-control-lg text-center" readonly />
                    <small class="text-muted">Share this with the person you want to call</small>
                </div>
                <div id="connectionStatus" class="alert alert-info mb-3">
                    <small>Status: <span id="statusText">Initializing…</span></small>
                </div>
                <div id="incomingCall" class="mb-3 d-none">
                    <div class="alert alert-warning">
                        <p id="callerInfo" class="mb-2 text-wrap"></p>
                        <div class="d-flex gap-2">
                            <button onclick="acceptCall()" class="btn btn-success">Accept</button>
                            <button onclick="declineCall()" class="btn btn-danger">Decline</button>
                        </div>
                    </div>
                </div>
                <div id="inCallControls" class="d-none">
                    <div class="alert alert-success mb-3">
                        <h6 class="alert-heading">In Call</h6>
                        <p class="mb-2">You are now in a call</p>
                        <hr>
                        <button onclick="endCall()" class="btn btn-danger btn-block">
                            End Call
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {{-- Right column: Remote video --}}
        <div class="col-md-8">
            <div class="card p-3">
                <h5>Video</h5>
                <div class="row">
                    <div class="col-12">
                        <video id="remoteVideo" autoplay muted playsinline
                            style="width: 40%; border-radius: 8px;" class="d-none"></video>
                        <div id="noRemote" class="text-center p-5">
                            <h6 class="text-muted mb-1">Waiting for remote…</h6>
                        </div>
                        <p class="text-center small text-muted mt-1 mb-1">Remote Stream</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://js.pusher.com/7.2/pusher.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.3/echo.iife.js"></script>
<script>

    // 1. Generate 6-digit ID and display
    const myId = Math.floor(100000 + Math.random() * 900000);
    document.getElementById('myId').value = myId;

    const basePath = window.location.pathname.split('/public')[0] + '/public';

    // 2. Setup Echo for Laravel WebSockets
    window.Echo = new Echo({
        broadcaster: 'pusher',
        // key: '{{ env('PUSHER_APP_KEY') }}',
        key: 'local',
        // wsHost: window.location.hostname,
        wsHost: '192.168.0.205',
        wsPort: 6001,
        // wssPort: 6001,
        forceTLS: false,
        disableStats: true,
        // encrypted: false,
        enabledTransports: ['ws'],
        // authEndpoint: '/git/VisionEyeStreamingWeb/public/broadcasting/auth',
        authEndpoint: window.location.origin + basePath + '/broadcasting/auth',
    });

    function setStatus(text, type = 'info') {
        document.getElementById('statusText').innerText = text;
        const statusDiv = document.getElementById('connectionStatus');
        statusDiv.className = 'alert alert-' + type + ' mb-3';
    }
    // 3. Listen for call requests

    window.Echo.private('viewer.1234')
        .listen('CallRequested', (e) => {
            alert('CallRequested event received!\nViewer ID: ' + e.viewerId + '\nCaller ID: ' + e.callerId);
        });

    let currentCallerId = null;
    window.Echo.private('viewer.' + myId)
        .listen('CallRequested', (e) => {
            currentCallerId = e.callerId;
            showIncomingCall(e.callerId);
            setStatus('Incoming call...', 'warning');
        });

        // 4. Show Accept/Decline UI
    function showIncomingCall(callerId) {
        document.getElementById('incomingCall').classList.remove('d-none');
        document.getElementById('callerInfo').innerText = 'Incoming call from: ' + callerId;
        setStatus('Incoming call...', 'warning');
    }

     // 5. Accept Call
    function acceptCall() {
        document.getElementById('incomingCall').classList.add('d-none');
        document.getElementById('inCallControls').classList.remove('d-none');
        setStatus('In Call', 'success');

        // fetch('/git/VisionEyeStreamingWeb/public/api/call/accept', {
        fetch('{{ route('api.call.accept') }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                viewer_id: myId, 
                caller_id: currentCallerId,
                app_source: 'web',
                app_version: '1.0.0' 
            })
        });

        // Start WebRTC signaling here
        // startWebRTCSignaling();
    }

    // function startWebRTCSignaling() {
    //     // Create RTCPeerConnection
    //     peerConnection = new RTCPeerConnection();

    //     //  Listen for remote stream
    //     peerConnection.ontrack = (event) => {
    //         remoteVideo.srcObject = event.streams[0];
    //         remoteVideo.classList.remove('d-none');
    //         document.getElementById('noRemote').classList.add('d-none');
    //     };

    //     // Listen for ICE candidates and send to mobile
    //     peerConnection.onicecandidate = (event) => {
    //         if (event.candidate) {
    //             sendSignal('candidate', event.candidate, currentCallerId);
    //         }
    //     };

    //     // Create offer and send to mobile
    //     peerConnection.createOffer()
    //         .then(offer => {
    //             peerConnection.setLocalDescription(offer);
    //             sendSignal('offer', offer, currentCallerId);
    //         });
    // }
    // //get signaling messages from mobile
    // window.Echo.private('screen.' + myId)
    //     .listen('MessageSent', (e) => {
    //         if (e.type === 'answer') {
    //             peerConnection.setRemoteDescription(new RTCSessionDescription(e.payload));
    //         } else if (e.type === 'candidate') {
    //             peerConnection.addIceCandidate(new RTCIceCandidate(e.payload));
    //         }
    //     });

    // // send signaling messages via backend
    // function sendSignal(type, payload, to) {
    //     fetch('/git/VisionEyeStreamingWeb/public/api/signal', {
    //         method: 'POST',
    //         headers: {'Content-Type': 'application/json'},
    //         body: JSON.stringify({
    //             type,
    //             payload,
    //             to,
    //             app_source: 'web',
    //             app_version: '1.0.0'
    //         })
    //     });
    // }

     // 6. Decline Call
    function declineCall() {
        document.getElementById('incomingCall').classList.add('d-none');
        setStatus('Call declined', 'danger');

        // fetch('/git/VisionEyeStreamingWeb/public/api/call/decline', {
        fetch('{{ route('api.call.decline') }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                viewer_id: myId, 
                caller_id: currentCallerId,
                app_source: 'web',
                app_version: '1.0.0'
            })
        });
    }

     // 7. End Call
    function endCall() {
        document.getElementById('inCallControls').classList.add('d-none');
        setStatus('Call ended', 'info');
        // fetch('/git/VisionEyeStreamingWeb/public/api/call/end', {
        fetch('{{ route('api.call.end') }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                viewer_id: myId, 
                caller_id: currentCallerId,
                app_source: 'web',
                app_version: '1.0.0' 
            })
        });
    }
    setStatus('Waiting for call...', 'info');
</script>
@endsection