@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Real-Time Sensor Map</h1>
            <p class="text-gray-600 mt-1">Monitor all gas sensors in real-time</p>
        </div>
        <div class="flex items-center space-x-4">
            <!-- Auto-refresh toggle -->
            <div class="flex items-center">
                <input type="checkbox" id="autoRefresh" checked class="mr-2">
                <label for="autoRefresh" class="text-sm text-gray-700">Auto-refresh (30s)</label>
            </div>
            <!-- Last updated -->
            <div class="text-sm text-gray-500">
                Last updated: <span id="lastUpdated">Loading...</span>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-2 bg-blue-100 rounded-lg">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Total Sensors</p>
                    <p class="text-2xl font-bold text-gray-900" id="totalSensors">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-2 bg-green-100 rounded-lg">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Online</p>
                    <p class="text-2xl font-bold text-green-600" id="onlineSensors">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-2 bg-red-100 rounded-lg">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Critical Alerts</p>
                    <p class="text-2xl font-bold text-red-600" id="criticalSensors">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-2 bg-orange-100 rounded-lg">
                    <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Low Gas</p>
                    <p class="text-2xl font-bold text-orange-600" id="lowGasSensors">-</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Map Container -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-900">Sensor Locations</h2>
                <div class="flex items-center space-x-4">
                    <!-- Legend -->
                    <div class="flex items-center space-x-4 text-sm">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                            <span>Online</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                            <span>Critical</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div>
                            <span>Warning</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-gray-500 rounded-full mr-2"></div>
                            <span>Offline</span>
                        </div>
                    </div>
                    <!-- Refresh button -->
                    <button id="refreshBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
                        <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        Refresh
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Map -->
        <div id="map" style="height: 600px; width: 100%;"></div>
    </div>

    <!-- Loading overlay -->
    <div id="loadingOverlay" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 flex items-center">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span>Loading sensor data...</span>
        </div>
    </div>
</div>

<!-- Sensor Detail Modal -->
<div id="sensorModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-900" id="modalTitle">Sensor Details</h3>
                <button id="closeModal" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div id="modalContent">
                <!-- Dynamic content will be loaded here -->
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<!-- Google Maps will be loaded from the main layout -->

<script>
let map;
let markers = {};
let autoRefreshInterval;
let isLoading = false;
let infoWindow;

// Initialize Google Map
function initMap() {
    // Default center (Singapore coordinates as default)
    const defaultCenter = { lat: 1.3521, lng: 103.8198 };
    
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: defaultCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
            {
                featureType: 'poi',
                elementType: 'labels',
                stylers: [{ visibility: 'off' }]
            }
        ]
    });
    
    // Initialize info window
    infoWindow = new google.maps.InfoWindow();
    
    // Load initial sensor data
    loadSensorData();
    
    // Setup auto-refresh
    setupAutoRefresh();
}

// Load sensor data from API
async function loadSensorData() {
    if (isLoading) return;
    
    isLoading = true;
    showLoading();
    
    try {
        const response = await fetch('{{ route("map.sensors") }}');
        const data = await response.json();
        
        updateStatistics(data);
        updateMarkers(data.sensors);
        updateLastUpdated();
        
    } catch (error) {
        console.error('Error loading sensor data:', error);
        alert('Error loading sensor data. Please try again.');
    } finally {
        isLoading = false;
        hideLoading();
    }
}

// Update statistics cards
function updateStatistics(data) {
    document.getElementById('totalSensors').textContent = data.total_sensors;
    document.getElementById('onlineSensors').textContent = data.online_sensors;
    document.getElementById('criticalSensors').textContent = data.critical_sensors;
    document.getElementById('lowGasSensors').textContent = data.low_gas_sensors;
}

// Update map markers
function updateMarkers(sensors) {
    // Clear existing markers
    Object.values(markers).forEach(marker => marker.setMap(null));
    markers = {};
    
    const bounds = new google.maps.LatLngBounds();
    let hasValidMarkers = false;
    
    // Add new markers
    sensors.forEach(sensor => {
        if (sensor.latitude && sensor.longitude) {
            const position = { lat: parseFloat(sensor.latitude), lng: parseFloat(sensor.longitude) };
            
            // Create custom marker icon based on status
            const markerIcon = {
                path: google.maps.SymbolPath.CIRCLE,
                fillColor: sensor.status_color,
                fillOpacity: 0.8,
                strokeColor: '#ffffff',
                strokeWeight: 2,
                scale: 8
            };
            
            const marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: markerIcon,
                title: sensor.location_name
            });
            
            // Create info window content
            const infoContent = `
                <div class="p-3 min-w-64">
                    <h4 class="font-bold text-lg mb-2 text-gray-800">${sensor.location_name}</h4>
                    <div class="space-y-1 text-sm">
                        <p><strong>Status:</strong> <span class="capitalize">${sensor.status.replace('_', ' ')}</span></p>
                        <p><strong>Gas Level:</strong> ${sensor.gas_level}%</p>
                        <p><strong>Battery:</strong> ${sensor.battery_level}%</p>
                        <p><strong>Company:</strong> ${sensor.gas_company}</p>
                        <p><strong>User:</strong> ${sensor.user_name}</p>
                        <p><strong>Last Ping:</strong> ${sensor.last_ping_human}</p>
                        ${sensor.alert_count > 0 ? `<p class="text-red-600"><strong>Active Alerts:</strong> ${sensor.alert_count}</p>` : ''}
                    </div>
                    <button onclick="showSensorDetails(${sensor.id})" class="mt-3 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded text-xs">
                        View Details
                    </button>
                </div>
            `;
            
            // Add click listener for info window
            marker.addListener('click', () => {
                infoWindow.setContent(infoContent);
                infoWindow.open(map, marker);
            });
            
            markers[sensor.id] = marker;
            bounds.extend(position);
            hasValidMarkers = true;
        }
    });
    
    // Auto-fit map to show all markers if there are any
    if (hasValidMarkers && sensors.length > 0) {
        map.fitBounds(bounds);
        
        // Ensure minimum zoom level
        google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
            if (map.getZoom() > 15) {
                map.setZoom(15);
            }
        });
    }
}

// Show sensor details in modal
async function showSensorDetails(sensorId) {
    try {
        const response = await fetch(`{{ url('/api/map/sensors') }}/${sensorId}`);
        const sensor = await response.json();
        
        const modalContent = `
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h4 class="font-semibold mb-2">Basic Information</h4>
                    <div class="space-y-1 text-sm">
                        <p><strong>Device UUID:</strong> ${sensor.device_uuid}</p>
                        <p><strong>Location:</strong> ${sensor.location_name}</p>
                        <p><strong>Address:</strong> ${sensor.address}</p>
                        <p><strong>Gas Company:</strong> ${sensor.gas_company}</p>
                        <p><strong>User:</strong> ${sensor.user_name}</p>
                        <p><strong>Phone:</strong> ${sensor.user_phone || 'N/A'}</p>
                        <p><strong>Firmware:</strong> ${sensor.firmware_version}</p>
                    </div>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">Current Status</h4>
                    <div class="space-y-1 text-sm">
                        <p><strong>Gas Level:</strong> ${sensor.gas_level}%</p>
                        <p><strong>Battery Level:</strong> ${sensor.battery_level}%</p>
                        <p><strong>Status:</strong> ${sensor.status}</p>
                        <p><strong>Active:</strong> ${sensor.is_active ? 'Yes' : 'No'}</p>
                        <p><strong>Last Ping:</strong> ${sensor.last_ping ? new Date(sensor.last_ping).toLocaleString() : 'Never'}</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <h4 class="font-semibold mb-2">Recent Sensor Logs</h4>
                <div class="max-h-40 overflow-y-auto">
                    <table class="min-w-full text-xs">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-2 py-1 text-left">Time</th>
                                <th class="px-2 py-1 text-left">Gas %</th>
                                <th class="px-2 py-1 text-left">Battery %</th>
                                <th class="px-2 py-1 text-left">Temp °C</th>
                                <th class="px-2 py-1 text-left">Leak</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${sensor.recent_logs.map(log => `
                                <tr class="border-b">
                                    <td class="px-2 py-1">${log.logged_at_human}</td>
                                    <td class="px-2 py-1">${log.gas_level}%</td>
                                    <td class="px-2 py-1">${log.battery_level}%</td>
                                    <td class="px-2 py-1">${log.temperature || 'N/A'}</td>
                                    <td class="px-2 py-1">${log.is_leak_detected ? '⚠️' : '✅'}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
            
            ${sensor.recent_alerts.length > 0 ? `
                <div class="mt-4">
                    <h4 class="font-semibold mb-2">Recent Alerts</h4>
                    <div class="max-h-32 overflow-y-auto space-y-1">
                        ${sensor.recent_alerts.map(alert => `
                            <div class="p-2 bg-red-50 border border-red-200 rounded text-xs">
                                <p class="font-medium">${alert.type.replace('_', ' ').toUpperCase()}</p>
                                <p>${alert.message}</p>
                                <p class="text-gray-500">${alert.created_at_human}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>
            ` : ''}
        `;
        
        document.getElementById('modalTitle').textContent = `${sensor.location_name} - Sensor Details`;
        document.getElementById('modalContent').innerHTML = modalContent;
        document.getElementById('sensorModal').classList.remove('hidden');
        
    } catch (error) {
        console.error('Error loading sensor details:', error);
        alert('Error loading sensor details. Please try again.');
    }
}

// Setup auto-refresh
function setupAutoRefresh() {
    const autoRefreshCheckbox = document.getElementById('autoRefresh');
    
    function startAutoRefresh() {
        if (autoRefreshInterval) clearInterval(autoRefreshInterval);
        autoRefreshInterval = setInterval(loadSensorData, 30000); // 30 seconds
    }
    
    function stopAutoRefresh() {
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    }
    
    autoRefreshCheckbox.addEventListener('change', function() {
        if (this.checked) {
            startAutoRefresh();
        } else {
            stopAutoRefresh();
        }
    });
    
    // Start auto-refresh if checkbox is checked
    if (autoRefreshCheckbox.checked) {
        startAutoRefresh();
    }
}

// Update last updated timestamp
function updateLastUpdated() {
    document.getElementById('lastUpdated').textContent = new Date().toLocaleTimeString();
}

// Show/hide loading overlay
function showLoading() {
    document.getElementById('loadingOverlay').classList.remove('hidden');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.add('hidden');
}

// Event listeners
document.getElementById('refreshBtn').addEventListener('click', loadSensorData);
document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('sensorModal').classList.add('hidden');
});

// Close modal when clicking outside
document.getElementById('sensorModal').addEventListener('click', function(e) {
    if (e.target === this) {
        this.classList.add('hidden');
    }
});

// Initialize when page loads and Google Maps is ready
document.addEventListener('DOMContentLoaded', function() {
    // Wait for Google Maps API to load
    if (window.googleMapsLoaded) {
        window.googleMapsLoaded.then(() => {
            initMap();
        }).catch((error) => {
            console.error('Failed to load Google Maps:', error);
            document.getElementById('map').innerHTML = `
                <div class="flex items-center justify-center h-full bg-gray-50 text-gray-700">
                    <div class="text-center p-8">
                        <div class="mb-4">
                            <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-4"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">Google Maps API Key Required</h3>
                        <p class="text-sm text-gray-600 mb-4">To display the sensor map, please configure your Google Maps API key.</p>
                        <div class="text-xs text-left bg-gray-100 p-3 rounded border">
                            <p class="font-semibold mb-2">Setup Instructions:</p>
                            <ol class="list-decimal list-inside space-y-1">
                                <li>Get a Google Maps API key from <a href="https://console.cloud.google.com/" target="_blank" class="text-blue-600 hover:underline">Google Cloud Console</a></li>
                                <li>Enable the Maps JavaScript API</li>
                                <li>Add GOOGLE_MAPS_API_KEY=your_key_here to your .env file</li>
                                <li>Restart your Laravel server</li>
                            </ol>
                        </div>
                    </div>
                </div>
            `;
        });
    } else {
        // Fallback if googleMapsLoaded is not available
        setTimeout(() => {
            if (typeof google !== 'undefined' && google.maps) {
                initMap();
            } else {
                document.getElementById('map').innerHTML = `
                    <div class="flex items-center justify-center h-full bg-gray-50 text-gray-700">
                        <div class="text-center p-8">
                            <div class="mb-4">
                                <i class="fas fa-exclamation-triangle text-4xl text-orange-400 mb-4"></i>
                            </div>
                            <h3 class="text-lg font-semibold mb-2">Google Maps Not Available</h3>
                            <p class="text-sm text-gray-600">Please check your Google Maps API configuration and try refreshing the page.</p>
                        </div>
                    </div>
                `;
            }
        }, 2000);
    }
});
</script>
@endpush