@extends('coach.layouts.contentNavbarLayout')

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

@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, #video {
        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);
    }
    
    .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;
    }
    
    .disconnect-btn:hover {
        background-color: #e53e3e;
    }
    
    .mute-btn {
        background-color: #4299e1;
    }
    
    .mute-btn.muted {
        background-color: #718096;
    }
    
    .video-btn {
        background-color: #4299e1;
    }
    
    .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;
    }
    
    @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 Setup</h2>
        <div class="setup-buttons">
            <button class="join-btn" onclick="joinRoom()">
                <i class="bx bx-phone-call"></i> Join Call
            </button>
            <button class="test-btn" onclick="testCamera()">
                <i class="bx bx-camera"></i> Test Camera
            </button>
        </div>
        <video id="video" width="640" height="480" autoplay></video>
    </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;

    function testCamera() {
        navigator.mediaDevices.getUserMedia({
                video: true
            })
            .then(function(stream) {
                const video = document.getElementById('video');
                video.style.display = 'block';
                video.style.maxWidth = '100%';
                video.style.borderRadius = '8px';
                video.style.marginTop = '20px';
                video.srcObject = stream;
            })
            .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() {
        document.getElementById('setup-container').style.display = 'none';
        document.getElementById('video-grid').style.display = 'grid';
        
        const appointment_id = {{ $appointment_id }};

        fetch(`/CRM/token/${appointment_id}?identity=caller`)
            .then(response => response.json())
            .then(data => {
                return Twilio.Video.connect(data.token, {
                    name: 'MyRoom'
                });
            })
            .then(r => {
                room = r;
                console.log('Connected to the room:', room.name);

                room.localParticipant.tracks.forEach(publication => {
                    if (publication.track.kind === 'audio') {
                        localAudioTrack = publication.track;
                    }
                    if (publication.track.kind === 'video') {
                        localVideoTrack = publication.track;
                        document.getElementById('caller-media').appendChild(localVideoTrack.attach());
                    }
                });

                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());
                        document.getElementById('controls').style.display = 'flex'; // Show buttons
                        if (!callStarted) {
                            callStarted = true;
                            startTimer();
                            // Notify backend that call has started
                            notifyCallStarted();
                        }
                    });

                    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';

                    room.localParticipant.tracks.forEach(track => 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('setup-container').style.display = 'flex';
                document.getElementById('video-grid').style.display = 'none';
            });
    }

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

            fetch('/CRM/token/disconnect/notification', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        device_token: deviceToken,
                        appointment_id: appointment_id
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data.message);
                    room.disconnect();

                    room.localParticipant.tracks.forEach(track => 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);
                });
        }
    }

    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 }};

        // This would be an API call in a real mobile app
        console.log('Call started for appointment #' + appointment_id);
    }

    function notifyCallEnded() {
        const appointment_id = {{ $appointment_id }};

        // This would be an API call in a real mobile app
        console.log('Call ended for appointment #' + appointment_id + ' with duration: ' + seconds + ' seconds');
    }
</script>
@endsection