@extends('backend.layouts.app')

@section('title') {{-- __($module_action) }} {{ __($module_title) --}} @endsection

@section('breadcrumbs')
<x-backend.breadcrumbs>
    <x-backend.breadcrumb-item route='{{route("backend.cameras.index")}}' icon='{{-- $module_icon --}}'>
    {{-- <x-backend.breadcrumb-item route='{{route("backend.$module_name.index")}}' icon='$module_icon'> --}}
        {{-- __($module_title) --}}
    </x-backend.breadcrumb-item>

    <x-backend.breadcrumb-item type="active">{{-- __($module_action) --}}</x-backend.breadcrumb-item>
</x-backend.breadcrumbs>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Camera Details</h1>
    <div>
        <a href="{{ route('backend.cameras.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Cameras
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Camera Info</h5>
                <span class="badge {{ $camera->status == 'online' ? 'bg-success' : 'bg-danger' }}">
                    {{ ucfirst($camera->status) }}
                </span>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tbody>
                        <tr>
                            <th style="width: 30%">IP Address:</th>
                            <td>{{ $camera->ip_address }}</td>
                        </tr>
                        <tr>
                            <th>Port:</th>
                            <td>{{ $camera->port }}</td>
                        </tr>
                        <tr>
                            <th>Device Name:</th>
                            <td>{{ $camera->device_name }}</td>
                        </tr>
                        <tr>
                            <th>Camera Name:</th>
                            <td>{{ $camera->camera_name }}</td>
                        </tr>
                        <tr>
                            <th>Remote CH No.:</th>
                            <td>{{ $camera->remote_ch_no }}</td>
                        </tr>
                        <tr>
                            <th>Serial Number:</th>
                            <td>{{ $camera->sn ?: 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Manufacturer:</th>
                            <td>{{ $camera->manufacturer ?: 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Model:</th>
                            <td>{{ $camera->model ?: 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>MAC Address:</th>
                            <td>{{ $camera->mac_address ?: 'N/A' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer d-flex justify-content-end">
                <a href="{{ route('backend.cameras.edit', $camera->id) }}" class="btn btn-warning btn-sm me-2">
                    <i class="fas fa-edit"></i> Edit
                </a>
                <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{ $camera->id }})">
                    <i class="fas fa-trash"></i> Delete
                </button>
                <form id="delete-form-{{ $camera->id }}" 
                    action="{{ route('backend.cameras.destroy', $camera->id) }}" 
                    method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Stream Preview</h5>
                <button class="btn btn-sm btn-secondary" id="reset-refresh">
                    <i class="fas fa-redo"></i> Reset Auto-Refresh
                </button>
            </div>
            <div class="card-body text-center">
                <div class="ratio ratio-16x9 mb-3" id="preview-container">
                    <img src="{{ route('backend.cameras.stream', $camera->id) }}?preview=true&t={{ time() }}" 
                        alt="Camera Preview" class="img-fluid rounded border"
                        id="camera-preview" style="width: 100%; height: 100%; object-fit: contain;">
                    {{-- <div id="preview-loader" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div> --}}
                </div>
                <p class="mb-0 text-muted small">
                    <i class="fas fa-info-circle"></i> 
                    <span id="preview-status">Preview refreshes every 5 seconds</span>
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="preview-toggle" checked>
                        <label class="form-check-label" for="preview-toggle">Auto-refresh</label>
                    </div>
                </div>
                <div>
                    <button class="btn btn-sm btn-primary me-2" id="refresh-preview">
                        <i class="fas fa-sync"></i> Refresh Now
                    </button>
                    <a href="{{ route('backend.cameras.stream', $camera->id) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-video"></i> Full Stream
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">Stream Information</h5>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <label class="form-label">RTSP Stream URL:</label>
            <div class="input-group">
                <input type="text" class="form-control" value="{{ $camera->stream_uri ?: 'rtsp://' . ($camera->username ? $camera->username . ':*****@' : '') . $camera->ip_address . ':' . $camera->port . '/stream' }}" readonly id="stream-url">
                <button class="btn btn-outline-secondary" type="button" id="copy-btn">
                    <i class="fas fa-copy"></i> Copy
                </button>
            </div>
            <div class="form-text">Use this URL in media players like VLC to view the camera stream.</div>
        </div>

        <div class="mb-0">
            <label class="form-label">Connection Status:</label>
            <div>
                <span class="badge {{ $camera->status == 'online' ? 'bg-success' : 'bg-danger' }}">
                    {{ ucfirst($camera->status) }}
                </span>
                <button class="btn btn-sm btn-outline-primary ms-2" id="test-connection-btn">
                    <i class="fas fa-sync"></i> Test Connection
                </button>
                <span id="connection-test-result" class="ms-2"></span>
            </div>
        </div>
    </div>
</div>


<script>
    function confirmDelete(id) {
        if (confirm('Are you sure you want to remove this camera?')) {
            document.getElementById('delete-form-' + id).submit();
        }
    }
    
    $(document).ready(function() {
        // Copy stream URL functionality
        $('#copy-btn').click(function() {
            var copyText = document.getElementById("stream-url");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");
            $(this).html('<i class="fas fa-check"></i> Copied!');
            setTimeout(() => {
                $(this).html('<i class="fas fa-copy"></i> Copy');
            }, 2000);
        });
        
        // Test connection button
        $('#test-connection-btn').click(function() {
            $(this).prop('disabled', true);
            $(this).html('<i class="fas fa-spinner fa-spin"></i> Testing...');
            $('#connection-test-result').html('');
            
            // Perform actual connection test via AJAX
            $.ajax({
                url: "{{ route('backend.cameras.stream', $camera->id) }}",
                data: { test: 1, t: Date.now() },
                success: function(response) {
                    $('#connection-test-result').html('<span class="text-success">Connection successful!</span>');
                },
                error: function() {
                    $('#connection-test-result').html('<span class="text-danger">Connection failed. Make sure the camera is powered on and connected to the network.</span>');
                },
                complete: function() {
                    $('#test-connection-btn').prop('disabled', false)
                        .html('<i class="fas fa-sync"></i> Test Connection');
                }
            });
        });
        
        // Camera preview variables
        let previewRefreshEnabled = true;
        let previewRefreshInterval = null;
        let isRefreshing = false;
        let consecutiveFailures = 0;
        const maxFailures = 3;
        let lastUpdateTimestamp = Date.now();
        let currentPreviewMethod = 'json'; // Can be 'json' or 'simple'

        // Initialize preview image with error handling
        const initialPreviewImg = document.getElementById('camera-preview');
        initialPreviewImg.onerror = function() {
            this.src = "{{ asset('images/camera-offline.jpg') }}";
            $('#preview-status').html('<span class="text-warning">Failed to load initial preview</span>');
        };
        
        // Start the refresh interval
        startRefreshInterval();
        
        // Manual refresh button
        $('#refresh-preview').click(function() {
            if (!isRefreshing) {
                refreshPreviewImage(true);
            }
        });
        
        // Reset auto-refresh button
        $('#reset-refresh').click(function() {
            consecutiveFailures = 0;
            previewRefreshEnabled = true;
            $('#preview-status').text('Preview refreshes every 5 seconds');
            $('#preview-toggle').prop('checked', true);
            
            // Try the alternative method if we've been having issues
            if (currentPreviewMethod === 'json') {
                currentPreviewMethod = 'simple';
            } else {
                currentPreviewMethod = 'json';
            }
            
            refreshPreviewImage(true);
        });
        
        // Auto-refresh toggle
        $('#preview-toggle').change(function() {
            previewRefreshEnabled = $(this).prop('checked');
            if (previewRefreshEnabled) {
                $('#preview-status').text('Preview refreshes every 5 seconds');
                refreshPreviewImage(true);
            } else {
                $('#preview-status').text('Auto-refresh disabled');
            }
        });
        
        function startRefreshInterval() {
            if (previewRefreshInterval) {
                clearInterval(previewRefreshInterval);
            }
            
            previewRefreshInterval = setInterval(function() {
                if (previewRefreshEnabled && !isRefreshing) {
                    refreshPreviewImage(false);
                }
            }, 5000);
        }
        
        function refreshPreviewImage(isManualRefresh = false) {
            isRefreshing = true;
            
            if (isManualRefresh) {
                $('#refresh-preview').prop('disabled', true)
                    .html('<i class="fas fa-spinner fa-spin"></i>');
                $('#preview-status').text('Refreshing preview...');
                
                // Reset failures on manual refresh
                if (consecutiveFailures >= maxFailures) {
                    consecutiveFailures = 0;
                    previewRefreshEnabled = true;
                    $('#preview-toggle').prop('checked', true);
                }
            }
            
            $('#preview-loader').show();
            
            // Generate unique identifiers to prevent caching
            const timestamp = Date.now();
            const randomStr = Math.random().toString(36).substring(2, 15);
            
            // Build request URL based on current method
            let requestUrl = "{{ route('backend.cameras.stream', $camera->id) }}";
            let requestData = {
                preview: true,
                t: timestamp,
                random: randomStr
            };
            
            if (currentPreviewMethod === 'json') {
                requestData.json = 1;
            } else {
                requestData.simple = 1;
            }
            
            if (currentPreviewMethod === 'json') {
                // JSON method - get base64 image data
                $.ajax({
                    url: requestUrl,
                    data: requestData,
                    cache: false,
                    timeout: 30000, // 30 second timeout
                    success: function(response) {
                        if (response.success && response.image_data) {
                            // Update image with data URI
                            $('#camera-preview').attr('src', response.image_data);
                            lastUpdateTimestamp = response.timestamp;
                            consecutiveFailures = 0;
                            $('#preview-status').text('Preview refreshes every 5 seconds');
                            
                            // Ensure auto-refresh is enabled
                            previewRefreshEnabled = true;
                            $('#preview-toggle').prop('checked', true);
                        } else {
                            // Show the fallback image if provided
                            if (response.image_data) {
                                $('#camera-preview').attr('src', response.image_data);
                            }
                            handleImageLoadFailure(isManualRefresh, response.message || 'Failed to load preview');
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Try the simple method next time
                        currentPreviewMethod = 'simple';
                        handleImageLoadFailure(isManualRefresh, 'Network error: ' + textStatus);
                    },
                    complete: function() {
                        $('#preview-loader').hide();
                        
                        if (isManualRefresh) {
                            $('#refresh-preview').prop('disabled', false)
                                .html('<i class="fas fa-sync"></i> Refresh Now');
                        }
                        
                        isRefreshing = false;
                    }
                });
            } else {
                // Simple method - direct image URL
                const img = new Image();
                
                img.onload = function() {
                    $('#camera-preview').attr('src', this.src);
                    consecutiveFailures = 0;
                    $('#preview-status').text('Preview refreshes every 5 seconds');
                    $('#preview-loader').hide();
                    
                    if (isManualRefresh) {
                        $('#refresh-preview').prop('disabled', false)
                            .html('<i class="fas fa-sync"></i> Refresh Now');
                    }
                    
                    isRefreshing = false;
                };
                
                img.onerror = function() {
                    // Switch back to JSON method
                    currentPreviewMethod = 'json';
                    handleImageLoadFailure(isManualRefresh, 'Failed to load image directly');
                    $('#preview-loader').hide();
                    
                    if (isManualRefresh) {
                        $('#refresh-preview').prop('disabled', false)
                            .html('<i class="fas fa-sync"></i> Refresh Now');
                    }
                    
                    isRefreshing = false;
                };
                
                img.src = requestUrl + '?' + $.param(requestData);
            }
        }
    
        function handleImageLoadFailure(isManualRefresh, message) {
            consecutiveFailures++;
            
            if (isManualRefresh) {
                $('#preview-status').html('<span class="text-danger">' + message + '</span>');
            } else if (consecutiveFailures >= maxFailures) {
                // Too many failures, disable auto-refresh
                previewRefreshEnabled = false;
                $('#preview-toggle').prop('checked', false);
                $('#preview-status').html('<span class="text-danger">Auto-refresh disabled due to errors</span>');
            }
        }
        
        // Handle image loading errors on main image
        $('#camera-preview').on('error', function() {
            $(this).attr('src', "{{ asset('images/camera-offline.jpg') }}");
        });
        
        // Clean up on page unload
        $(window).on('beforeunload', function() {
            if (previewRefreshInterval) {
                clearInterval(previewRefreshInterval);
            }
        });
    });
</script>
@endsection