<template>
  <div class="layout-px-spacing">
    <teleport to="#breadcrumb">
      <ul class="navbar-nav flex-row">
        <li>
          <div class="page-header">
            <nav class="breadcrumb-one" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="javascript:;">Reportes</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                  <span>Ventas al mes</span>
                </li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row layout-top-spacing">
      <!-- Filtros -->
      <div class="col-12">
        <div class="panel p-3 mb-3">
          <div class="row align-items-end g-2">
            <div class="col-auto">
              <label class="form-label small mb-0">Año</label>
              <select
                v-model="yearFilter"
                class="form-select form-select-sm"
                style="width: auto; min-width: 100px;"
                @change="cargar"
              >
                <option :value="null">Todos</option>
                <option v-for="y in añosDisponibles" :key="y" :value="y">{{ y }}</option>
              </select>
            </div>
            <div class="col-auto">
              <label class="form-label small mb-0">Mes</label>
              <select
                v-model="monthFilter"
                class="form-select form-select-sm"
                style="width: auto; min-width: 120px;"
                @change="cargar"
              >
                <option :value="null">Todos los meses</option>
                <option v-for="(nombre, num) in meses" :key="num" :value="parseInt(num, 10)">
                  {{ nombre }}
                </option>
              </select>
            </div>
            <div class="col-auto">
              <button class="btn btn-primary btn-sm" @click="cargar" :disabled="loading">
                {{ loading ? "Cargando..." : "Aplicar" }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Tarjetas de resumen -->
      <div v-if="!loading && datos.length > 0" class="col-12 mb-3">
        <div class="row g-3">
          <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
              <div class="card-body">
                <p class="text-muted small mb-1">Total ventas</p>
                <h4 class="mb-0 text-primary">${{ formatearMonto(totalVentas) }}</h4>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
              <div class="card-body">
                <p class="text-muted small mb-1">Órdenes entregadas</p>
                <h4 class="mb-0">{{ totalOrdenes }}</h4>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
              <div class="card-body">
                <p class="text-muted small mb-1">Promedio por orden</p>
                <h4 class="mb-0 text-success">${{ formatearMonto(promedioPorOrden) }}</h4>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
              <div class="card-body">
                <p class="text-muted small mb-1">Meses con ventas</p>
                <h4 class="mb-0">{{ filas.length }}</h4>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
              <div class="card-body">
                <p class="text-muted small mb-1">Líneas catálogo POS (en el periodo)</p>
                <h4 class="mb-0 text-info">{{ totalLineasCatalogoPos }}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Gráfica -->
      <div v-if="!loading && filas.length > 0" class="col-xl-8 col-lg-12 layout-spacing">
        <div class="panel p-3 h-100">
          <h5 class="mb-3">Ventas por mes</h5>
          <apexchart
            type="bar"
            height="320"
            :options="opcionesGrafica"
            :series="seriesGrafica"
          />
        </div>
      </div>
      <div v-if="!loading && filas.length > 0" class="col-xl-4 col-lg-12 layout-spacing">
        <div class="panel p-3 h-100">
          <h5 class="mb-3">Órdenes por mes</h5>
          <apexchart
            type="donut"
            height="320"
            :options="opcionesDonut"
            :series="seriesDonut"
          />
        </div>
      </div>

      <!-- Tabla de datos -->
      <div class="col-12 layout-spacing">
        <div class="panel p-3">
          <h5 class="mb-3">Detalle por mes</h5>
          <div v-if="loading" class="text-center py-5 text-muted">
            Cargando ventas...
          </div>
          <div v-else-if="filas.length === 0" class="text-center py-5 text-muted">
            No hay ventas registradas para el criterio seleccionado.
          </div>
          <div v-else class="table-responsive">
            <table class="table table-hover table-striped">
              <thead class="table-light">
                <tr>
                  <th>Año</th>
                  <th>Mes</th>
                  <th class="text-end">Cantidad de órdenes</th>
                  <th class="text-end" title="Líneas con laundry_sale_product_id">Líneas POS</th>
                  <th class="text-end">Total ventas</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="fila in filas" :key="`${fila.anio}-${fila.mes}`">
                  <td>{{ fila.anio }}</td>
                  <td>{{ fila.mes_nombre }}</td>
                  <td class="text-end">{{ fila.cantidad_ordenes }}</td>
                  <td class="text-end">{{ fila.lineas_catalogo_pos ?? 0 }}</td>
                  <td class="text-end fw-semibold">${{ formatearMonto(fila.total_ventas) }}</td>
                </tr>
              </tbody>
              <tfoot class="table-light">
                <tr>
                  <td colspan="2" class="fw-bold">Total</td>
                  <td class="text-end fw-bold">{{ totalOrdenes }}</td>
                  <td class="text-end fw-bold">{{ totalLineasCatalogoPos }}</td>
                  <td class="text-end fw-bold">${{ formatearMonto(totalVentas) }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import apexchart from "vue3-apexcharts";
import * as VentasRepository from "@/repositories/VentasRepository";
const loading = ref(false);
const datos = ref([]);
const yearFilter = ref(new Date().getFullYear());
const monthFilter = ref(null);

const meses = {
  1: "Enero", 2: "Febrero", 3: "Marzo", 4: "Abril",
  5: "Mayo", 6: "Junio", 7: "Julio", 8: "Agosto",
  9: "Septiembre", 10: "Octubre", 11: "Noviembre", 12: "Diciembre",
};

const filas = computed(() => datos.value);

const añosDisponibles = computed(() => {
  const años = [...new Set(datos.value.map((d) => d.anio))].sort((a, b) => b - a);
  if (años.length === 0) {
    const y = new Date().getFullYear();
    return [y, y - 1, y - 2];
  }
  return años;
});

const totalOrdenes = computed(() => filas.value.reduce((s, f) => s + f.cantidad_ordenes, 0));
const totalLineasCatalogoPos = computed(() =>
  filas.value.reduce((s, f) => s + (f.lineas_catalogo_pos ?? 0), 0)
);
const totalVentas = computed(() => filas.value.reduce((s, f) => s + f.total_ventas, 0));
const promedioPorOrden = computed(() =>
  totalOrdenes.value > 0 ? totalVentas.value / totalOrdenes.value : 0
);

const seriesGrafica = computed(() => [
  {
    name: "Ventas ($)",
    data: filas.value.map((f) => f.total_ventas),
  },
]);

const opcionesGrafica = computed(() => ({
  chart: { toolbar: { show: false } },
  plotOptions: {
    bar: { columnWidth: "60%", borderRadius: 4 },
  },
  dataLabels: { enabled: false },
  stroke: { show: true, width: 1 },
  xaxis: {
    categories: filas.value.map((f) => `${f.mes_nombre} ${f.anio}`),
    labels: { rotate: -45, rotateAlways: filas.value.length > 6 },
  },
  yaxis: {
    labels: {
      formatter: (val) => "$" + Number(val).toLocaleString("es-MX", { maximumFractionDigits: 0 }),
    },
  },
  tooltip: {
    y: {
      formatter: (val) => "$" + Number(val).toLocaleString("es-MX", { minimumFractionDigits: 2 }),
    },
  },
  colors: ["#5c1ac3"],
}));

const seriesDonut = computed(() => filas.value.map((f) => f.cantidad_ordenes));
const opcionesDonut = computed(() => ({
  chart: { type: "donut" },
  labels: filas.value.map((f) => `${f.mes_nombre} ${f.anio}`),
  legend: { position: "bottom" },
  dataLabels: { formatter: (val) => val.toFixed(1) + "%" },
}));

function formatearMonto(n) {
  return Number(n).toLocaleString("es-MX", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

async function cargar() {
  loading.value = true;
  try {
    const res = await VentasRepository.getVentasMensuales(
      yearFilter.value || undefined,
      monthFilter.value || undefined
    );
    datos.value = res.data || [];
  } catch (e) {
    console.error("Error cargando ventas mensuales:", e);
    datos.value = [];
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  cargar();
});
</script>
