@extends('layouts.super-admin')

@section('title', 'Device Analytics')
@section('page-title', 'Device Analytics')
@section('page-description', 'Analisis performa dan kesehatan semua device')

@section('content')
<div class="device-analytics">
    <!-- Summary Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <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>
            </div>
            <div class="stat-number" id="totalDevices">0</div>
            <div class="stat-label">Total Devices</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4l3 3"/>
                </svg>
            </div>
            <div class="stat-number" id="onlineDevices">0</div>
            <div class="stat-label">Online</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                </svg>
            </div>
            <div class="stat-number" id="avgBattery">0%</div>
            <div class="stat-label">Avg Battery</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                </svg>
            </div>
            <div class="stat-number" id="offlineDevices">0</div>
            <div class="stat-label">Offline</div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <h3>Device Status Distribution</h3>
            <canvas id="statusChart" height="200"></canvas>
        </div>
        <div class="chart-card">
            <h3>Device Type Distribution</h3>
            <canvas id="typeChart" height="200"></canvas>
        </div>
    </div>

    <!-- Battery Analytics -->
    <div class="card-section">
        <div class="card-header">
            <h3>Battery Level Distribution</h3>
            <div class="battery-legend">
                <span class="legend-badge critical">Critical (&lt;20%)</span>
                <span class="legend-badge low">Low (20-50%)</span>
                <span class="legend-badge good">Good (50-80%)</span>
                <span class="legend-badge excellent">Excellent (&gt;80%)</span>
            </div>
        </div>
        <div class="battery-stats">
            <canvas id="batteryChart" height="250"></canvas>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="card-section">
        <div class="card-header">
            <h3>Performance Metrics</h3>
        </div>
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <div class="metric-info">
                    <div class="metric-value" id="avgLatency">0 ms</div>
                    <div class="metric-label">Average Latency</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M20 12V8H4v4M12 4v4"/>
                    </svg>
                </div>
                <div class="metric-info">
                    <div class="metric-value" id="dataPerDay">0 MB</div>
                    <div class="metric-label">Data Transferred/Day</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M18 20V10M12 20V4M6 20v-6"/>
                    </svg>
                </div>
                <div class="metric-info">
                    <div class="metric-value" id="successRate">0%</div>
                    <div class="metric-label">Success Rate</div>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M2 20L22 20" stroke="currentColor"/>
                        <path d="M4 16L7 10L10 13L15 5L18 9L20 4" stroke="currentColor"/>
                    </svg>
                </div>
                <div class="metric-info">
                    <div class="metric-value" id="avgReadings">0</div>
                    <div class="metric-label">Avg Readings/Day</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Devices Table -->
    <div class="card-section">
        <div class="card-header">
            <h3>Device Health Status</h3>
            <div class="search-box">
                <input type="text" id="searchDevice" placeholder="Search device..." class="search-input">
            </div>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Device</th>
                        <th>Status</th>
                        <th>Battery</th>
                        <th>Temperature</th>
                        <th>Signal</th>
                        <th>Last Data</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="devicesTableBody">
                    <tr><td colspan="7" class="text-center">Loading devices...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let statusChart, typeChart, batteryChart;

async function loadDeviceAnalytics() {
    try {
        const response = await fetch('/super-admin/api/devices/analytics');
        const data = await response.json();
        
        if (data.success) {
            updateSummaryCards(data.summary);
            updateCharts(data.charts);
            updateMetrics(data.metrics);
            updateDevicesTable(data.devices);
        }
    } catch (error) {
        console.error('Error loading device analytics:', error);
        loadMockData(); // Fallback to mock data
    }
}

function updateSummaryCards(summary) {
    document.getElementById('totalDevices').innerText = summary.total || 0;
    document.getElementById('onlineDevices').innerText = summary.online || 0;
    document.getElementById('offlineDevices').innerText = summary.offline || 0;
    document.getElementById('avgBattery').innerText = (summary.avg_battery || 0) + '%';
}

function updateCharts(charts) {
    // Status Chart
    if (statusChart) statusChart.destroy();
    statusChart = new Chart(document.getElementById('statusChart'), {
        type: 'doughnut',
        data: {
            labels: ['Online', 'Offline', 'Maintenance', 'Pending'],
            datasets: [{
                data: [charts.status?.online || 0, charts.status?.offline || 0, 
                       charts.status?.maintenance || 0, charts.status?.pending || 0],
                backgroundColor: ['#10b981', '#ef4444', '#f59e0b', '#6b7280'],
                borderWidth: 0
            }]
        },
        options: { responsive: true, maintainAspectRatio: true }
    });

    // Type Chart
    if (typeChart) typeChart.destroy();
    typeChart = new Chart(document.getElementById('typeChart'), {
        type: 'pie',
        data: {
            labels: ['Sensor', 'Gateway', 'Actuator'],
            datasets: [{
                data: [charts.type?.sensor || 0, charts.type?.gateway || 0, charts.type?.actuator || 0],
                backgroundColor: ['#3b82f6', '#8b5cf6', '#ec489a'],
                borderWidth: 0
            }]
        },
        options: { responsive: true, maintainAspectRatio: true }
    });

    // Battery Chart
    if (batteryChart) batteryChart.destroy();
    batteryChart = new Chart(document.getElementById('batteryChart'), {
        type: 'bar',
        data: {
            labels: ['Critical (<20%)', 'Low (20-50%)', 'Good (50-80%)', 'Excellent (>80%)'],
            datasets: [{
                label: 'Number of Devices',
                data: [charts.battery?.critical || 0, charts.battery?.low || 0,
                       charts.battery?.good || 0, charts.battery?.excellent || 0],
                backgroundColor: ['#ef4444', '#f59e0b', '#10b981', '#3b82f6'],
                borderRadius: 8
            }]
        },
        options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'bottom' } } }
    });
}

function updateMetrics(metrics) {
    document.getElementById('avgLatency').innerText = (metrics.avg_latency || 0) + ' ms';
    document.getElementById('dataPerDay').innerText = (metrics.data_per_day || 0) + ' MB';
    document.getElementById('successRate').innerText = (metrics.success_rate || 0) + '%';
    document.getElementById('avgReadings').innerText = metrics.avg_readings || 0;
}

function updateDevicesTable(devices) {
    const tbody = document.getElementById('devicesTableBody');
    if (!devices || devices.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center">No devices found</td></tr>';
        return;
    }

    tbody.innerHTML = devices.map(device => `
        <tr>
            <td><strong>${escapeHtml(device.name)}</strong><br><small>${escapeHtml(device.device_id)}</small></td>
            <td><span class="status-badge status-${device.status}">${capitalize(device.status)}</span></td>
            <td>
                <div class="battery-cell">
                    <div class="battery-bar">
                        <div class="battery-fill battery-${getBatteryClass(device.battery_level)}" 
                             style="width: ${device.battery_level || 0}%"></div>
                    </div>
                    <span>${device.battery_level || 0}%</span>
                </div>
            </td>
            <td class="${(device.temperature || 0) > 60 ? 'temp-warning' : ''}">
                ${device.temperature || '--'}°C
            </td>
            <td class="${(device.signal_strength || 0) < -80 ? 'signal-warning' : ''}">
                ${device.signal_strength || '--'} dBm
            </td>
            <td>${device.last_data || 'Never'}</td>
            <td>
                <button class="btn-icon" onclick="viewDevice('${device.id}')" title="View">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                        <circle cx="12" cy="12" r="3"/>
                    </svg>
                </button>
            </td>
        </tr>
    `).join('');
}

function getBatteryClass(level) {
    if (!level) return 'critical';
    if (level < 20) return 'critical';
    if (level < 50) return 'low';
    if (level < 80) return 'good';
    return 'excellent';
}

function capitalize(str) {
    return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
}

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 viewDevice(id) {
    window.location.href = `/super-admin/devices/${id}`;
}

// Filter devices
document.getElementById('searchDevice')?.addEventListener('keyup', function() {
    const search = this.value.toLowerCase();
    const rows = document.querySelectorAll('#devicesTableBody tr');
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(search) ? '' : 'none';
    });
});

// Load mock data for testing
function loadMockData() {
    updateSummaryCards({ total: 12, online: 8, offline: 3, avg_battery: 65 });
    updateCharts({
        status: { online: 8, offline: 3, maintenance: 1, pending: 0 },
        type: { sensor: 9, gateway: 2, actuator: 1 },
        battery: { critical: 2, low: 3, good: 4, excellent: 3 }
    });
    updateMetrics({ avg_latency: 124, data_per_day: 45.6, success_rate: 98.5, avg_readings: 342 });
    updateDevicesTable([
        { 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' },
        { id: 3, name: 'Gateway Pusat', device_id: 'GTW_001', status: 'offline', battery_level: 12, temperature: 35, signal_strength: -95, last_data: '2 hours ago' },
    ]);
}

// Initialize
document.addEventListener('DOMContentLoaded', loadDeviceAnalytics);
</script>

<style>
.device-analytics { max-width: 1400px; margin: 0 auto; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: #dc2626;
}
.stat-number { font-size: 1.875rem; font-weight: 700; color: #1a1a1a; }
.stat-label { font-size: 0.875rem; color: #6b7280; }

.charts-row {
    display: grid;
    grid-template-columns: 1fr 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-card h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; }

.card-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.battery-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.legend-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 20px; }
.legend-badge.critical { background: #fef2f2; color: #dc2626; }
.legend-badge.low { background: #fffbeb; color: #f59e0b; }
.legend-badge.good { background: #d1fae5; color: #10b981; }
.legend-badge.excellent { background: #eff6ff; color: #3b82f6; }

.battery-stats { padding: 1rem; }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
}
.metric-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
}
.metric-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}
.metric-value { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.metric-label { font-size: 0.7rem; color: #6b7280; }

.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.data-table th { background: #f9fafb; font-weight: 600; font-size: 0.75rem; color: #6b7280; }

.status-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; }
.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-pending { background: #fed7aa; color: #92400e; }
.status-maintenance { background: #e0e7ff; color: #3730a3; }

.battery-cell { display: flex; align-items: center; gap: 0.5rem; }
.battery-bar {
    width: 60px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.battery-fill { height: 100%; border-radius: 3px; }
.battery-critical { background: #ef4444; }
.battery-low { background: #f59e0b; }
.battery-good { background: #10b981; }
.battery-excellent { background: #3b82f6; }

.temp-warning, .signal-warning { color: #ef4444; font-weight: 600; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #6b7280;
}
.btn-icon:hover { color: #dc2626; }

.search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 200px;
}
.text-center { text-align: center; }

@media (max-width: 1024px) {
    .stats-grid, .charts-row, .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stats-grid, .charts-row, .metrics-grid { grid-template-columns: 1fr; }
}
</style>
@endsection