@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">{{ $stats['total_devices'] }}</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">{{ $stats['active_devices'] }}</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">{{ number_format($stats['total_readings']) }}</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="latestMagnitude">--</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>
                    @forelse($stats['latest_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->format('d/m/Y H:i:s') }}
                            </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 >= 5 ? 'high' : ($gempa->magnitude >= 3 ? 'mid' : 'low') }}">
                                {{ number_format($gempa->magnitude, 1) }}
                            </span>
                        </td>
                        <td>
                            <span class="status-badge status-{{ strtolower($gempa->status) }}">
                                {{ $gempa->status }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center">No earthquake data yet</td>
                    </tr>
                    @endforelse
                </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">
            @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 }}</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>
// Update latest magnitude from the table
document.addEventListener('DOMContentLoaded', function() {
    const firstRowMagnitude = document.querySelector('.data-table tbody tr:first-child .magnitude-badge');
    if (firstRowMagnitude) {
        document.getElementById('latestMagnitude').innerText = firstRowMagnitude.innerText;
    }
});
</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;
}

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

/* 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, .status-tinggi {
    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