@extends('layouts.app')

@push('styles')
    <style>
        #sensor-map {
            width: 100% !important;
            height: 500px !important;
            min-height: 500px !important;
            background: #f0f0f0;
            border: 1px solid #ddd;
            margin: 1rem 0;
        }
        .map-error {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 2rem;
            text-align: center;
            background: #fff5f5;
            border: 1px solid #feb2b2;
            border-radius: 0.5rem;
        }
        .map-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: #f8fafc;
            color: #4a5568;
            font-size: 1.1rem;
        }
    </style>
@endpush

@push('styles')
    <style>
        #map-canvas {
            height: 400px;
            width: 100%;
            border-radius: 0.5rem;
        }
    </style>
@endpush

@section('title', 'Sensor Details - ' . $sensor->device_uuid)

@section('content')
<!-- Debug Information -->
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">Debug Information</h3>
            <div class="mt-2 text-sm text-yellow-700">
                <p><strong>Sensor ID:</strong> {{ $sensor->id }}</p>
                <p><strong>Last Latitude:</strong> {{ $sensor->last_latitude ?? 'null' }}</p>
                <p><strong>Last Longitude:</strong> {{ $sensor->last_longitude ?? 'null' }}</p>
                <p><strong>Has Valid Location:</strong> {{ $hasValidLocation ? 'Yes' : 'No' }}</p>
                <p><strong>Last Ping:</strong> {{ $sensor->last_ping ? $sensor->last_ping->diffForHumans() : 'Never' }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto py-6">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Sensor: {{ $sensor->device_uuid }}</h1>
            <p class="text-sm text-gray-500">Last updated: <span id="last-updated">{{ $sensor->last_ping ? $sensor->last_ping->diffForHumans() : 'Never' }}</span></p>
        </div>
        <div class="flex space-x-2">
            <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sensor->status === 'online' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                {{ ucfirst($sensor->status) }}
            </span>
            <span class="px-3 py-1 rounded-full text-sm font-medium {{ $sensor->is_active ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' }}">
                {{ $sensor->is_active ? 'Active' : 'Inactive' }}
            </span>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
            <div class="flex items-center">
                <div class="rounded-full bg-blue-100 p-3">
                    <i class="fas fa-gas-pump text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-500">Gas Level</h3>
                    <div class="flex items-center">
                        <p class="text-2xl font-semibold text-gray-800">{{ $sensor->last_gas_level ?? 0 }}%</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
            <div class="flex items-center">
                <div class="rounded-full bg-yellow-100 p-3">
                    <i class="fas fa-battery-three-quarters text-yellow-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-500">Battery Level</h3>
                    <div class="flex items-center">
                        <p class="text-2xl font-semibold text-gray-800">{{ $sensor->battery_level ?? 0 }}%</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
            <div class="flex items-center">
                <div class="rounded-full bg-green-100 p-3">
                    <i class="fas fa-clock text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-500">Last Ping</h3>
                    <p class="text-lg font-semibold text-gray-800">
                        {{ $sensor->last_ping ? $sensor->last_ping->diffForHumans() : 'Never' }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-purple-500">
            <div class="flex items-center">
                <div class="rounded-full bg-purple-100 p-3">
                    <i class="fas fa-bell text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-sm font-medium text-gray-500">Active Alerts</h3>
                    <p class="text-2xl font-semibold text-gray-800">
                        {{ $sensor->alerts()->where('is_resolved', false)->count() }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    @php
        // Consider coordinates invalid if they're exactly 0,0 (Null Island) or null
        $latitude = $sensor->latitude ?? $sensor->last_latitude ?? null;
        $longitude = $sensor->longitude ?? $sensor->last_longitude ?? null;
        $hasValidLocation = !is_null($latitude) && 
                          !is_null($longitude) && 
                          ($latitude != 0 || $longitude != 0);
    @endphp
    
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Sensor Location</h2>
        
        <!-- Use iframe to embed Google Maps directly -->
            @if($hasValidLocation)
                <iframe 
                    width="100%" 
                    height="400" 
                    style="border:0; border-radius: 0.5rem;" 
                    loading="lazy" 
                    allowfullscreen 
                    src="https://www.google.com/maps/embed/v1/place?key={{ env('GOOGLE_MAPS_API_KEY') }}&q={{ $latitude }},{{ $longitude }}&zoom=15">
                </iframe>
            @else
                <div class="bg-gray-100 rounded-lg p-6 text-center h-96 flex items-center justify-center">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                        </svg>
                        <p class="text-gray-600">Location data not available for this sensor</p>
                    </div>
                </div>
            @endif
        
        <div class="text-right text-sm text-gray-500">
            Coordinates: {{ $latitude }}, {{ $longitude }}
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Gas Level Chart -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-800">Gas Level Trend</h3>
                <div class="flex space-x-2">
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="hour">1H</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-primary-100 text-primary-700" data-range="day">24H</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="week">1W</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="month">1M</button>
                </div>
            </div>
            <div class="h-80 relative">
                <div id="gas-chart-loading" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 z-10">
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
                        <p class="mt-2 text-gray-600">Loading gas level data...</p>
                    </div>
                </div>
                <div id="gas-chart-error" class="hidden p-4 text-red-600 bg-red-50 rounded"></div>
                <canvas id="gasLevelChart"></canvas>
            </div>
        </div>

        <!-- Battery Level Chart -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-800">Battery Level Trend</h3>
                <div class="flex space-x-2">
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="hour">1H</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-primary-100 text-primary-700" data-range="day">24H</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="week">1W</button>
                    <button class="time-range-btn text-xs px-3 py-1 rounded bg-gray-100 hover:bg-gray-200" data-range="month">1M</button>
                </div>
            </div>
            <div class="h-80 relative">
                <div id="battery-chart-loading" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 z-10">
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
                        <p class="mt-2 text-gray-600">Loading battery level data...</p>
                    </div>
                </div>
                <div id="battery-chart-error" class="hidden p-4 text-red-600 bg-red-50 rounded"></div>
                <canvas id="batteryLevelChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
        <div class="px-6 py-4 border-b">
            <h3 class="text-lg font-medium text-gray-800">Recent Activity</h3>
        </div>
        <div class="divide-y divide-gray-200">
            @forelse($sensor->logs()->latest()->take(10)->get() as $log)
                <div class="px-6 py-4 hover:bg-gray-50">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-900">
                                Gas Level: {{ $log->gas_level }}% 
                                <span class="text-xs text-gray-500">({{ $log->created_at->diffForHumans() }})</span>
                            </p>
                            <p class="text-xs text-gray-500">
                                Battery: {{ $log->battery_level }}% 
                                @if($log->is_leak_detected)
                                    <span class="ml-2 text-red-500">
                                        <i class="fas fa-exclamation-triangle"></i> Gas Leak Detected
                                    </span>
                                @endif
                            </p>
                        </div>
                        <div class="text-xs text-gray-500">
                            {{ $log->created_at->format('M j, Y H:i:s') }}
                        </div>
                    </div>
                </div>
            @empty
                <div class="px-6 py-4 text-center text-gray-500">
                    No activity recorded yet.
                </div>
            @endforelse
        </div>
        <div class="px-6 py-3 bg-gray-50 text-right">
            <a href="{{ route('sensors.logs', $sensor) }}" class="text-sm font-medium text-primary-600 hover:text-primary-700">
                View all activity <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
</div>

<!-- No scripts needed for iframe implementation -->
@endsection