@extends('layouts.app')

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

@section('content')
<div class="min-h-screen bg-black">
    <!-- Call Header -->
    <div class="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/50 to-transparent p-4">
        <div class="flex items-center justify-between text-white">
            <div class="flex items-center space-x-3">
                @php
                    $otherUser = $call->caller_id === auth()->id() ? $call->receiver : $call->caller;
                @endphp
                <img class="h-10 w-10 rounded-full object-cover" 
                     src="{{ $otherUser->profile?->profile_picture ?? '/images/default-avatar.png' }}" 
                     alt="{{ $otherUser->name }}">
                <div>
                    <p class="font-medium">{{ $otherUser->name }}</p>
                    <p class="text-sm text-gray-300" id="call-status">{{ ucfirst($call->call_status) }}</p>
                </div>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="text-right">
                    <p class="text-sm text-gray-300">Duration</p>
                    <p class="font-medium" id="call-duration">00:00</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-300">Credits</p>
                    <p class="font-medium" id="credits-used">0</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Container -->
    <div class="relative h-screen">
        <!-- Remote Video (Full Screen) -->
        <div id="remote-video-container" class="absolute inset-0">
            <div id="remote-video" class="w-full h-full bg-gray-900 flex items-center justify-center">
                <div class="text-center text-white">
                    <div class="w-24 h-24 bg-gray-700 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <i class="fas fa-user text-3xl text-gray-400"></i>
                    </div>
                    <p class="text-lg">Connecting...</p>
                </div>
            </div>
        </div>

        <!-- Local Video (Picture in Picture) -->
        <div id="local-video-container" class="absolute top-20 right-4 w-32 h-24 bg-gray-800 rounded-lg overflow-hidden border-2 border-white/20">
            <div id="local-video" class="w-full h-full bg-gray-700 flex items-center justify-center">
                <i class="fas fa-user text-white text-xl"></i>
            </div>
        </div>
    </div>

    <!-- Call Controls -->
    <div class="absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/50 to-transparent p-6">
        <div class="flex items-center justify-center space-x-6">
            <!-- Mute Audio -->
            <button id="mute-audio" onclick="toggleAudio()" 
                    class="w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center text-white transition-colors">
                <i class="fas fa-microphone"></i>
            </button>

            <!-- Mute Video -->
            <button id="mute-video" onclick="toggleVideo()" 
                    class="w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center text-white transition-colors">
                <i class="fas fa-video"></i>
            </button>

            <!-- End Call -->
            <button onclick="endCall()" 
                    class="w-16 h-16 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center text-white transition-colors">
                <i class="fas fa-phone-slash text-xl"></i>
            </button>

            <!-- Switch Camera (Mobile) -->
            <button id="switch-camera" onclick="switchCamera()" 
                    class="w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center text-white transition-colors md:hidden">
                <i class="fas fa-sync-alt"></i>
            </button>

            <!-- Fullscreen -->
            <button onclick="toggleFullscreen()" 
                    class="w-12 h-12 bg-gray-600 hover:bg-gray-500 rounded-full flex items-center justify-center text-white transition-colors">
                <i class="fas fa-expand"></i>
            </button>
        </div>
    </div>

    <!-- Call Status Overlay -->
    <div id="call-overlay" class="absolute inset-0 bg-black/80 flex items-center justify-center z-20 hidden">
        <div class="text-center text-white">
            <div class="w-16 h-16 border-4 border-white border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p class="text-xl" id="overlay-message">Connecting...</p>
        </div>
    </div>
</div>

<!-- Call End Modal -->
<div id="call-end-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg p-6 max-w-md w-full">
            <div class="text-center">
                <i class="fas fa-phone-slash text-red-600 text-4xl mb-4"></i>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Call Ended</h3>
                <div id="call-summary" class="text-gray-600 mb-6">
                    <!-- Call summary will be populated here -->
                </div>
                <button onclick="goToCallHistory()" 
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700">
                    Back to Call History
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.19.0.js"></script>
<script>
// Call data from backend
const callData = @json([
    'id' => $call->id,
    'channel_name' => $call->agora_channel_name,
    'call_type' => $call->call_type,
    'call_status' => $call->call_status,
    'caller_id' => $call->caller_id,
    'receiver_id' => $call->receiver_id,
    'metadata' => $call->metadata
]);

const currentUserId = {{ auth()->id() }};
const isReceiver = currentUserId === callData.receiver_id;

// Agora client
let client;
let localAudioTrack;
let localVideoTrack;
let remoteUsers = {};

// Call state
let callStartTime = null;
let callTimer = null;
let isAudioMuted = false;
let isVideoMuted = false;
let creditsUsed = 0;

// Initialize call
document.addEventListener('DOMContentLoaded', function() {
    initializeCall();
});

async function initializeCall() {
    try {
        showOverlay('Initializing call...');
        
        // Get Agora configuration
        const configResponse = await fetch('/api/payment/config');
        const config = await configResponse.json();
        
        // Initialize Agora client
        client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
        
        // Set up event listeners
        client.on("user-published", handleUserPublished);
        client.on("user-unpublished", handleUserUnpublished);
        client.on("user-left", handleUserLeft);
        
        // Get token for current user
        const token = isReceiver ? callData.metadata.receiver_token : callData.metadata.caller_token;
        
        // Join channel
        await client.join(config.razorpay_key, callData.channel_name, token, currentUserId);
        
        // Create local tracks
        if (callData.call_type === 'video') {
            [localAudioTrack, localVideoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();
            localVideoTrack.play("local-video");
        } else {
            localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
        }
        
        // Publish local tracks
        const tracksToPublish = [localAudioTrack];
        if (localVideoTrack) {
            tracksToPublish.push(localVideoTrack);
        }
        await client.publish(tracksToPublish);
        
        hideOverlay();
        
        // If receiver, accept the call
        if (isReceiver && callData.call_status === 'initiated') {
            await acceptCall();
        }
        
        // Start call timer if call is ongoing
        if (callData.call_status === 'ongoing') {
            startCallTimer();
        }
        
    } catch (error) {
        console.error('Failed to initialize call:', error);
        showOverlay('Failed to connect. Please try again.');
        setTimeout(() => {
            goToCallHistory();
        }, 3000);
    }
}

async function acceptCall() {
    try {
        const response = await fetch(`/api/calls/${callData.id}/accept`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('call-status').textContent = 'Connected';
            startCallTimer();
        }
    } catch (error) {
        console.error('Failed to accept call:', error);
    }
}

async function endCall() {
    try {
        showOverlay('Ending call...');
        
        // Stop call timer
        if (callTimer) {
            clearInterval(callTimer);
        }
        
        // Leave channel and clean up
        if (localAudioTrack) {
            localAudioTrack.stop();
            localAudioTrack.close();
        }
        if (localVideoTrack) {
            localVideoTrack.stop();
            localVideoTrack.close();
        }
        
        await client.leave();
        
        // End call on server
        const response = await fetch(`/api/calls/${callData.id}/end`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                reason: 'normal'
            })
        });
        
        const data = await response.json();
        
        hideOverlay();
        
        if (data.success) {
            showCallEndModal(data.result);
        } else {
            goToCallHistory();
        }
        
    } catch (error) {
        console.error('Failed to end call:', error);
        goToCallHistory();
    }
}

function toggleAudio() {
    if (localAudioTrack) {
        isAudioMuted = !isAudioMuted;
        localAudioTrack.setMuted(isAudioMuted);
        
        const button = document.getElementById('mute-audio');
        const icon = button.querySelector('i');
        
        if (isAudioMuted) {
            button.classList.remove('bg-gray-600', 'hover:bg-gray-500');
            button.classList.add('bg-red-600', 'hover:bg-red-700');
            icon.classList.remove('fa-microphone');
            icon.classList.add('fa-microphone-slash');
        } else {
            button.classList.remove('bg-red-600', 'hover:bg-red-700');
            button.classList.add('bg-gray-600', 'hover:bg-gray-500');
            icon.classList.remove('fa-microphone-slash');
            icon.classList.add('fa-microphone');
        }
    }
}

function toggleVideo() {
    if (localVideoTrack) {
        isVideoMuted = !isVideoMuted;
        localVideoTrack.setMuted(isVideoMuted);
        
        const button = document.getElementById('mute-video');
        const icon = button.querySelector('i');
        
        if (isVideoMuted) {
            button.classList.remove('bg-gray-600', 'hover:bg-gray-500');
            button.classList.add('bg-red-600', 'hover:bg-red-700');
            icon.classList.remove('fa-video');
            icon.classList.add('fa-video-slash');
        } else {
            button.classList.remove('bg-red-600', 'hover:bg-red-700');
            button.classList.add('bg-gray-600', 'hover:bg-gray-500');
            icon.classList.remove('fa-video-slash');
            icon.classList.add('fa-video');
        }
    }
}

function switchCamera() {
    if (localVideoTrack) {
        localVideoTrack.switchDevice();
    }
}

function toggleFullscreen() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        document.documentElement.requestFullscreen();
    }
}

async function handleUserPublished(user, mediaType) {
    await client.subscribe(user, mediaType);
    
    if (mediaType === 'video') {
        const remoteVideoContainer = document.getElementById('remote-video');
        remoteVideoContainer.innerHTML = '';
        user.videoTrack.play("remote-video");
    }
    
    if (mediaType === 'audio') {
        user.audioTrack.play();
    }
    
    remoteUsers[user.uid] = user;
}

function handleUserUnpublished(user, mediaType) {
    if (mediaType === 'video') {
        const remoteVideoContainer = document.getElementById('remote-video');
        remoteVideoContainer.innerHTML = `
            <div class="w-full h-full bg-gray-900 flex items-center justify-center">
                <div class="text-center text-white">
                    <div class="w-24 h-24 bg-gray-700 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <i class="fas fa-user text-3xl text-gray-400"></i>
                    </div>
                    <p class="text-lg">Video paused</p>
                </div>
            </div>
        `;
    }
}

function handleUserLeft(user) {
    delete remoteUsers[user.uid];
    const remoteVideoContainer = document.getElementById('remote-video');
    remoteVideoContainer.innerHTML = `
        <div class="w-full h-full bg-gray-900 flex items-center justify-center">
            <div class="text-center text-white">
                <div class="w-24 h-24 bg-gray-700 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-user text-3xl text-gray-400"></i>
                </div>
                <p class="text-lg">User left the call</p>
            </div>
        </div>
    `;
}

function startCallTimer() {
    callStartTime = Date.now();
    callTimer = setInterval(updateCallTimer, 1000);
}

function updateCallTimer() {
    if (callStartTime) {
        const elapsed = Math.floor((Date.now() - callStartTime) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        
        document.getElementById('call-duration').textContent = 
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        
        // Update credits used (rough estimate)
        const costPerMinute = callData.call_type === 'video' ? 2 : 1;
        creditsUsed = Math.ceil(elapsed / 60) * costPerMinute;
        document.getElementById('credits-used').textContent = creditsUsed;
    }
}

function showOverlay(message) {
    document.getElementById('overlay-message').textContent = message;
    document.getElementById('call-overlay').classList.remove('hidden');
}

function hideOverlay() {
    document.getElementById('call-overlay').classList.add('hidden');
}

function showCallEndModal(result) {
    const summary = `
        <p><strong>Duration:</strong> ${result.duration_formatted}</p>
        <p><strong>Credits Used:</strong> ${result.credits_used}</p>
    `;
    
    document.getElementById('call-summary').innerHTML = summary;
    document.getElementById('call-end-modal').classList.remove('hidden');
}

function goToCallHistory() {
    window.location.href = '{{ route("calls.index") }}';
}

// Handle page unload
window.addEventListener('beforeunload', function() {
    if (localAudioTrack) {
        localAudioTrack.stop();
        localAudioTrack.close();
    }
    if (localVideoTrack) {
        localVideoTrack.stop();
        localVideoTrack.close();
    }
    if (client) {
        client.leave();
    }
});
</script>
@endpush