@extends('layouts.super-admin')

@section('title', 'Dashboard')
@section('page-title', 'Super Admin Dashboard')
@section('page-description', 'Real-time monitoring seluruh sistem deteksi gempa')

@section('content')
<div class="dashboard-content">
    <!-- Stats Cards -->
    <div class="stats-grid" id="statsGrid">
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Total Devices</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                        <line x1="8" y1="2" x2="8" y2="22"/>
                        <line x1="16" y1="2" x2="16" y2="22"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="totalDevices">0</div>
            <div class="stat-change positive" id="onlineDevices">0 online</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Earthquakes Today</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="earthquakesToday">0</div>
            <div class="stat-change" id="earthquakeTrend">Last 24 hours</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">System Health</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 8v4l3 3"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="systemHealth">98%</div>
            <div class="stat-change positive">All systems operational</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Active Alerts</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="activeAlerts">0</div>
            <div class="stat-change positive" id="alertStatus">No alerts</div>
        </div>
    </div>

    <!-- Welcome Message -->
    <div class="welcome-message" id="welcomeMessage" style="display: none;">
        <div class="welcome-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#dc2626">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
            </svg>
        </div>
        <div>
            <h2>Welcome, {{ auth()->user()->name }}!</h2>
            <p>Your dashboard is ready. As you add devices and collect earthquake data, statistics will appear here.</p>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h3>Earthquake Trend (24 Hours)</h3>
            </div>
            <canvas id="earthquakeTrendChart" height="200"></canvas>
        </div>
        <div class="chart-card">
            <div class="chart-header">
                <h3>System Performance</h3>
            </div>
            <canvas id="systemPerformanceChart" height="200"></canvas>
        </div>
    </div>

    <!-- Map Section -->
    <div class="map-section">
        <div class="map-header">
            <strong>Live Earthquake Map</strong>
            <span>Real-time seismic activity</span>
        </div>
        <div id="earthquakeMap"></div>
    </div>

    <!-- Devices Section -->
    <div class="devices-section">
        <div class="section-header">
            <h3>Connected Devices</h3>
            <span class="device-count" id="deviceCount">0 devices</span>
        </div>
        <div class="devices-grid" id="devicesGrid">
            <div class="empty-state">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ca3af">
                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
                <p>No devices connected yet</p>
                <a href="{{ route('devices.create') }}" class="btn-add">+ Add Your First Device</a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let map = null;
    let earthquakeMarkers = [];
    let charts = {};

    // Initialize Map
    function initMap() {
        map = L.map('earthquakeMap').setView([-2.5, 118.0], 5);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a>',
            subdomains: 'abcd',
            maxZoom: 19
        }).addTo(map);
    }

    // Initialize Charts
    function initCharts() {
        charts.earthquakeTrend = new Chart(document.getElementById('earthquakeTrendChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Earthquakes per hour',
                    data: [],
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220,38,38,0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: { responsive: true, maintainAspectRatio: true }
        });

        charts.systemPerformance = new Chart(document.getElementById('systemPerformanceChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'CPU Usage (%)',
                        data: [],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59,130,246,0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: 'Memory Usage (%)',
                        data: [],
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16,185,129,0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: { responsive: true, maintainAspectRatio: true }
        });
    }

    // Fetch Data
    async function fetchData() {
        try {
            const response = await fetch('/super-admin/api/dashboard-data');
            const data = await response.json();
            
            if (data.success) {
                updateStats(data.stats);
                updateDevices(data.devices);
                updateChartsData(data);
                updateMapMarkers(data.recent_earthquakes);
                updateWelcomeMessage(data);
            }
        } catch (error) {
            console.error('Error fetching data:', error);
            loadMockData();
        }
    }

    function updateStats(stats) {
        document.getElementById('totalDevices').innerText = stats.total_devices || 0;
        document.getElementById('onlineDevices').innerHTML = `${stats.online_devices || 0} online`;
        document.getElementById('earthquakesToday').innerText = stats.earthquakes_today || 0;
        document.getElementById('systemHealth').innerText = stats.system_health || 98;
        document.getElementById('activeAlerts').innerText = stats.active_alerts || 0;
        
        const alertStatus = document.getElementById('alertStatus');
        if (stats.active_alerts > 0) {
            alertStatus.innerHTML = 'Requires attention';
            alertStatus.className = 'stat-change negative';
        } else {
            alertStatus.innerHTML = 'No alerts';
            alertStatus.className = 'stat-change positive';
        }
    }

    function updateDevices(devices) {
        const grid = document.getElementById('devicesGrid');
        const countSpan = document.getElementById('deviceCount');
        
        if (!devices || devices.length === 0) {
            grid.innerHTML = `<div class="empty-state">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ca3af">
                    <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                    <line x1="8" y1="2" x2="8" y2="22"/>
                    <line x1="16" y1="2" x2="16" y2="22"/>
                </svg>
                <p>No devices connected yet</p>
                <a href="{{ route('devices.create') }}" class="btn-add">+ Add Your First Device</a>
            </div>`;
            countSpan.innerText = '0 devices';
            return;
        }
        
        countSpan.innerText = `${devices.length} devices`;
        grid.innerHTML = devices.map(device => `
            <div class="device-card ${device.health_status === 'warning' ? 'warning' : (device.health_status === 'critical' ? 'critical' : '')}">
                <div class="device-header">
                    <div class="device-name">
                        <div class="device-status ${device.status}"></div>
                        ${escapeHtml(device.name)}
                    </div>
                    <span class="device-id">${escapeHtml(device.device_id)}</span>
                </div>
                <div class="device-stats">
                    <div class="device-stat">
                        <div class="device-stat-label">Battery</div>
                        <div class="device-stat-value">${device.battery_level || 0}%</div>
                        <div class="battery-bar">
                            <div class="battery-fill ${(device.battery_level || 0) < 20 ? 'low' : ((device.battery_level || 0) < 50 ? 'medium' : '')}" 
                                 style="width: ${device.battery_level || 0}%"></div>
                        </div>
                    </div>
                    <div class="device-stat">
                        <div class="device-stat-label">Temp</div>
                        <div class="device-stat-value">${device.temperature || '--'}°C</div>
                    </div>
                    <div class="device-stat">
                        <div class="device-stat-label">Signal</div>
                        <div class="device-stat-value">${device.signal_strength || '--'} dBm</div>
                    </div>
                    <div class="device-stat">
                        <div class="device-stat-label">Last Data</div>
                        <div class="device-stat-value">${device.last_data || 'Never'}</div>
                    </div>
                </div>
                <div class="device-actions">
                    <button class="btn-action btn-power" onclick="controlDevice('${device.id}', 'power')">
                        ${device.status === 'online' ? 'Power Off' : 'Power On'}
                    </button>
                    <button class="btn-action" onclick="controlDevice('${device.id}', 'restart')">Restart</button>
                </div>
            </div>
        `).join('');
    }

    function updateMapMarkers(earthquakes) {
        if (!map) return;
        
        earthquakeMarkers.forEach(marker => map.removeLayer(marker));
        earthquakeMarkers = [];

        if (!earthquakes || earthquakes.length === 0) return;

        earthquakes.forEach(eq => {
            const color = eq.magnitude >= 5 ? '#dc2626' : (eq.magnitude >= 3 ? '#f59e0b' : '#10b981');
            const size = eq.magnitude >= 5 ? 24 : (eq.magnitude >= 3 ? 16 : 10);
            
            const marker = L.circleMarker([eq.lat, eq.lng], {
                radius: size,
                fillColor: color,
                color: 'white',
                weight: 2,
                opacity: 1,
                fillOpacity: 0.7
            }).addTo(map);
            
            marker.bindPopup(`
                <strong>${escapeHtml(eq.location)}</strong><br>
                Magnitude: ${eq.magnitude}<br>
                Time: ${new Date(eq.time).toLocaleString()}<br>
                Device: ${escapeHtml(eq.device)}
            `);
            
            earthquakeMarkers.push(marker);
        });
    }

    function updateChartsData(data) {
        if (charts.earthquakeTrend && data.earthquake_trend) {
            charts.earthquakeTrend.data.labels = data.earthquake_trend.labels;
            charts.earthquakeTrend.data.datasets[0].data = data.earthquake_trend.values;
            charts.earthquakeTrend.update();
        }
        
        if (charts.systemPerformance && data.system_metrics) {
            charts.systemPerformance.data.labels = data.system_metrics.labels;
            charts.systemPerformance.data.datasets[0].data = data.system_metrics.cpu;
            charts.systemPerformance.data.datasets[1].data = data.system_metrics.memory;
            charts.systemPerformance.update();
        }
    }

    function updateWelcomeMessage(data) {
        const welcomeMsg = document.getElementById('welcomeMessage');
        if (data.stats && data.stats.total_devices === 0 && data.stats.earthquakes_today === 0) {
            welcomeMsg.style.display = 'flex';
        } else {
            welcomeMsg.style.display = 'none';
        }
    }

    function controlDevice(deviceId, action) {
        fetch(`/super-admin/devices/${deviceId}/control`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ action: action })
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  alert(`Command sent to device`);
                  fetchData();
              }
          });
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }

    function loadMockData() {
        updateStats({
            total_devices: 3,
            online_devices: 2,
            earthquakes_today: 5,
            system_health: 98,
            active_alerts: 0
        });
        updateDevices([
            { id: 1, name: 'Sensor Bali', device_id: 'SNS_BALI_01', status: 'online', battery_level: 85, temperature: 42, signal_strength: -65, last_data: '2 minutes ago' },
            { id: 2, name: 'Sensor Jakarta', device_id: 'SNS_JKT_01', status: 'online', battery_level: 45, temperature: 55, signal_strength: -72, last_data: '5 minutes ago' }
        ]);
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
        initMap();
        initCharts();
        fetchData();
        setInterval(fetchData, 30000);
    });
</script>

<style>
.dashboard-content {
    max-width: 1400px;
    margin: 0 auto;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
    color: #dc2626;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-change {
    font-size: 0.7rem;
}

.stat-change.positive { color: #10b981; }
.stat-change.negative { color: #ef4444; }

/* Welcome Message */
.welcome-message {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.welcome-icon {
    width: 56px;
    height: 56px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-message h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.welcome-message p {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Charts Row */
.charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-header {
    margin-bottom: 0.75rem;
}

.chart-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Map Section */
.map-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.map-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.map-header strong { font-size: 0.875rem; }
.map-header span { font-size: 0.7rem; color: #64748b; }

#earthquakeMap {
    height: 350px;
    width: 100%;
}

/* Devices Section */
.devices-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.section-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h3 { font-size: 0.875rem; font-weight: 600; }
.device-count { font-size: 0.7rem; color: #64748b; }

.devices-grid {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.device-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s;
}

.device-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #fecaca;
}

.device-card.warning { border-left: 3px solid #f59e0b; }
.device-card.critical { border-left: 3px solid #ef4444; }

.device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.device-name {
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.device-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.device-status.online { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.device-status.offline { background: #ef4444; }
.device-status.pending { background: #f59e0b; }

.device-id {
    font-size: 0.6rem;
    color: #6b7280;
}

.device-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.device-stat { text-align: center; }
.device-stat-label { font-size: 0.6rem; color: #64748b; }
.device-stat-value { font-weight: 600; font-size: 0.75rem; }

.battery-bar {
    background: #e5e7eb;
    border-radius: 4px;
    height: 4px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.battery-fill {
    background: #10b981;
    height: 100%;
    transition: width 0.3s;
}

.battery-fill.low { background: #ef4444; }
.battery-fill.medium { background: #f59e0b; }

.device-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-action {
    flex: 1;
    padding: 0.35rem;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.2s;
}

.btn-power { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.btn-power:hover { background: #dc2626; color: white; }
.btn-action:not(.btn-power):hover { background: #f3f4f6; }

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

.empty-state svg { margin-bottom: 0.5rem; }
.empty-state p { font-size: 0.75rem; margin-bottom: 1rem; }

.btn-add {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #dc2626;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
    .welcome-message { flex-direction: column; text-align: center; }
}
</style>
@endsection