@extends('coach.layouts.contentNavbarLayout')

@section('title', 'Video Call')

@section('vendor-style')
<!-- Load Boxicons from CDN -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
@endsection

@section('page-style')
<style>
    .video-call-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #f5f5f9;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .video-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
        height: 70vh;
    }
    
    .video-box {
        background-color: #2d3748;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .video-label {
        position: absolute;
        bottom: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
    }
    
    #local-media {
        display: none;
    }
    
    #caller-media, #receiver-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #caller-media video, #receiver-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .control-panel {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }
    
    .call-timer {
        background-color: #4a5568;
        color: white;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
    }
    
    .control-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        margin: 0 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    .control-btn:hover {
        transform: translateY(-2px);
    }
    
    .control-btn i {
        font-size: 24px;
    }
    
    .join-btn {
        background-color: #4299e1;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-right: 10px;
        transition: all 0.3s ease;
    }
    
    .join-btn:hover {
        background-color: #3182ce;
    }
    
    .test-btn {
        background-color: #48bb78;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .test-btn:hover {
        background-color: #38a169;
    }
    
    .disconnect-btn {
        background-color: #f56565;
        color: white;
    }
    
    .disconnect-btn:hover {
        background-color: #e53e3e;
    }
    
    .mute-btn {
        background-color: #4299e1;
        color: white;
    }
    
    .mute-btn.muted {
        background-color: #718096;
    }
    
    .video-btn {
        background-color: #4299e1;
        color: white;
    }
    
    .video-btn.stopped {
        background-color: #718096;
    }
    
    .setup-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
    }
    
    .setup-buttons {
        display: flex;
        margin-top: 20px;
    }
    
    .end-call-message {
        text-align: center;
        padding: 20px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        font-size: 18px;
        font-weight: 600;
        color: #4a5568;
    }
    
    .camera-preview {
        width: 100%;
        max-width: 640px;
        border-radius: 12px;
        overflow: hidden;
        margin-top: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .camera-preview video {
        width: 100%;
        display: block;
    }
    
    .connecting-message {
        text-align: center;
        padding: 20px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        font-size: 18px;
        font-weight: 600;
        color: #4a5568;
        margin-bottom: 20px;
    }
    
    .spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: #4299e1;
        animation: spin 1s ease-in-out infinite;
        margin-right: 10px;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
        .video-grid {
            grid-template-columns: 1fr;
        }
        
        .control-panel {
            flex-direction: column;
        }
        
        .call-timer {
            margin-right: 0;
            margin-bottom: 20px;
        }
    }
</style>
@endsection

@section('content')
<div class="video-call-container">
    <div id="local-media"></div>
    
    <div class="setup-container" id="setup-container">
        <h2>Video Call with {{ $appointment->employee->name }}</h2>
        <div class="setup-buttons">
            <button class="test-btn mx-2" onclick="testCamera()">
                <i class="bx bx-camera"></i> Test Camera
            </button>
            <button class="join-btn mx-2" onclick="joinRoom()">
                <i class="bx bx-phone-call"></i> Join Call
            </button>
        </div>
        <div class="camera-preview">
            <video id="video" width="640" height="480" autoplay></video>
        </div>
    </div>
    
    <div id="connecting-message" class="connecting-message" style="display: none;">
        <div class="spinner"></div> Connecting to call...
    </div>

    <div class="video-grid" id="video-grid" style="display: none;">
        <div class="video-box">
            <div id="caller-media"></div>
            <div class="video-label">You</div>
        </div>
        <div class="video-box">
            <div id="receiver-media"></div>
            <div class="video-label">Participant</div>
        </div>
    </div>

    <div class="control-panel" id="controls" style="display: none;">
        <div class="call-timer" id="call-timer">Call duration: 00:00</div>
        <button class="control-btn disconnect-btn" id="disconnect-btn" onclick="disconnect()">
            <i class="bx bx-phone-off"></i>
        </button>
        <button class="control-btn mute-btn" id="mute-btn" onclick="toggleAudio()">
            <i class="bx bx-microphone"></i>
        </button>
        <button class="control-btn video-btn" id="video-btn" onclick="toggleVideo()">
            <i class="bx bx-video"></i>
        </button>
    </div>

    <div class="end-call-message" id="end-call-message" style="display: none;"></div>
</div>
@endsection

@section('page-script')
<script>
    let room;
    let localAudioTrack;
    let localVideoTrack;
    let timer;
    let seconds = 0;
    let callStarted = false;
    let audioEnabled = true;
    let videoEnabled = true;

    // Initialize when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Hide the video element initially
        document.getElementById('video').style.display = 'none';
    });

    function testCamera() {
        const video = document.getElementById('video');
        
        // Show the video element
        video.style.display = 'block';
        
        navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            })
            .then(function(stream) {
                video.srcObject = stream;
                
                // Enable the join button once camera is tested
                document.querySelector('.join-btn').disabled = false;
            })
            .catch(function(error) {
                console.error('Camera access error', error);
                alert('Unable to access camera. Please check your permissions.');
            });
    }

    function startTimer() {
        timer = setInterval(() => {
            seconds++;
            const minutes = Math.floor(seconds / 60);
            const secs = seconds % 60;
            document.getElementById('call-timer').textContent =
                `Call duration: ${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        }, 1000);
    }

    function joinRoom() {
        // Hide setup container and show connecting message
        document.getElementById('setup-container').style.display = 'none';
        document.getElementById('connecting-message').style.display = 'block';
        
        const appointment_id = {{ $appointment_id }};

        fetch(`/CRM/coach/call/token/${appointment_id}?identity=caller`, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            credentials: 'same-origin',
        })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    throw new Error(data.message || 'Failed to get token');
                }
                
                // Extract token from the result.data object structure
                const responseData = data.result.data;
                const token = responseData.token;
                const roomName = responseData.room_name;
                
                if (!token || typeof token !== 'string') {
                    throw new Error('Invalid token received from server');
                }
                
                console.log('Connecting with room name:', roomName);
                
                return Twilio.Video.connect(token, {
                    name: roomName,
                    audio: true,
                    video: true
                });
            })
            .then(r => {
                room = r;
                console.log('Connected to the room:', room.name);
                
                // Hide connecting message and show video grid
                document.getElementById('connecting-message').style.display = 'none';
                document.getElementById('video-grid').style.display = 'grid';
                
                // Always show controls once connected
                document.getElementById('controls').style.display = 'flex';

                room.localParticipant.tracks.forEach(publication => {
                    if (publication.track.kind === 'audio') {
                        localAudioTrack = publication.track;
                    }
                    if (publication.track.kind === 'video') {
                        localVideoTrack = publication.track;
                        const videoElement = localVideoTrack.attach();
                        document.getElementById('caller-media').appendChild(videoElement);
                    }
                });
                
                // Start the timer immediately when we join
                if (!callStarted) {
                    callStarted = true;
                    startTimer();
                    // Notify backend that call has started
                    notifyCallStarted();
                }

                room.on('participantConnected', participant => {
                    console.log(participant.identity + ' has joined the room');

                    participant.tracks.forEach(publication => {
                        if (publication.isSubscribed) {
                            const track = publication.track;
                            document.getElementById('receiver-media').appendChild(track.attach());
                        }
                    });

                    participant.on('trackSubscribed', track => {
                        document.getElementById('receiver-media').appendChild(track.attach());
                    });

                    participant.on('trackUnsubscribed', track => {
                        track.detach().forEach(element => element.remove());
                    });
                });

                room.on('disconnected', () => {
                    clearInterval(timer);

                    const totalMinutes = Math.floor(seconds / 60);
                    const totalSecs = seconds % 60;
                    const message =
                        `Call ended. Total duration: ${String(totalMinutes).padStart(2, '0')}:${String(totalSecs).padStart(2, '0')}`;

                    document.getElementById('video-grid').style.display = 'none';
                    document.getElementById('controls').style.display = 'none';
                    document.getElementById('end-call-message').textContent = message;
                    document.getElementById('end-call-message').style.display = 'block';

                    // Stop all local tracks
                    if (room && room.localParticipant) {
                        room.localParticipant.tracks.forEach(publication => {
                            if (publication.track) {
                                publication.track.stop();
                            }
                        });
                    }

                    // Notify backend that call has ended
                    notifyCallEnded();
                });
            })
            .catch(error => {
                console.error('Unable to connect to Twilio: ' + error.message);
                alert('Unable to connect to the call. Please try again later.');
                document.getElementById('connecting-message').style.display = 'none';
                document.getElementById('setup-container').style.display = 'flex';
            });
    }

    function disconnect() {
        if (room) {
            const appointment_id = {{ $appointment_id }};

            fetch('/CRM/coach/call/end', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },

                    credentials: 'same-origin',

                    body: JSON.stringify({
                        appointment_id: appointment_id,
                        call_type: 'video',
                        duration: seconds,
                        send_notification: true
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data.message);
                    room.disconnect();

                    // Stop all local tracks
                    if (room && room.localParticipant) {
                        room.localParticipant.tracks.forEach(publication => {
                            if (publication.track) {
                                publication.track.stop();
                            }
                        });
                    }
                    
                    clearInterval(timer);

                    const totalMinutes = Math.floor(seconds / 60);
                    const totalSecs = seconds % 60;
                    const message =
                        `Call ended. Total duration: ${String(totalMinutes).padStart(2, '0')}:${String(totalSecs).padStart(2, '0')}`;

                    document.getElementById('video-grid').style.display = 'none';
                    document.getElementById('controls').style.display = 'none';
                    document.getElementById('end-call-message').textContent = message;
                    document.getElementById('end-call-message').style.display = 'block';
                })
                .catch(error => {
                    console.error('Error sending disconnect notification: ' + error.message);
                    // Still disconnect even if notification fails
                    room.disconnect();
                });
        }
    }

    function toggleAudio() {
        const muteButton = document.getElementById('mute-btn');
        if (localAudioTrack) {
            if (audioEnabled) {
                localAudioTrack.disable();
                muteButton.classList.add('muted');
                muteButton.innerHTML = '<i class="bx bx-microphone-off"></i>';
                console.log('Microphone muted');
                audioEnabled = false;
            } else {
                localAudioTrack.enable();
                muteButton.classList.remove('muted');
                muteButton.innerHTML = '<i class="bx bx-microphone"></i>';
                console.log('Microphone unmuted');
                audioEnabled = true;
            }
        }
    }

    function toggleVideo() {
        const videoButton = document.getElementById('video-btn');
        if (localVideoTrack) {
            if (videoEnabled) {
                localVideoTrack.disable();
                videoButton.classList.add('stopped');
                videoButton.innerHTML = '<i class="bx bx-video-off"></i>';
                console.log('Video stopped');
                videoEnabled = false;
            } else {
                localVideoTrack.enable();
                videoButton.classList.remove('stopped');
                videoButton.innerHTML = '<i class="bx bx-video"></i>';
                console.log('Video started');
                videoEnabled = true;
            }
        }
    }

    // New functions to notify backend about call status
    function notifyCallStarted() {
        const appointment_id = {{ $appointment_id }};

        fetch('/CRM/coach/call/started', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                appointment_id: appointment_id
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Call started notification sent:', data);
        })
        .catch(error => {
            console.error('Error sending call started notification:', error);
        });
    }

    function notifyCallEnded() {
        const appointment_id = {{ $appointment_id }};
        // Calculate duration in seconds
        const durationInSeconds = seconds;

        fetch('/CRM/coach/call/end', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                appointment_id: appointment_id,
                duration: durationInSeconds,
                send_notification: false
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Call ended notification sent:', data);
        })
        .catch(error => {
            console.error('Error sending call ended notification:', error);
        });
    }
</script>
@endsection