@extends('coach.layouts.contentNavbarLayout')

@section('title', 'Audio 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>
    .audio-call-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        background-color: #f5f5f9;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .audio-box {
        width: 300px;
        height: 300px;
        background-color: #2d3748;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        position: relative;
    }
    
    .audio-icon {
        font-size: 80px;
        color: white;
    }
    
    #local-media {
        display: none;
    }
    
    .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;
        width: 100%;
        max-width: 500px;
    }
    
    .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;
    }
    
    .setup-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        width: 100%;
        max-width: 500px;
    }
    
    .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;
        width: 100%;
        max-width: 500px;
    }
    
    .audio-level {
        width: 100%;
        max-width: 300px;
        height: 20px;
        background-color: #e2e8f0;
        border-radius: 10px;
        margin-top: 20px;
        overflow: hidden;
    }
    
    .audio-meter {
        height: 100%;
        width: 0%;
        background-color: #48bb78;
        transition: width 0.1s ease;
    }
    
    .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;
        width: 100%;
        max-width: 500px;
    }
    
    .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); }
    }
    
    .audio-wave {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .audio-wave span {
        display: block;
        width: 5px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.3);
        margin: 0 3px;
        border-radius: 10px;
        animation: wave 1.2s infinite ease-in-out;
    }
    
    .audio-wave span:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .audio-wave span:nth-child(3) {
        animation-delay: 0.4s;
    }
    
    .audio-wave span:nth-child(4) {
        animation-delay: 0.6s;
    }
    
    .audio-wave span:nth-child(5) {
        animation-delay: 0.8s;
    }
    
    @keyframes wave {
        0%, 100% {
            height: 20px;
        }
        50% {
            height: 60px;
        }
    }
</style>
@endsection

@section('content')
<div class="audio-call-container">
    <div id="local-media"></div>
    
    <div class="setup-container" id="setup-container">
        <h2>Audio Call with {{ $appointment->employee->name }}</h2>
        <div class="setup-buttons">
            <button class="test-btn mx-2" onclick="testAudio()">
                <i class="bx bx-microphone"></i> Test Microphone
            </button>
            <button class="join-btn mx-2" onclick="joinRoom()">
                <i class="bx bx-phone-call"></i> Join Call
            </button>
        </div>
        <div class="audio-level" id="audio-level">
            <div class="audio-meter" id="audio-meter"></div>
        </div>
    </div>
    
    <div id="connecting-message" class="connecting-message" style="display: none;">
        <div class="spinner"></div> Connecting to call...
    </div>

    <div id="call-container" style="display: none;">
        <div class="audio-box">
            <i class="bx bx-headphone audio-icon"></i>
            <div class="audio-wave">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <div class="control-panel" id="controls">
            <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>
        </div>
    </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 timer;
    let seconds = 0;
    let callStarted = false;
    let audioEnabled = true;
    let audioContext;
    let audioStream;

    // Function to test the microphone
    function testAudio() {
        if (audioStream) {
            audioStream.getTracks().forEach(track => track.stop());
        }
        
        navigator.mediaDevices.getUserMedia({
                audio: true
            })
            .then(function(stream) {
                audioStream = stream;
                audioContext = new(window.AudioContext || window.webkitAudioContext)();
                const analyser = audioContext.createAnalyser();
                const source = audioContext.createMediaStreamSource(stream);
                source.connect(analyser);
                analyser.fftSize = 256;

                const dataArray = new Uint8Array(analyser.frequencyBinCount);

                function updateAudioLevel() {
                    analyser.getByteFrequencyData(dataArray);
                    const volume = dataArray.reduce((sum, value) => sum + value) / dataArray.length;

                    // Display volume level
                    const audioMeter = document.getElementById('audio-meter');
                    audioMeter.style.width = `${Math.min(volume, 100)}%`; // Limit to 100%

                    requestAnimationFrame(updateAudioLevel);
                }

                updateAudioLevel();
                
                // Enable the join button once audio is tested
                document.querySelector('.join-btn').disabled = false;
            })
            .catch(function(error) {
                console.error('Microphone access error', error);
                alert('Unable to access microphone. Please check your permissions.');
            });
    }

    // Function to start the timer
    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 to join a Twilio room for an audio call
    function joinRoom() {
        // Hide setup container and show connecting message
        document.getElementById('setup-container').style.display = 'none';
        document.getElementById('connecting-message').style.display = 'block';
        
        // Stop any existing audio stream
        if (audioStream) {
            audioStream.getTracks().forEach(track => track.stop());
        }
        
        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: false // Make sure video is disabled
                });
            })
            .then(r => {
                room = r;
                console.log('Connected to the room:', room.name);
                
                // Hide connecting message and show call container
                document.getElementById('connecting-message').style.display = 'none';
                document.getElementById('call-container').style.display = 'flex';
                document.getElementById('call-container').style.flexDirection = 'column';
                document.getElementById('call-container').style.alignItems = 'center';

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

                // Handle adding a participant
                room.on('participantConnected', participant => {
                    participant.tracks.forEach(publication => {
                        if (publication.isSubscribed && publication.track.kind === 'audio') {
                            const track = publication.track;
                            document.getElementById('local-media').appendChild(track.attach());
                        }
                    });

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

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

                room.on('disconnected', () => {
                    console.warn('Disconnected from the room');
                    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('call-container').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 to toggle mute/unmute
    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 to disconnect
    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: 'audio',
                    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();
                        }
                    });
                }
            })
            .catch(error => {
                console.error('Error sending disconnect notification: ' + error.message);
                // Still disconnect even if notification fails
                room.disconnect();
            });
        }
    }

    // Function to notify backend that call has started
    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 to notify backend that call has ended
    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