@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="page-header">
    <h1>Device Status</h1>
    <p>Real-time overview of your ESP32 device</p>
</div>

{{-- ─── Status Cards ──────────────────────────────────────── --}}
<div class="row g-4 mb-4">

    {{-- Last Seen --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(13,110,253,0.15);">
                <i class="bi bi-clock-history" style="color:#0d6efd;"></i>
            </div>
            <div class="stat-value">{{ $device->last_seen_human }}</div>
            <div class="stat-label">Last Seen</div>
            @if($device->last_seen)
                <div class="mt-1" style="font-size:0.72rem;color:#8b949e;">
                    {{ $device->last_seen->format('d M Y, H:i:s') }}
                </div>
            @endif
        </div>
    </div>

    {{-- Current IP --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(32,201,151,0.15);">
                <i class="bi bi-hdd-network-fill" style="color:#20c997;"></i>
            </div>
            <div class="stat-value">{{ $device->current_ip ?? '—' }}</div>
            <div class="stat-label">Current IP Address</div>
        </div>
    </div>

    {{-- WiFi Strength --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(255,193,7,0.15);">
                <i class="bi bi-wifi" style="color:#ffc107;"></i>
            </div>
            <div class="stat-value">
                @if($device->wifi_strength !== null)
                    {{ $device->wifi_strength }} dBm
                @else
                    —
                @endif
            </div>
            <div class="stat-label">WiFi Signal Strength</div>
            @if($device->wifi_percent !== null)
                <div class="mt-2">
                    <div class="progress" style="height:4px;border-radius:4px;background:rgba(255,255,255,0.1);">
                        <div class="progress-bar"
                             style="width:{{ $device->wifi_percent }}%;
                                    background:{{ $device->wifi_percent > 60 ? '#20c997' : ($device->wifi_percent > 30 ? '#ffc107' : '#dc3545') }};
                                    border-radius:4px;">
                        </div>
                    </div>
                    <div style="font-size:0.72rem;color:#8b949e;margin-top:3px;">{{ $device->wifi_percent }}% signal quality</div>
                </div>
            @endif
        </div>
    </div>

    {{-- Firmware Version --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(102,16,242,0.15);">
                <i class="bi bi-cpu-fill" style="color:#6610f2;"></i>
            </div>
            <div class="stat-value">{{ $device->firmware_version ?? '—' }}</div>
            <div class="stat-label">Firmware Version</div>
        </div>
    </div>

    {{-- Refresh Interval --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(253,126,20,0.15);">
                <i class="bi bi-arrow-repeat" style="color:#fd7e14;"></i>
            </div>
            <div class="stat-value">{{ $device->refresh }}s</div>
            <div class="stat-label">Refresh Interval</div>
        </div>
    </div>

    {{-- Online Status --}}
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="stat-card">
            <div class="stat-icon" style="background:{{ $device->last_seen && $device->last_seen->diffInMinutes(now()) < 5 ? 'rgba(40,167,69,0.15)' : 'rgba(108,117,125,0.15)' }};">
                <i class="bi bi-activity"
                   style="color:{{ $device->last_seen && $device->last_seen->diffInMinutes(now()) < 5 ? '#28a745' : '#6c757d' }};"></i>
            </div>
            @php
                $online = $device->last_seen && $device->last_seen->diffInMinutes(now()) < 5;
            @endphp
            <div class="stat-value d-flex align-items-center gap-2">
                <span class="status-dot {{ $online ? 'status-online' : 'status-offline' }}"></span>
                {{ $online ? 'Online' : 'Offline' }}
            </div>
            <div class="stat-label">Device Status</div>
        </div>
    </div>

</div>

{{-- ─── API Info Card ─────────────────────────────────────── --}}
<div class="glass-card">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <h5 class="mb-1 fw-700">API Endpoint</h5>
            <p class="mb-0" style="font-size:0.82rem;color:#8b949e;">Configure your ESP32 to poll this URL</p>
        </div>
        <i class="bi bi-link-45deg" style="font-size:1.5rem;color:#0d6efd;"></i>
    </div>
    <div style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:1rem;font-family:monospace;font-size:0.85rem;">
        <span style="color:#6c757d;">GET </span>
        <span style="color:#20c997;">{{ url('/api/device') }}</span>
    </div>
    <div class="mt-3">
        <small style="color:#8b949e;">
            <i class="bi bi-info-circle me-1"></i>
            The ESP32 should send a POST to
            <code style="color:#fd7e14;">{{ url('/api/device/heartbeat') }}</code>
            every refresh cycle to update its status.
        </small>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Auto-refresh page every 30 seconds to show live status
    setTimeout(() => window.location.reload(), 30000);
</script>
@endpush
