@extends('layouts.admin')

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

@section('content')
<div class="admin-dashboard">
    <!-- Header Stats -->
    <div class="stats-header">
        <div class="stats-title">
            <h1>Admin Dashboard</h1>
            <p>Overview sistem dan monitoring data gempa</p>
        </div>
        <div class="stats-date">
            <svg width="18" height="18" 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>

    <!-- Stats 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">
                    <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>
                <div class="stat-number" id="totalUsers">{{ number_format($stats['total_users'] ?? 0) }}</div>
                <div class="stat-label">Total Users</div>
                <div class="stat-trend up" id="userTrend">+12% from last month</div>
            </div>
        </div>
        <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>
                <div class="stat-number" id="totalDevices">{{ number_format($stats['total_devices'] ?? 0) }}</div>
                <div class="stat-label">Total Devices</div>
                <div class="stat-trend up" id="deviceTrend">+5 new this week</div>
            </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>
                <div class="stat-number" id="totalEarthquakes">{{ number_format($stats['total_gempa'] ?? 0) }}</div>
                <div class="stat-label">Total Earthquakes</div>
                <div class="stat-trend" id="earthquakeTrend">{{ number_format($stats['earthquakes_today'] ?? 0) }} today</div>
            </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>
                <div class="stat-number" id="activeSensors">{{ number_format($stats['active_sensors'] ?? 0) }}</div>
                <div class="stat-label">Active Sensors</div>
                <div class="stat-trend up" id="sensorTrend">{{ number_format($stats['online_percentage'] ?? 0) }}% online</div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h3>Earthquake Trend (12 Months)</h3>
                <div class="chart-legend">
                    <span><span class="legend-dot"></span>Earthquakes</span>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="trendChart" height="250"></canvas>
            </div>
        </div>
        <div class="chart-card">
            <div class="chart-header">
                <h3>Device Status Distribution</h3>
                <div class="chart-legend">
                    <span><span class="legend-dot online"></span>Online</span>
                    <span><span class="legend-dot offline"></span>Offline</span>
                    <span><span class="legend-dot pending"></span>Pending</span>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="deviceChart" height="250"></canvas>
            </div>
        </div>
    </div>

    <!-- Alerts & Recent Activity Row -->
    <div class="alerts-row">
        <div class="alerts-card">
            <div class="card-header">
                <div class="header-title">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <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>
                    <h3>Recent Alerts</h3>
                </div>
                <a href="#" class="view-all">View All →</a>
            </div>
            <div class="alerts-list" id="alertsList">
                <div class="alert-item warning">
                    <div class="alert-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <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>
                    </div>
                    <div class="alert-content">
                        <div class="alert-title">High magnitude detected</div>
                        <div class="alert-time">2 minutes ago</div>
                    </div>
                </div>
                <div class="alert-item info">
                    <div class="alert-icon">
                        <svg width="16" height="16" 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="alert-content">
                        <div class="alert-title">New device registered</div>
                        <div class="alert-time">15 minutes ago</div>
                    </div>
                </div>
                <div class="alert-item danger">
                    <div class="alert-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <line x1="18" y1="6" x2="6" y2="18"/>
                            <line x1="6" y1="6" x2="18" y2="18"/>
                        </svg>
                    </div>
                    <div class="alert-content">
                        <div class="alert-title">Device offline: Sensor Bali</div>
                        <div class="alert-time">1 hour ago</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="activity-card">
            <div class="card-header">
                <div class="header-title">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                    <h3>Recent Activity</h3>
                </div>
                <a href="#" class="view-all">View All →</a>
            </div>
            <div class="activity-list">
                <div class="activity-item">
                    <div class="activity-dot"></div>
                    <div class="activity-content">
                        <span class="activity-text">New user registered: John Doe</span>
                        <span class="activity-time">5 minutes ago</span>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-dot"></div>
                    <div class="activity-content">
                        <span class="activity-text">Earthquake detected: Magnitude 4.2 in Bali</span>
                        <span class="activity-time">10 minutes ago</span>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-dot"></div>
                    <div class="activity-content">
                        <span class="activity-text">Device added: Sensor Jakarta</span>
                        <span class="activity-time">25 minutes ago</span>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-dot"></div>
                    <div class="activity-content">
                        <span class="activity-text">Data export completed</span>
                        <span class="activity-time">1 hour ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="tables-row">
        <!-- Recent Earthquakes -->
        <div class="table-card">
            <div class="card-header">
                <div class="header-title">
                    <svg width="18" height="18" 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>
                    <h3>Recent Earthquakes</h3>
                </div>
                <a href="{{ route('research.gempa') }}" class="view-all">View All →</a>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Location</th>
                            <th>Magnitude</th>
                            <th>Depth</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($stats['recent_gempa'] ?? []) as $gempa)
                        <tr>
                            <td>{{ $gempa->waktu_kejadian->format('d/m/Y H:i') }}</td>
                            <td>{{ $gempa->lokasi }}</td>
                            <td><span class="magnitude {{ $gempa->magnitude >= 5 ? 'high' : ($gempa->magnitude >= 3 ? 'mid' : 'low') }}">{{ number_format($gempa->magnitude, 1) }}</span></td>
                            <td>{{ $gempa->kedalaman ?? '-' }} km</td>
                            <td><span class="status-badge {{ strtolower($gempa->status) }}">{{ $gempa->status }}</span></td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center">No earthquake data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Devices -->
        <div class="table-card">
            <div class="card-header">
                <div class="header-title">
                    <svg width="18" height="18" 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>
                    <h3>Recent Devices</h3>
                </div>
                <a href="{{ route('admin.devices.index') }}" class="view-all">View All →</a>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Device</th>
                            <th>ID</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Last Heartbeat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($stats['recent_devices'] ?? []) as $device)
                        <tr>
                            <td>{{ $device->name }}</td>
                            <td><code>{{ $device->device_id }}</code></td>
                            <td>{{ ucfirst($device->type) }}</td>
                            <td><span class="status-badge status-{{ $device->status }}">{{ ucfirst($device->status) }}</span></td>
                            <td>{{ $device->last_heartbeat ? $device->last_heartbeat->diffForHumans() : 'Never' }}</td>
                        </tr>
                        @empty
                        <td><td colspan="5" class="text-center">No devices</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- System Health -->
    <div class="health-card">
        <div class="card-header">
            <div class="header-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4l3 3"/>
                </svg>
                <h3>System Health</h3>
            </div>
            <div class="health-status healthy">All Systems Operational</div>
        </div>
        <div class="health-grid">
            <div class="health-item">
                <div class="health-info">
                    <span class="health-label">Database</span>
                    <span class="health-value">Connected</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill" style="width: 100%"></div>
                </div>
            </div>
            <div class="health-item">
                <div class="health-info">
                    <span class="health-label">Cache</span>
                    <span class="health-value">Operational</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill" style="width: 100%"></div>
                </div>
            </div>
            <div class="health-item">
                <div class="health-info">
                    <span class="health-label">Queue Worker</span>
                    <span class="health-value">Running</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill" style="width: 100%"></div>
                </div>
            </div>
            <div class="health-item">
                <div class="health-info">
                    <span class="health-label">Storage</span>
                    <span class="health-value">45% Used</span>
                </div>
                <div class="health-bar">
                    <div class="health-fill" style="width: 45%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Trend Chart
    const chartData = @json($stats['chart_data'] ?? ['months' => [], 'counts' => []]);
    if (chartData.months && chartData.months.length > 0) {
        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: {
                labels: chartData.months,
                datasets: [{
                    label: 'Earthquakes',
                    data: chartData.counts,
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220,38,38,0.05)',
                    borderWidth: 2,
                    pointBackgroundColor: '#dc2626',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: { legend: { position: 'top' } },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                }
            }
        });
    }

    // Device Status Chart
    const deviceStats = @json($stats['device_stats'] ?? ['online' => 0, 'offline' => 0, 'pending' => 0]);
    new Chart(document.getElementById('deviceChart'), {
        type: 'doughnut',
        data: {
            labels: ['Online', 'Offline', 'Pending'],
            datasets: [{
                data: [deviceStats.online || 0, deviceStats.offline || 0, deviceStats.pending || 0],
                backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { position: 'bottom' } }
        }
    });
});
</script>

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

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

.stats-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

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

.stats-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f9fafb;
    border-radius: 40px;
    font-size: 0.75rem;
    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.25rem;
    display: flex;
    gap: 1rem;
}

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

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6b7280;
}

.stat-trend {
    font-size: 0.65rem;
    margin-top: 0.25rem;
}

.stat-trend.up { color: #10b981; }
.stat-trend.down { color: #ef4444; }

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

.chart-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1rem;
}

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

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

.chart-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.25rem;
}

.legend-dot.online { background: #10b981; }
.legend-dot.offline { background: #ef4444; }
.legend-dot.pending { background: #f59e0b; }

.chart-container {
    padding: 0.5rem;
}

/* Alerts Row */
.alerts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.alerts-card, .activity-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    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: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.view-all {
    font-size: 0.7rem;
    color: #dc2626;
    text-decoration: none;
}

.alerts-list, .activity-list {
    padding: 0.5rem;
}

.alert-item, .activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    transition: all 0.2s;
}

.alert-item:hover, .activity-item:hover {
    background: #f9fafb;
}

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-item.warning .alert-icon { background: #fffbeb; color: #f59e0b; }
.alert-item.info .alert-icon { background: #eff6ff; color: #3b82f6; }
.alert-item.danger .alert-icon { background: #fef2f2; color: #dc2626; }

.alert-title {
    font-size: 0.75rem;
    font-weight: 500;
}

.alert-time, .activity-time {
    font-size: 0.6rem;
    color: #9ca3af;
}

.activity-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}

.activity-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-text {
    font-size: 0.75rem;
}

/* Tables Row */
.tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.table-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.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;
    font-size: 0.75rem;
}

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
}

.magnitude {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-weight: 600;
}

.magnitude.high { background: #fef2f2; color: #dc2626; }
.magnitude.mid { background: #fffbeb; color: #f59e0b; }
.magnitude.low { background: #d1fae5; color: #065f46; }

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

.status-badge.tinggi, .status-badge.berbahaya { background: #fef2f2; color: #dc2626; }
.status-badge.sedang { background: #fffbeb; color: #f59e0b; }
.status-badge.ringan { background: #d1fae5; color: #065f46; }
.status-badge.online { background: #d1fae5; color: #065f46; }
.status-badge.offline { background: #fee2e2; color: #991b1b; }
.status-badge.pending { background: #fed7aa; color: #92400e; }

/* Health Card */
.health-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.health-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
}

.health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.25rem;
}

.health-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.health-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
}

.health-label { color: #6b7280; }
.health-value { font-weight: 500; }

.health-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
}

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

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

@media (max-width: 640px) {
    .admin-dashboard {
        padding: 1rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stats-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}
</style>
@endsection