@extends('layouts.app')

@section('title', 'Viewer')

@section('content')
<style>
    #incomingCall {
        position: relative;
        z-index: 1000;
    }

    #incomingCall .alert {
        margin-bottom: 0;
    }

    #callerInfo {
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .btn-success,
    .btn-danger {
        min-width: 100px;
    }
</style>
    <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>

                    {{-- <h5>Call Someone</h5>
                    <div class="input-group mb-3">
                        <input type="text" id="remoteIdInput" class="form-control" placeholder="Enter remote ID" />
                        <button id="callBtn" class="btn btn-primary">Call</button>
                    </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: local and remote video --}}
            <div class="col-md-8">
                <div class="card p-3">
                    <h5>Video</h5>
                    {{-- <div class="alert alert-info mb-3">
                        <h6>Screen Sharing Instructions:</h6>
                        <ul class="mb-0">
                            <li>This feature works on Android devices using Chrome browser</li>
                            <li>iOS devices are not supported</li>
                            <li>When prompted, tap "Start now" to begin sharing</li>
                            <li>To stop sharing, pull down the notification shade and tap "Stop sharing"</li>
                        </ul>
                    </div> --}}
                    <div class="row">
                        {{-- <div class="col-6">
                            <video id="localVideo" autoplay muted playsinline 
                            style="width: 100%; border: 1px solid #ccc; border-radius: 8px;"></video>
                                <p class="text-center small text-muted mt-1">Your Camera</p>
                            </div> --}}
                        <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://cdn.socket.io/4.7.2/socket.io.min.js"></script>

    <script>
        // STUN Configuration
        let socket;
        let peerConnection;
        let localStream;
        let myId = null;
        let currentRemoteId = null;
        let isCaller = false;

        // Use public Google STUN servers
        const servers = {
            iceServers: [{
                urls: [
                    "stun:stun.l.google.com:19302",
                    "stun:stun1.l.google.com:19302",
                    "stun:stun2.l.google.com:19302",
                    "stun:stun3.l.google.com:19302"
                ]
            }],
            iceCandidatePoolSize: 10,
            bundlePolicy: 'max-bundle',
            rtcpMuxPolicy: 'require'
        };

        // UI Helpers
        function updateStatus(msg, type = 'info') {
            const statusText = document.getElementById('statusText');
            const statusContainer = document.getElementById('connectionStatus');
            statusText.textContent = msg;
            statusContainer.className = `alert alert-${type} mb-3`;
            console.log(`[Status] ${msg}`);
        }

        function showIncomingCall(callerId) {
            const incomingCallDiv = document.getElementById('incomingCall');
            const callerInfo = document.getElementById('callerInfo');

            callerInfo.textContent = `Incoming call from ID: ${callerId}`;

            incomingCallDiv.style.display = 'block';
            incomingCallDiv.classList.remove('d-none');

            // Update status
            updateStatus('Incoming call…', 'warning');

            // Optional: Add a ring sound
            // playRingSound();
        }

        function hideIncomingCall() {
            const incomingCallDiv = document.getElementById('incomingCall');
            incomingCallDiv.style.display = 'none';
            incomingCallDiv.classList.add('d-none');
        }

        function showInCallControls() {
            document.getElementById('inCallControls').classList.remove('d-none');
        }

        function hideInCallControls() {
            document.getElementById('inCallControls').classList.add('d-none');
        }

        function showRemoteVideo(show = true) {
            const rv = document.getElementById('remoteVideo');
            const noRem = document.getElementById('noRemote');
            if (show) {
                rv.classList.remove('d-none');
                noRem.classList.add('d-none');
            } else {
                rv.classList.add('d-none');
                noRem.classList.remove('d-none');
            }
        }

        function generateRandomId() {
            return Math.floor(100000 + Math.random() * 900000).toString();
        }

        // to check device compatibility
        function checkDeviceCompatibility() {
            const isAndroid = /Android/i.test(navigator.userAgent);
            const isChrome = /Chrome/i.test(navigator.userAgent);
            const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

            if (isIOS) {
                updateStatus('Screen sharing is not supported on iOS devices', 'danger');
                return false;
            }

            if (!isAndroid) {
                updateStatus('Please use an Android device for screen sharing', 'warning');
                return false;
            }

            if (!isChrome) {
                updateStatus('Please use Chrome browser for screen sharing', 'warning');
                return false;
            }

            return true;
        }

        // Initialize On Page Load 
        async function initialize() {
            updateStatus('Initializing…');
            myId = generateRandomId();
            document.getElementById('myId').value = myId;

            updateStatus('Connecting to signaling server…');
            socket = io("ws://103.68.95.166:5000", {
                query: {
                    callerId: myId
                },
                reconnection: true,
                reconnectionAttempts: 5,
                reconnectionDelay: 1000,
                timeout: 10000
            });
            setupSocketListeners();

            // Call this before initializing screen share
            if (!checkDeviceCompatibility()) {
                // Show appropriate message to user
                return;
            }

            // Initialize screen sharing instead of camera
            try {
                await initializeScreenShare();
            } catch (e) {
                console.error('Failed to initialize screen sharing:', e);
                addRetryButton('Retry Screen Sharing');
            }
        }

        async function initializeScreenShare() {
            try {
                // Check if running on mobile
                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator
                    .userAgent);

                if (!isMobile) {
                    alert('Please access this from a mobile device to share screen');
                    return;
                }

                // Check screen sharing is supported
                if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
                    alert('Screen sharing is not supported on your device/browser.\nPlease use Chrome on Android.');
                    return;
                }

                localStream = await navigator.mediaDevices.getDisplayMedia({
                    video: {
                        displaySurface: 'monitor', // or 'window', 'application', 'browser'
                        logicalSurface: true,
                        cursor: 'never',
                        frameRate: {
                            ideal: 30
                        },
                    },
                    audio: false
                });

                // screen preview
                document.getElementById('localVideo').srcObject = localStream;
                console.log('[Media] Successfully initialized screen sharing');
                updateStatus('Screen sharing started', 'success');

                // when user stops screen sharing
                localStream.getVideoTracks()[0].addEventListener('ended', () => {
                    console.log('[Media] Screen sharing stopped by user');
                    updateStatus('Screen sharing stopped', 'warning');
                    endCall();
                });

            } catch (err) {
                console.error('[Media] Screen sharing error:', err);

                if (err.name === 'NotAllowedError') {
                    updateStatus('Screen sharing permission denied', 'danger');
                    alert('Please allow screen sharing when prompted');
                } else if (err.name === 'NotSupportedError') {
                    updateStatus('Screen sharing not supported on this device/browser', 'danger');
                    alert('Screen sharing is only supported on Android devices using Chrome browser');
                } else {
                    updateStatus('Screen sharing failed: ' + err.message, 'danger');
                }
            }
        }

        // WebSocket (Socket.IO) Listeners
        function setupSocketListeners() {
            socket.on('connect', () => {
                console.log('[Socket] Connected as:', socket.id);
                updateStatus('Connected to server', 'success');
            });

            socket.on('connect_error', (err) => {
                console.error('[Socket] Connection error:', err);
                updateStatus('Connection error: ' + err.message, 'danger');
            });

            // 1) When this client receives an incoming call (“newCall”)
            socket.on('newCall', async (data) => {
                const {
                    callerId,
                    sdpOffer
                } = data;
                console.log('[Socket] Incoming call from:', callerId); // Debug log

                // Store remote ID and offer
                currentRemoteId = callerId;
                isCaller = false;
                window._pendingOffer = sdpOffer;

                showIncomingCall(callerId);

                console.log('[UI] Showing incoming call interface');
            });

            // 2) When the remote answers our call (“callAnswered”)
            socket.on('callAnswered', async (data) => {
                const {
                    callee,
                    sdpAnswer
                } = data;
                console.log('[Socket] callAnswered from', callee);
                // Set the remote description on our peerConnection
                try {
                    await peerConnection.setRemoteDescription(
                        new RTCSessionDescription(sdpAnswer)
                    );
                    updateStatus('Call established', 'success');
                } catch (e) {
                    console.error('Error setting remote description:', e);
                }
            });

            // 3) When an ICE candidate arrives from the other side
            // socket.on("IceCandidate", (data) => {
            //     let calleeId = data.calleeId;
            //     let iceCandidate = data.iceCandidate;
            //     socket.to(calleeId).emit("IceCandidate", {
            //         sender: myId,
            //         iceCandidate: event.candidate,
            //     });
            //     });

            socket.on('IceCandidate', async ({
                sender,
                iceCandidate
            }) => {
                if (!peerConnection) {
                    console.warn('[Peer] Received ICE candidate but no peer connection exists');
                    return;
                }

                try {
                    // ICE candidate has all required fields
                    if (!iceCandidate) {
                        console.warn('[Peer] Received null ICE candidate from', sender);
                        return;
                    }

                    // Create a properly formatted ICE candidate
                    const candidate = new RTCIceCandidate({
                        candidate: iceCandidate.candidate || '',
                        sdpMid: iceCandidate.sdpMid || '',
                        sdpMLineIndex: iceCandidate.sdpMLineIndex || 0,
                        usernameFragment: iceCandidate.usernameFragment
                    });

                    await peerConnection.addIceCandidate(candidate);
                    console.log('[Peer] Successfully added ICE candidate from', sender);
                } catch (e) {
                    console.error('[Peer] Error adding ICE candidate:', e);
                    console.log('[Peer] Problematic ICE candidate:', iceCandidate);
                }
            });
        }

        // PeerConnection Setup
        function setupPeerConnection() {
            peerConnection = new RTCPeerConnection(servers);
            setupICEMonitoring(peerConnection);

            // Add screen share stream to the peerConnection
            if (localStream) {
                localStream.getTracks().forEach((track) => {
                    peerConnection.addTrack(track, localStream);
                });
            }

            // When receive remote tracks, show them in <video id="remoteVideo">
            peerConnection.ontrack = (event) => {
                console.log('[Peer] Received remote track', event.streams);
                const remoteVideo = document.getElementById('remoteVideo');
                remoteVideo.srcObject = event.streams[0];

                // // Try forcing playback
                // remoteVideo.play().catch((err) => {
                //     console.warn('[Peer] remoteVideo.play() failed:', err);
                // });
                
                showRemoteVideo(true);
                showInCallControls();
            };

            // Update the ICE candidate sending
            peerConnection.onicecandidate = (event) => {
                if (event.candidate && currentRemoteId) {
                    // Ensure send all required fields
                    const candidate = {
                        candidate: event.candidate.candidate,
                        sdpMid: event.candidate.sdpMid || '',
                        sdpMLineIndex: event.candidate.sdpMLineIndex || 0,
                        usernameFragment: event.candidate.usernameFragment || undefined
                    };

                    socket.emit('IceCandidate', {
                        calleeId: currentRemoteId,
                        iceCandidate: candidate
                    });
                    console.log('[Peer] Sending ICE candidate:', candidate);
                }
            };

            peerConnection.onconnectionstatechange = () => {
                console.log('[Peer] Connection state:', peerConnection.connectionState);
                if (
                    peerConnection.connectionState === 'disconnected' ||
                    peerConnection.connectionState === 'failed' ||
                    peerConnection.connectionState === 'closed'
                ) {
                    endCall();
                }
            };
        }

        // to monitor ICE connection state
        function setupICEMonitoring(pc) {
            pc.oniceconnectionstatechange = () => {
                console.log('[ICE] Connection state:', pc.iceConnectionState);
                switch (pc.iceConnectionState) {
                    case 'checking':
                        updateStatus('Connecting...', 'info');
                        break;
                    case 'connected':
                        updateStatus('Connected', 'success');
                        break;
                    case 'failed':
                        updateStatus('Connection failed - try refreshing', 'danger');
                        console.error('[ICE] Connection failed');
                        break;
                }
            };

            pc.onicegatheringstatechange = () => {
                console.log('[ICE] Gathering state:', pc.iceGatheringState);
            };

            pc.onnegotiationneeded = () => {
                console.log('[ICE] Negotiation needed');
            };
        }

        // Caller Flow: Click "Call"
        // document.getElementById('callBtn').addEventListener('click', async () => {
        //     const remoteId = document.getElementById('remoteIdInput').value.trim();
        //     if (!remoteId) {
        //         alert('Enter a valid Remote ID');
        //         return;
        //     }
        //     if (remoteId === myId) {
        //         alert('You cannot call yourself.');
        //         return;
        //     }

        //     currentRemoteId = remoteId;
        //     isCaller = true;
        //     updateStatus(`Calling ${remoteId}…`, 'info');

        //     // 1) Create PeerConnection if not already
        //     if (!peerConnection) {
        //         setupPeerConnection();
        //     }

        //     // 2) Create offer
        //     try {
        //         const offer = await peerConnection.createOffer();
        //         await peerConnection.setLocalDescription(offer);

        //         // 3) Send "makeCall" to server
        //         socket.emit('makeCall', {
        //             calleeId: remoteId,
        //             sdpOffer: offer
        //         });
        //         updateStatus('Offer sent, waiting for answer…', 'info');
        //     } catch (e) {
        //         console.error('Error creating/sending offer:', e);
        //         updateStatus('Call failed', 'danger');
        //     }
        // });

        // Callee Flow: Click "Accept"
        async function acceptCall() {
            hideIncomingCall();
            updateStatus('Accepting call…', 'info');

            // 1) Create PeerConnection if not already
            if (!peerConnection) {
                setupPeerConnection();
            }

            // 2) Set remote description with pending offer
            try {
                const offer = window._pendingOffer;
                await peerConnection.setRemoteDescription(
                    new RTCSessionDescription(offer)
                );
            } catch (e) {
                console.error('Error setting remote description:', e);
                updateStatus('Failed to accept call', 'danger');
                return;
            }

            // 3) Create answer
            try {
                const answer = await peerConnection.createAnswer();
                await peerConnection.setLocalDescription(answer);

                // 4) Send "answerCall" to server
                socket.emit('answerCall', {
                    callerId: currentRemoteId,
                    sdpAnswer: answer
                });
                updateStatus('Answer sent, establishing…', 'info');
            } catch (e) {
                console.error('Error creating/sending answer:', e);
                updateStatus('Failed to send answer', 'danger');
            }
        }

        // Callee Flow: Click "Decline"
        function declineCall() {
            hideIncomingCall();
            updateStatus('Call declined', 'warning');
            currentRemoteId = null;
            if (peerConnection) {
                peerConnection.close();
                peerConnection = null;
            }
        }

        // End Call
        function endCall() {
            if (peerConnection) {
                peerConnection.close();
                peerConnection = null;
            }
            updateStatus('Call ended', 'info');
            showRemoteVideo(false);
            hideInCallControls();
            currentRemoteId = null;
            isCaller = false;
        }

        // Add retry button specific for screen sharing
        function addRetryButton(text = 'Retry') {
            const statusDiv = document.getElementById('connectionStatus');
            const retryButton = document.createElement('button');
            retryButton.className = 'btn btn-primary btn-sm mt-2';
            retryButton.textContent = text;
            retryButton.onclick = () => {
                initializeScreenShare();
            };
            statusDiv.appendChild(retryButton);
        }

        // function to verify button setup
        function verifyButtonSetup() {
            const acceptBtn = document.querySelector('button[onclick="acceptCall()"]');
            const declineBtn = document.querySelector('button[onclick="declineCall()"]');

            if (!acceptBtn || !declineBtn) {
                console.error('[UI] Accept/Decline buttons not found in DOM');
            } else {
                console.log('[UI] Accept/Decline buttons properly initialized');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            initialize();
            verifyButtonSetup();
        });
    </script>
@endsection