@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="md:flex md:items-center md:justify-between mb-6">
            <div class="flex-1 min-w-0">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                        Sensor Alerts: {{ $sensor->device_uuid }}
                    </h1>
                </div>
                <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                    <div class="mt-2 flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                        </svg>
                        {{ $sensor->gasCompany ? $sensor->gasCompany->name : 'No Company' }}
                    </div>
                    <div class="mt-2 flex items-center">
                        @php
                            $status = $sensor->status ?? 'offline';
                            $statusClasses = [
                                'online' => 'bg-green-100 text-green-800',
                                'offline' => 'bg-gray-100 text-gray-800',
                                'battery_low' => 'bg-yellow-100 text-yellow-800',
                            ][$status] ?? 'bg-gray-100 text-gray-800';
                        @endphp
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $statusClasses }}">
                            {{ ucfirst($status) }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="mt-4 flex flex-shrink-0 space-x-3">
                <a href="{{ route('sensors.show', $sensor->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    Back to Sensor
                </a>
            </div>
        </div>

        <!-- Alerts -->
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Sensor Alerts
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    History of all alerts triggered by this sensor
                </p>
            </div>
            
            <div class="bg-white overflow-hidden">
                @if($alerts->count() > 0)
                    <ul class="divide-y divide-gray-200">
                        @foreach($alerts as $alert)
                            <li class="px-6 py-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            @if($alert->type === 'gas_leak')
                                                <div class="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center">
                                                    <svg class="h-5 w-5 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                                    </svg>
                                                </div>
                                            @elseif($alert->type === 'low_gas')
                                                <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
                                                    <svg class="h-5 w-5 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                    </svg>
                                                </div>
                                            @else
                                                <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                                                    <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                    </svg>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">
                                                {{ ucfirst(str_replace('_', ' ', $alert->type)) }}
                                            </div>
                                            <div class="text-sm text-gray-500">
                                                {{ $alert->description }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-sm text-gray-500">
                                            {{ $alert->created_at->diffForHumans() }}
                                        </div>
                                        <div class="text-xs text-gray-400">
                                            {{ $alert->created_at->format('M j, Y g:i A') }}
                                        </div>
                                        @if($alert->resolved_at)
                                            <div class="mt-1">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                    Resolved
                                                </span>
                                            </div>
                                        @else
                                            <div class="mt-1">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                    Active
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                @if($alert->metadata)
                                    <div class="mt-3 pt-3 border-t border-gray-100">
                                        <div class="text-xs text-gray-500 mb-1">Additional Information:</div>
                                        <div class="text-xs bg-gray-50 p-2 rounded overflow-x-auto">
                                            <pre>{{ json_encode($alert->metadata, JSON_PRETTY_PRINT) }}</pre>
                                        </div>
                                    </div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                    <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 sm:px-6">
                        {{ $alerts->links() }}
                    </div>
                @else
                    <div class="px-6 py-12 text-center text-gray-500">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No alerts found</h3>
                        <p class="mt-1 text-sm text-gray-500">This sensor has not triggered any alerts yet.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection