@extends('layouts.admin')

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

@section('content')
<div class="admin-dashboard">
    <div class="page-header">
        <div>
            <h1>Admin Dashboard</h1>
            <p>Welcome back, {{ auth()->user()->name }}</p>
        </div>
        <div class="header-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>

    <!-- 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">
                    <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 class="stat-number">{{ number_format($stats['total_users'] ?? 0) }}</div>
            <div class="stat-label">Total Users</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">
                    <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">{{ number_format($stats['total_devices'] ?? 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" 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">{{ number_format($stats['total_gempa'] ?? 0) }}</div>
            <div class="stat-label">Earthquake Events</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"/>
                </svg>
            </div>
            <div class="stat-number">{{ number_format($stats['active_sensors'] ?? 0) }}</div>
            <div class="stat-label">Active Sensors</div>
        </div>
    </div>

    <!-- Chart Section -->
    <div class="chart-card">
        <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">
                    <path d="M2 20L22 20" stroke="currentColor"/>
                    <path d="M4 16L7 10L10 13L15 5L18 9L20 4" stroke="currentColor"/>
                </svg>
                <h3>Earthquake Trend (6 Months)</h3>
            </div>
        </div>
        <div class="chart-container">
            <canvas id="trendChart" height="280"></canvas>
        </div>
    </div>

    <!-- Tables Section -->
    <div class="tables-grid">
        <!-- Recent Earthquakes Table -->
        <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" 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>Device</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($stats['recent_gempa'] ?? []) as $gempa)
                        <tr>
                            <td>
                                <div class="time-cell">
                                    <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>
                                    {{ $gempa->waktu_kejadian ? $gempa->waktu_kejadian->format('d/m/Y H:i') : '-' }}
                                </div>
                            </td>
                            <td>
                                <div class="location-cell">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                        <circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    {{ $gempa->lokasi ?? '-' }}
                                </div>
                            </td>
                            <td>
                                <span class="magnitude-badge {{ ($gempa->magnitude ?? 0) >= 5 ? 'high' : (($gempa->magnitude ?? 0) >= 3 ? 'mid' : 'low') }}">
                                    {{ number_format($gempa->magnitude ?? 0, 1) }}
                                </span>
                            </td>
                            <td>{{ $gempa->sensor->name ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center">No earthquake data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- New Users Table -->
        <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" stroke-width="1.5">
                        <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>
                    <h3>New Users</h3>
                </div>
                <a href="{{ route('admin.users.index') }}" class="view-link">View All →</a>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Joined</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($stats['recent_users'] ?? []) as $user)
                        <tr>
                            <td>
                                <div class="user-cell">
                                    <div class="user-avatar">
                                        {{ substr($user->name ?? 'U', 0, 2) }}
                                    </div>
                                    <span>{{ $user->name ?? '-' }}</span>
                                </div>
                            </td>
                            <td>{{ $user->email ?? '-' }}</td>
                            <td>{{ $user->created_at ? $user->created_at->diffForHumans() : '-' }}</td>
                            <td>
                                <span class="status-badge status-active">Active</span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="text-center">No users</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Welcome Message for Empty State -->
    <div class="welcome-message" style="display: {{ empty($stats['total_users']) ? 'flex' : '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>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    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: 'Earthquake Count',
                    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',
                        labels: { usePointStyle: true, boxWidth: 8 }
                    },
                    tooltip: {
                        backgroundColor: '#1f2937',
                        titleColor: '#ffffff',
                        bodyColor: '#e5e7eb',
                        padding: 10,
                        cornerRadius: 8
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: '#f3f4f6', drawBorder: false },
                        title: { display: true, text: 'Number of Events', color: '#6b7280', font: { size: 12 } }
                    },
                    x: {
                        grid: { display: false },
                        title: { display: true, text: 'Month', color: '#6b7280', font: { size: 12 } }
                    }
                }
            }
        });
    } else {
        // Show empty chart message
        const ctx = document.getElementById('trendChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: { labels: ['No Data'], datasets: [{ label: 'Earthquake Count', data: [0] }] },
            options: { responsive: true, plugins: { tooltip: { enabled: false } } }
        });
    }
});
</script>

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

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

.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;
}

/* Chart Card */
.chart-card {
    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;
}

.chart-container {
    padding: 1.5rem;
}

/* Tables Grid */
.tables-grid {
    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.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;
}

/* Cell Styles */
.time-cell, .location-cell, .user-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-cell svg, .location-cell svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.user-avatar {
    width: 28px;
    height: 28px;
    background: #fef2f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #dc2626;
}

/* 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-active {
    background: #d1fae5;
    color: #065f46;
}

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

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

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

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

.welcome-message p {
    color: #6b7280;
}

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

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .welcome-message {
        flex-direction: column;
        text-align: center;
    }
}
</style>
@endsection