<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import { computed } from 'vue';

const props = defineProps({
    alerts: { type: Object, required: true },
});

const sections = computed(() => props.alerts.sections || []);
</script>

<template>
    <Head title="Alertas — Control Ganadero" />

    <AuthenticatedLayout>
        <template #header><h3 class="mb-0">Centro de alertas</h3></template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item active">Alertas</li>
        </template>

        <div class="row">
            <div v-for="section in sections" :key="section.key" class="col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-header">
                        <h3 class="card-title">{{ section.title }}</h3>
                        <div class="card-tools">
                            <span class="badge text-bg-warning">{{ section.count }}</span>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush">
                            <li
                                v-for="(item, idx) in (section.items || []).slice(0, 8)"
                                :key="idx"
                                class="list-group-item small"
                            >
                                <template v-if="item.ear_tag">
                                    <strong>{{ item.ear_tag }}</strong>
                                    — {{ item.alert_message || item.message || item.reason || JSON.stringify(item).slice(0, 120) }}
                                </template>
                                <template v-else>
                                    {{ item.alert_message || item.message || item.title || item.name || 'Alerta' }}
                                </template>
                            </li>
                            <li v-if="!(section.items || []).length" class="list-group-item text-muted">Sin alertas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
