@extends('layouts.app')

@section('title', 'Tableau de Bord IoT')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item active">IoT Dashboard</li>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Tableau de Bord IoT</h4>
    <a href="{{ route('sensors.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-list-ul"></i> Liste des capteurs
    </a>
</div>

<div class="row g-4">
    @forelse($sensors as $sensor)
        @php
            $lastReading = $sensor->readings->first();
            $value = $lastReading ? $lastReading->value : null;
            $isAlert = false;
            if ($value !== null) {
                if (($sensor->min_threshold && $value < $sensor->min_threshold) || 
                    ($sensor->max_threshold && $value > $sensor->max_threshold)) {
                    $isAlert = true;
                }
            }
            $bgClass = $isAlert ? 'bg-danger text-white' : 'bg-white';
            $textClass = $isAlert ? 'text-white' : 'text-dark';
            $mutedClass = $isAlert ? 'text-white-50' : 'text-muted';
        @endphp
        
        <div class="col-md-4 col-lg-3">
            <div class="card h-100 shadow-sm {{ $bgClass }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="card-title mb-0 {{ $textClass }}">{{ $sensor->name }}</h5>
                        @switch($sensor->type)
                            @case('temperature') <i class="bi bi-thermometer-half fs-4 {{ $textClass }}"></i> @break
                            @case('humidity') <i class="bi bi-moisture fs-4 {{ $textClass }}"></i> @break
                            @case('light') <i class="bi bi-brightness-high fs-4 {{ $textClass }}"></i> @break
                            @default <i class="bi bi-broadcast fs-4 {{ $textClass }}"></i>
                        @endswitch
                    </div>
                    
                    <p class="card-text small {{ $mutedClass }} mb-3">
                        {{ $sensor->building->name ?? 'Extérieur' }} &bull; {{ $sensor->location ?? 'N/A' }}
                    </p>

                    <div class="text-center my-3">
                        <span class="display-6 fw-bold {{ $textClass }}">
                            {{ $value !== null ? $value : '--' }}
                        </span>
                        <span class="fs-5 {{ $mutedClass }}">
                            @switch($sensor->type)
                                @case('temperature') °C @break
                                @case('humidity') % @break
                                @case('light') Lux @break
                                @case('co2') ppm @break
                                @default 
                            @endswitch
                        </span>
                    </div>

                    <div class="d-flex justify-content-between align-items-end mt-3 border-top pt-2 {{ $isAlert ? 'border-white' : '' }}">
                        <small class="{{ $mutedClass }}">
                            <i class="bi bi-clock"></i> 
                            {{ $lastReading ? $lastReading->recorded_at->diffForHumans() : 'Jamais' }}
                        </small>
                        <a href="{{ route('sensors.show', $sensor) }}" class="btn btn-sm btn-light stretched-link {{ $isAlert ? '' : 'd-none' }}">Détails</a>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="alert alert-info py-5 text-center">
                <i class="bi bi-info-circle display-4 mb-3 d-block"></i>
                <p>Aucun capteur actif à afficher.</p>
                <a href="{{ route('sensors.create') }}" class="btn btn-primary mt-2">Démarrer en ajoutant un capteur</a>
            </div>
        </div>
    @endforelse
</div>
@endsection