<template>
  <div class="layout-px-spacing">
    <div class="row layout-top-spacing">
      <div class="col-12 layout-spacing">
        <div class="panel p-4">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
              <h3 class="mb-1">Centro de alertas</h3>
              <p class="text-muted mb-0">Peso, costo/kg, salud de crías y vacas madre en un solo lugar.</p>
            </div>
            <button class="btn btn-outline-primary btn-sm" :disabled="loading" @click="load">Actualizar</button>
          </div>

          <div v-if="center?.total_count === 0" class="alert alert-success">
            No hay alertas pendientes en este momento.
          </div>

          <div v-else-if="center" class="alert alert-warning mb-4">
            <strong>{{ center.total_count }}</strong> alerta(s) requieren revisión.
          </div>

          <div v-for="section in center?.sections" :key="section.key" class="mb-4" v-show="section.count > 0">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h5 class="mb-0">
                {{ section.title }}
                <span class="badge bg-danger ms-2">{{ section.count }}</span>
              </h5>
              <router-link :to="section.route" class="btn btn-sm btn-outline-secondary">Ver módulo</router-link>
            </div>

            <div class="table-responsive">
              <table class="table table-sm table-hover">
                <thead>
                  <tr>
                    <th>Arete / referencia</th>
                    <th>Detalle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, idx) in section.items.slice(0, 15)" :key="idx">
                    <td>
                      <router-link
                        v-if="item.cattle_id"
                        :to="{ name: 'ranch-animal-detail', params: { id: item.cattle_id } }"
                      >
                        {{ item.ear_tag }}
                      </router-link>
                      <router-link
                        v-else-if="item.mother_id"
                        :to="{ name: 'ranch-animal-detail', params: { id: item.mother_id } }"
                      >
                        {{ item.ear_tag }}
                      </router-link>
                      <span v-else>{{ item.ear_tag || item.lot_name || '—' }}</span>
                    </td>
                    <td class="small">{{ itemDetail(section.key, item) }}</td>
                  </tr>
                </tbody>
              </table>
              <p v-if="section.items.length > 15" class="small text-muted mb-0">
                y {{ section.items.length - 15 }} más en el módulo dedicado…
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import RanchRepository from '@/repositories/RanchRepository';

const loading = ref(false);
const center = ref(null);

function itemDetail(sectionKey, item) {
  if (sectionKey === 'weight') {
    return item.alert_message || item.alert_type || '—';
  }
  if (sectionKey === 'cost') {
    return item.alert_message || `Costo ${item.cost_per_kg_gained} $/kg`;
  }
  if (sectionKey === 'mothers_health') {
    return `${item.offspring_illness_events} enfermedades en crías`;
  }
  return item.alert_message || '—';
}

async function load() {
  loading.value = true;
  try {
    center.value = await RanchRepository.alertCenter();
  } finally {
    loading.value = false;
  }
}

onMounted(load);
</script>
