@php
use Illuminate\Support\Str;

// Default known working ID
$defaultWorkingId = 'rittenhouse555';

// Determine which ID to use - always prioritize wmvision_id
if (!empty($camera->wmvision_id)) {
    $cameraId = $camera->wmvision_id;
} else {
    // If wmvision_id is not available, use the default working ID
    $cameraId = $defaultWorkingId;
}

@endphp

<div class="bg-black rounded-lg overflow-hidden shadow-xl">
    @if ($camera->is_live && $camera->stream_url)
        <div class="aspect-video bg-gray-900 relative" id="video-container">
            @if (!empty($camera->wmvision_id))
            <!-- Using the camera's actual wmvision_id -->
            <iframe
                id="embedded-player"
                src="{{ url('/combined-player') }}?id={{ $cameraId }}"
                frameborder="0"
                allowfullscreen
                class="w-full h-full absolute inset-0"
                title="{{ $camera->title }}"
                allow="autoplay; fullscreen"
                loading="lazy"
                onload="checkPlayerLoaded()"
                onerror="handlePlayerError()"
            ></iframe>
            @else
            <!-- Using the default working ID since wmvision_id is not available -->
            <iframe
                id="embedded-player"
                src="{{ url('/combined-player') }}?id={{ $defaultWorkingId }}"
                frameborder="0"
                allowfullscreen
                class="w-full h-full absolute inset-0"
                title="{{ $camera->title }}"
                allow="autoplay; fullscreen"
                loading="lazy"
                onload="checkPlayerLoaded()"
                onerror="handlePlayerError()"
            ></iframe>
            @endif
            
            <!-- Error message container -->
            <div id="player-error" class="hidden absolute inset-0 bg-black bg-opacity-75 flex flex-col items-center justify-center text-white p-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-red-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <p class="text-xl font-bold mb-2">Stream Error</p>
                <p class="text-sm mb-4" id="error-message">The stream could not be loaded.</p>
                <div class="flex flex-col gap-3 sm:flex-row">
                    <a href="{{ url('/combined-player') }}?id={{ $defaultWorkingId }}" target="_blank" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        Try Default Camera
                    </a>
                    <button onclick="retryCombinedPlayer()" class="border border-white hover:bg-white hover:text-black text-white font-bold py-2 px-4 rounded">
                        Retry
                    </button>
                    <a href="{{ url('/combined-player') }}?id={{ $cameraId }}&debug=1" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Debug Player
                    </a>
                </div>
            </div>
        </div>
        
        <div class="p-4 bg-gray-800 text-white">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    @if ($camera->is_live)
                        <div class="h-2 w-2 rounded-full bg-red-500 animate-pulse"></div>
                        <span class="font-medium">LIVE</span>
                    @else
                        <div class="h-2 w-2 rounded-full bg-yellow-500"></div>
                        <span class="font-medium text-yellow-500">DOWN</span>
                    @endif
                </div>
                <div class="flex items-center space-x-2">
                    <div class="flex items-center mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        <span>{{ $camera->viewers }} viewers</span>
                    </div>
                    @if (!empty($camera->wmvision_id))
                        <span class="text-xs text-gray-400">ID: {{ $camera->wmvision_id }}</span>
                    @else
                        <span class="text-xs text-gray-400 bg-red-900 px-2 py-1 rounded">Missing wmvision_id</span>
                    @endif
                </div>
            </div>
        </div>
    @else
        <div class="aspect-video bg-gray-900 flex flex-col items-center justify-center p-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
            <p class="text-white text-xl font-bold mb-2">Stream Offline</p>
            <p class="text-gray-400 text-sm text-center">This camera is currently offline. Please check back later.</p>
        </div>
    @endif
</div>

@push('scripts')
@if ($camera->is_live && $camera->stream_url)
<script>
    // Variables for retry logic
    let playerRetryCount = 0;
    const MAX_RETRIES = 2;
    let originalSrc = "{{ !empty($camera->wmvision_id) ? url('/combined-player') . '?id=' . $cameraId : url('/combined-player') . '?id=' . $defaultWorkingId }}";
    let fallbackSrc = "{{ url('/combined-player') }}?id={{ $defaultWorkingId }}";
    
    // Function to check if player loaded successfully
    function checkPlayerLoaded() {
        console.log("Player iframe loaded, checking content...");
        
        const iframe = document.getElementById('embedded-player');
        
        try {
            // Try to access iframe content
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            
            // Check if there's an error message in the content
            if (iframeDoc && iframeDoc.body && iframeDoc.body.innerText) {
                const content = iframeDoc.body.innerText;
                
                if (content.includes("Error") || content.includes("403") || content.includes("not available")) {
                    console.error("Error detected in iframe content:", content);
                    showError("API returned an error: " + content);
                    
                    // If we got a 403, try the fallback immediately
                    if (content.includes("403")) {
                        console.log("403 error detected, trying fallback immediately");
                        iframe.src = fallbackSrc;
                    }
                }
            }
        } catch (e) {
            // Cross-origin restrictions prevent access to iframe content
            console.log("Cannot access iframe content due to cross-origin restrictions");
        }
    }
    
    // Function to handle iframe errors
    function handlePlayerError() {
        console.error("Player iframe encountered an error");
        showError("Failed to load the player");
    }
    
    // Show error message
    function showError(message) {
        const errorDiv = document.getElementById('player-error');
        const errorMessage = document.getElementById('error-message');
        
        if (errorDiv && errorMessage) {
            errorMessage.textContent = message;
            errorDiv.classList.remove('hidden');
        }
    }
    
    // Function to retry loading the player
    function retryCombinedPlayer() {
        playerRetryCount++;
        
        const iframe = document.getElementById('embedded-player');
        const errorDiv = document.getElementById('player-error');
        
        if (iframe && errorDiv) {
            // Hide error
            errorDiv.classList.add('hidden');
            
            // If we've already tried the original source, use fallback
            if (playerRetryCount >= MAX_RETRIES) {
                console.log("Trying fallback source:", fallbackSrc);
                iframe.src = fallbackSrc;
            } else {
                // Add cache buster to original URL
                const cacheBuster = 'cb=' + Date.now();
                const separator = originalSrc.includes('?') ? '&' : '?';
                iframe.src = originalSrc + separator + cacheBuster;
            }
        }
    }
</script>
@endif
@endpush