@extends('layouts.app')

@section('title', 'Alertas')
@section('page-title', 'Alertas')

@section('content')
    @include('partials.flash')

    <div class="mb-4">
        <a href="{{ route('analytics.index') }}" class="text-sm font-medium text-emerald-700">← Voltar aos Indicadores</a>
    </div>

    <div class="space-y-3">
        @forelse ($alerts as $alert)
            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <p class="font-semibold text-slate-900">{{ $alert->title }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ $alert->body }}</p>
                        <p class="mt-2 text-xs text-slate-400">
                            {{ $alert->severity->label() }} · {{ $alert->status->label() }} · {{ $alert->triggered_at?->format('d/m/Y H:i') }}
                        </p>
                    </div>
                    @if ($alert->status->value === 'open' && auth()->user()->hasAnyRole(['Admin', 'Gestor']))
                        <form method="POST" action="{{ route('analytics.alerts.ack', $alert->id) }}">
                            @csrf
                            <button type="submit" class="rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white hover:bg-emerald-700">
                                Reconhecer
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        @empty
            <p class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                Nenhum alerta registrado.
            </p>
        @endforelse
    </div>

    <div class="mt-4">{{ $alerts->links() }}</div>
@endsection
