@extends('layouts.app')

@section('title', 'User Dashboard')

@section('content')
<div class="user-dashboard">
    <div class="page-header">
        <div>
            <h1>User Dashboard</h1>
            <p>Welcome back, {{ auth()->user()->name }}</p>
        </div>
        <div class="header-date">
            <svg width="16" height="16" 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>
            <span>{{ now()->format('l, d F Y') }}</span>
        </div>
    </div>

    <!-- Statistics 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" 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>
            </div>
            <div class="stat-number" id="statTotalDevices">Loading...</div>
            <div class="stat-label">My 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" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4l3 3"/>
                    <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                </svg>
            </div>
            <div class="stat-number" id="statActiveDevices">Loading...</div>
            <div class="stat-label">Active 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" stroke-width="1.5">
                    <path d="M2 20L22 20" stroke="currentColor"/>
                    <path d="M4 16L7 10L10 13L15 5L18 9L20 4" stroke="currentColor"/>
                </svg>
            </div>
            <div class="stat-number" id="statTotalReadings">Loading...</div>
            <div class="stat-label">Total Readings</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" 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>
            </div>
            <div class="stat-number" id="statLatestMagnitude">--</div>
            <div class="stat-label">Latest Magnitude</div>
        </div>
    </div>

    <!-- Recent Earthquakes Section -->
    <div class="card-section">
        <div class="card-header">
            <div class="header-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
                <h3>Recent Earthquakes</h3>
            </div>
            <a href="{{ route('research.gempa') }}" class="view-link">View All →</a>
        </div>
        
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Magnitude</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="latestGempaBody">
                    <tr><td colspan="4" class="text-center">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- My Devices Section -->
    <div class="card-section">
        <div class="card-header">
            <div class="header-title">
                <svg width="20" height="20" 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>
                <h3>My Devices</h3>
            </div>
            <a href="{{ route('devices.create') }}" class="btn-add">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <line x1="12" y1="5" x2="12" y2="19"/>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Add Device
            </a>
        </div>
        
        <div class="devices-grid" id="devicesGrid">
            @forelse(auth()->user()->devices as $device)
            <div class="device-card">
                <div class="device-header">
                    <div class="device-status {{ $device->status }}"></div>
                    <div class="device-icon">
                        <svg width="24" height="24" 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>
                <h4>{{ $device->name }}</h4>
                <p class="device-id">{{ $device->device_id ?? $device->id }}</p>
                <div class="device-stats">
                    <div class="stat-item">
                        <svg width="12" height="12" 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>
                        <span>Last: {{ $device->last_heartbeat?->diffForHumans() ?? 'Never' }}</span>
                    </div>
                    <div class="stat-item">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M20 12V8H4v4M12 4v4"/>
                        </svg>
                        <span>Type: {{ ucfirst($device->type) }}</span>
                    </div>
                </div>
                <a href="{{ route('devices.show', $device) }}" class="btn-view">
                    View Details
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                </a>
            </div>
            @empty
            <div class="empty-state">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" 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>
                <h4>No devices yet</h4>
                <p>Add your first device to start monitoring</p>
                <a href="{{ route('devices.create') }}" class="btn-primary">Add Device</a>
            </div>
            @endforelse
        </div>
    </div>
</div>

<script>
// Fungsi untuk memuat data dashboard
async function loadDashboardData() {
    try {
        const response = await fetch('/api/v1/user/dashboard', {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        if (!response.ok) {
            throw new Error('Failed to fetch dashboard data');
        }
        
        const result = await response.json();
        const data = result.data ?? result;
        
        // Update stat cards
        updateStatCards(data);
        
        // Update earthquake table
        updateEarthquakeTable(data);
        
        // Update devices if needed (refresh from API)
        if (data.devices) {
            updateDevicesGrid(data.devices);
        }
        
    } catch (error) {
        console.error('Dashboard fetch error:', error);
        // Fallback: gunakan data dari server-side yang sudah ada
        updateStatCardsFromPage();
        updateEarthquakeTableWithMock();
    }
}

// Update stat cards dari data API
function updateStatCards(data) {
    // Total Devices
    const totalDevicesElem = document.getElementById('statTotalDevices');
    if (totalDevicesElem) {
        const totalDevices = data.stats?.total_devices ?? data.total_devices ?? data.devices_count ?? '0';
        totalDevicesElem.textContent = totalDevices;
    }
    
    // Active Devices
    const activeDevicesElem = document.getElementById('statActiveDevices');
    if (activeDevicesElem) {
        const activeDevices = data.stats?.active_devices ?? data.active_devices ?? data.online_devices ?? '0';
        activeDevicesElem.textContent = activeDevices;
    }
    
    // Total Readings
    const totalReadingsElem = document.getElementById('statTotalReadings');
    if (totalReadingsElem) {
        const totalReadings = data.stats?.total_readings ?? data.total_readings ?? data.readings_count ?? '0';
        totalReadingsElem.textContent = totalReadings;
    }
    
    // Latest Magnitude
    const latestMagnitudeElem = document.getElementById('statLatestMagnitude');
    if (latestMagnitudeElem) {
        let latestMag = '--';
        if (data.stats?.latest_magnitude) {
            latestMag = data.stats.latest_magnitude.toFixed(1) + ' M';
        } else if (data.latest_magnitude) {
            latestMag = parseFloat(data.latest_magnitude).toFixed(1) + ' M';
        } else if (data.latest_gempa && data.latest_gempa.length > 0) {
            latestMag = parseFloat(data.latest_gempa[0].magnitude).toFixed(1) + ' M';
        }
        latestMagnitudeElem.textContent = latestMag;
    }
}

// Fallback: update stat cards dari data yang sudah ada di halaman
function updateStatCardsFromPage() {
    const deviceCards = document.querySelectorAll('.device-card');
    let totalDevices = deviceCards.length;
    let activeDevices = 0;
    
    deviceCards.forEach(card => {
        const statusDiv = card.querySelector('.device-status');
        if (statusDiv && statusDiv.classList.contains('online')) {
            activeDevices++;
        }
    });
    
    const totalDevicesElem = document.getElementById('statTotalDevices');
    if (totalDevicesElem) totalDevicesElem.textContent = totalDevices;
    
    const activeDevicesElem = document.getElementById('statActiveDevices');
    if (activeDevicesElem) activeDevicesElem.textContent = activeDevices;
}

// Update tabel gempa
function updateEarthquakeTable(data) {
    const tbody = document.getElementById('latestGempaBody');
    if (!tbody) return;
    
    // Ambil data gempa dari berbagai kemungkinan struktur response
    let earthquakes = [];
    if (data.stats?.latest_gempa) {
        earthquakes = data.stats.latest_gempa;
    } else if (data.latest_gempa) {
        earthquakes = data.latest_gempa;
    } else if (data.earthquakes) {
        earthquakes = data.earthquakes;
    } else if (data.gempa) {
        earthquakes = data.gempa;
    } else if (data.data?.latest_gempa) {
        earthquakes = data.data.latest_gempa;
    }
    
    if (!earthquakes || earthquakes.length === 0) {
        tbody.innerHTML = '<tr><td colspan="4" class="text-center">Belum ada data gempa</td></tr>';
        return;
    }
    
    tbody.innerHTML = earthquakes.slice(0, 5).map(g => {
        const magnitude = parseFloat(g.magnitude ?? g.magnitude_value ?? 0);
        const magClass = magnitude >= 5 ? 'high' : (magnitude >= 3 ? 'mid' : 'low');
        const status = getStatusByMagnitude(magnitude);
        
        return `
        <tr>
            <td><div class="time-cell">${escapeHtml(g.waktu_utc ?? g.time ?? g.created_at ?? '—')}</div></td>
            <td><div class="location-cell">${escapeHtml(g.lokasi ?? g.location ?? '—')}</div></td>
            <td><span class="magnitude-badge ${magClass}">${magnitude.toFixed(1)} M</span></td>
            <td><span class="status-badge status-${status.toLowerCase()}">${status}</span></td>
        </tr>`;
    }).join('');
}

// Get status berdasarkan magnitude
function getStatusByMagnitude(mag) {
    if (mag >= 5) return 'Berbahaya';
    if (mag >= 3) return 'Sedang';
    return 'Ringan';
}

// Update devices grid dari API
function updateDevicesGrid(devices) {
    const gridContainer = document.getElementById('devicesGrid');
    if (!gridContainer || !devices || devices.length === 0) return;
    
    // Hanya update jika ada data dari API
    if (devices.length > 0 && gridContainer.querySelector('.device-card')) {
        // Jika sudah ada device cards, update statusnya saja
        devices.forEach((device, index) => {
            const cards = gridContainer.querySelectorAll('.device-card');
            if (cards[index]) {
                const statusDiv = cards[index].querySelector('.device-status');
                if (statusDiv) {
                    statusDiv.className = `device-status ${device.status ?? 'offline'}`;
                }
                const lastSpan = cards[index].querySelector('.stat-item:first-child span');
                if (lastSpan && device.last_heartbeat) {
                    lastSpan.textContent = `Last: ${new Date(device.last_heartbeat).toLocaleString()}`;
                }
            }
        });
    }
}

// Mock data untuk fallback
function updateEarthquakeTableWithMock() {
    const tbody = document.getElementById('latestGempaBody');
    if (!tbody) return;
    
    const mockEarthquakes = [
        { waktu_utc: '2026-05-19 08:30', lokasi: 'Bandung, Jawa Barat', magnitude: 2.3, status: 'Ringan' },
        { waktu_utc: '2026-05-19 06:15', lokasi: 'Garut, Jawa Barat', magnitude: 3.7, status: 'Sedang' },
        { waktu_utc: '2026-05-18 22:10', lokasi: 'Sukabumi, Jabar', magnitude: 1.8, status: 'Ringan' },
        { waktu_utc: '2026-05-18 14:30', lokasi: 'Cianjur, Jawa Barat', magnitude: 2.1, status: 'Ringan' },
        { waktu_utc: '2026-05-17 19:45', lokasi: 'Tasikmalaya, Jabar', magnitude: 4.2, status: 'Sedang' }
    ];
    
    tbody.innerHTML = mockEarthquakes.map(g => {
        const magClass = g.magnitude >= 5 ? 'high' : (g.magnitude >= 3 ? 'mid' : 'low');
        const statusClass = g.status === 'Ringan' ? 'ringan' : (g.status === 'Sedang' ? 'sedang' : 'berbahaya');
        return `
        <tr>
            <td><div class="time-cell">${g.waktu_utc}</div></td>
            <td><div class="location-cell">${g.lokasi}</div></td>
            <td><span class="magnitude-badge ${magClass}">${g.magnitude} M</span></td>
            <td><span class="status-badge status-${statusClass}">${g.status}</span></td>
        </tr>`;
    }).join('');
}

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

// Load dashboard data when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardData();
    
    // Refresh data every 30 seconds
    setInterval(loadDashboardData, 30000);
});
</script>

<style>
.user-dashboard {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.page-header p {
    color: #6b7280;
}

.header-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f9fafb;
    border-radius: 40px;
    font-size: 0.875rem;
    color: #4b5563;
}

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

.stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.2s;
}

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

.stat-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #dc2626;
}

.stat-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Card Section */
.card-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

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

.header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-title svg {
    color: #dc2626;
}

.header-title h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.view-link {
    color: #dc2626;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.view-link:hover {
    text-decoration: underline;
}

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #dc2626;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-add:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* Table Styles */
.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

.data-table td {
    font-size: 0.875rem;
    color: #1f2937;
}

.data-table tr:hover td {
    background: #fef2f2;
}

.time-cell, .location-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Badge Styles */
.magnitude-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.magnitude-badge.high {
    background: #fef2f2;
    color: #dc2626;
}

.magnitude-badge.mid {
    background: #fffbeb;
    color: #f59e0b;
}

.magnitude-badge.low {
    background: #d1fae5;
    color: #065f46;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
}

.status-berbahaya {
    background: #fef2f2;
    color: #dc2626;
}

.status-sedang {
    background: #fffbeb;
    color: #f59e0b;
}

.status-ringan {
    background: #d1fae5;
    color: #065f46;
}

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

.device-card {
    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-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.device-status {
    width: 10px;
    height: 10px;
    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;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.device-status.pending {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.device-status.maintenance {
    background: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}

.device-icon {
    width: 36px;
    height: 36px;
    background: #fef2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.device-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.device-id {
    font-size: 0.7rem;
    color: #6b7280;
    font-family: monospace;
    margin-bottom: 0.75rem;
}

.device-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #6b7280;
}

.stat-item svg {
    color: #9ca3af;
}

.btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    color: #374151;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-view:hover {
    background: #fef2f2;
    color: #dc2626;
}

.btn-view svg {
    transition: transform 0.2s;
}

.btn-view:hover svg {
    transform: translateX(2px);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: #9ca3af;
}

.empty-state svg {
    margin-bottom: 1rem;
}

.empty-state h4 {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 0.25rem;
}

.empty-state p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.btn-primary {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #dc2626;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #b91c1c;
}

.text-center {
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .user-dashboard {
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .devices-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.75rem;
    }
}
</style>
@endsection