<template>
  <div class="layout-px-spacing">
    <div class="row layout-top-spacing">
      <div class="col-12 layout-spacing">
        <div class="panel p-4">
          <h3 class="mb-4">Panel del rancho</h3>

          <div
            v-if="(summary?.open_lots_gdp_alerts ?? 0) > 0"
            class="alert alert-danger d-flex justify-content-between align-items-center flex-wrap gap-2"
          >
            <span>
              <strong>{{ summary.open_lots_gdp_alerts }}</strong> lote(s) de engorda con GDP bajo la meta.
            </span>
            <router-link to="/ganaderia/engorda-proyeccion" class="btn btn-sm btn-danger">Ver GDP en engorda</router-link>
          </div>

          <div
            v-if="(summary?.open_fattening_lots_below_target ?? 0) > 0"
            class="alert alert-warning d-flex justify-content-between align-items-center flex-wrap gap-2"
          >
            <span>
              <strong>{{ summary.open_fattening_lots_below_target }}</strong> lote(s) de engorda proyectan utilidad bajo la meta.
            </span>
            <router-link to="/ganaderia/engorda-proyeccion" class="btn btn-sm btn-danger">Ver proyección</router-link>
          </div>

          <div
            v-if="(summary?.alert_center_total ?? 0) > 0"
            class="alert alert-warning d-flex justify-content-between align-items-center flex-wrap gap-2"
          >
            <span>
              <strong>{{ summary.alert_center_total }}</strong> alerta(s) en peso, costo, salud o vacas madre.
            </span>
            <router-link to="/ganaderia/alertas" class="btn btn-sm btn-warning">Centro de alertas</router-link>
          </div>

          <div class="row g-3" v-if="summary">
            <div class="col-md-4" v-for="card in cards" :key="card.label">
              <div class="card border-0 shadow-sm h-100" :class="card.alert ? 'border-warning' : ''">
                <div class="card-body">
                  <p class="text-muted mb-1">{{ card.label }}</p>
                  <h4 class="mb-0" :class="card.alert ? 'text-warning' : 'text-primary'">{{ card.value }}</h4>
                </div>
              </div>
            </div>
          </div>
          <div v-if="summary?.inventory_by_location?.length" class="mt-4">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h5 class="mb-0">Ganado por ubicación</h5>
              <router-link to="/ganaderia/inventario-ubicacion" class="btn btn-sm btn-outline-primary">Ver reporte</router-link>
            </div>
            <table class="table table-sm mb-0">
              <thead>
                <tr>
                  <th>Ubicación</th>
                  <th class="text-end">Cabezas</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="loc in summary.inventory_by_location" :key="loc.location_key">
                  <td>
                    <span class="badge bg-secondary me-1">{{ loc.location_type_label }}</span>
                    {{ loc.location_label }}
                  </td>
                  <td class="text-end">{{ loc.head_count }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p v-else-if="!summary" class="text-muted">Cargando resumen...</p>
        </div>
      </div>
    </div>
  </div>
</template>

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

const summary = ref(null);

const cards = computed(() => {
  if (!summary.value) return [];
  const s = summary.value;
  return [
    { label: 'Ganado activo', value: s.active_cattle },
    { label: 'Alertas pendientes', value: s.alert_center_total ?? 0, alert: (s.alert_center_total ?? 0) > 0 },
    { label: 'Partos del mes', value: s.calvings_this_month ?? 0 },
    { label: 'Ventas del mes', value: s.sold_this_month },
    { label: 'Muertes del mes', value: s.deaths_this_month },
    { label: 'Lotes de engorda abiertos', value: s.open_fattening_lots },
    { label: 'Gastos del mes', value: formatMoney(s.expenses_this_month) },
    { label: 'Ingresos del mes', value: formatMoney(s.income_this_month) },
  ];
});

function formatMoney(n) {
  return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(n || 0);
}

onMounted(async () => {
  try {
    summary.value = await RanchRepository.dashboard();
  } catch (e) {
    console.error(e);
  }
});
</script>
