<script setup>
import { ref, watch, onMounted, computed } from "vue";
import axios from "axios";
import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
import Bars from "@/Components/Dashboard/Charts/Bars.vue";
import { data } from "autoprefixer";

const dateRange = ref({
  start: new Date().toISOString().slice(0, 10),
  end: new Date().toISOString().slice(0, 10),
});

const loading = ref(false);
const error = ref(null);
const raw = ref([]);

// Toggle para usar datos falsos
const USE_MOCK = ref(false);

// Tipos de apoyo (inventados)
const supportTypes = [
  "Despensas",
  "Despensas Funerarias",
  "Laboratorio",
  "Rayos X",
  "USG",
];

// Distribución por defecto para mock (suman 1)
const mockDistribution = [0.35, 0.08, 0.2, 0.22, 0.15];

const buildMockCounts = (total) => {
  const counts = supportTypes.map((_, i) =>
    Math.round(total * (mockDistribution[i] || 0))
  );
  // Ajustar diferencia por redondeo
  const diff = total - counts.reduce((s, v) => s + v, 0);
  if (diff !== 0) counts[0] += diff;
  return counts;
};

// helpers para sumar por rango
const isoDate = (d) => new Date(d + "T00:00:00");
const totalForRange = (startIso, endIso) => {
  const s = isoDate(startIso);
  const e = isoDate(endIso);
  return raw.value.reduce((acc, r) => {
    const rd = isoDate(r.date);
    if (rd >= s && rd <= e) acc += Number(r.available || 0);
    return acc;
  }, 0);
};

const dayStart = (iso) => iso; // ya vienen en formato YYYY-MM-DD
const weekStartFrom = (endIso) => {
  const d = new Date(endIso + "T00:00:00");
  d.setDate(d.getDate() - 6); // 7 días inclusive
  return d.toISOString().slice(0, 10);
};
const monthRangeFrom = (endIso) => {
  const d = new Date(endIso + "T00:00:00");
  d.setDate(1);
  return d.toISOString().slice(0, 10);
};

// Construye chartData ahora por tipos de apoyo
const chartData = computed(() => {
  const colors = ["#ef4444", "#3b82f6", "#f59e0b"];

  if(USE_MOCK.value) {
    const todayCounts = buildMockCounts(20);
    const weekCounts = buildMockCounts(100);
    const monthCounts = buildMockCounts(400);
    return {
      labels: supportTypes,
      datasets: [
        { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
        { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
        { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
      ],
    }
  }
  const end = dateRange.value.end;
  const todayTotal = totalForRange(end, end);
  const weekTotal = totalForRange(end, weekStartFrom(end));
  const monthTotal = totalForRange(end, monthRangeFrom(end));

  const todayCounts = buildMockCounts(todayTotal || 0);
  const weekCounts = buildMockCounts(weekTotal || 0);
  const monthCounts = buildMockCounts(monthTotal || 0);

  return {
    labels: supportTypes,
    datasets: [
      { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
      { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
      { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
    ],
  }
});


const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { stacked: false },
    y: { beginAtZero: true },
  },
};

const buildEmptyRange = (start, end) => {
  const s = new Date(start);
  const e = new Date(end);
  const list = [];
  for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
    list.push({
      date: new Date(d).toISOString().slice(0, 10),
      available: 0,
      unavailable: 0,
    });
  }
  return list;
};

const mapApiToSeries = (items, start, end) => {
  const base = buildEmptyRange(start, end);
  const byDate = {};
  (items || []).forEach((it) => {
    const key = (it.date || it.fecha || it.day || "").slice(0, 10);
    if (key)
      byDate[key] = {
        date: key,
        available: Number(
          it.available ?? it.disponibles ?? it.available_count ?? 0
        ),
      };
  });
  return base.map((b) => byDate[b.date] || b);
};

const loadData = async () => {
  loading.value = true;
  error.value = null;
  try {
    const res = await axios.get("/api/atencion-ciudadana", {
      params: {
        start: dateRange.value.start,
        end: dateRange.value.end,
      },
      headers: { "X-Requested-With": "XMLHttpRequest" },
    });
    const payload = res.data;
    const items = payload?.data ?? payload?.items ?? payload ?? [];
    raw.value = mapApiToSeries(
      Array.isArray(items) ? items : [],
      dateRange.value.start,
      dateRange.value.end
    );
  } catch (e) {
    console.error(e);
    error.value =
      e.response?.data?.message || e.message || "Error al cargar datos";
    raw.value = mapApiToSeries([], dateRange.value.start, dateRange.value.end);
  } finally {
    loading.value = false;
  }
};

watch(dateRange, loadData, { deep: true });
onMounted(loadData);
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <header>
      <div class="bg-gray-100 py-2">
        <div class="text-left container mx-auto sm:px-6 lg:px-8">
          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
        </div>
      </div>

      <div style="background-color: #621132" class="shadow-lg">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex items-center h-28">
            <img
              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
              alt="Logo Comalcalco"
              class="h-24 w-auto object-contain"
            />
          </div>
        </div>
      </div>
    </header>

    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h1 class="text-xl font-semibold mb-4">Atención Ciudadana</h1>

        <div class="mb-4">
          <DateRange v-model="dateRange" :presets="true" />
          <!-- Toggle para usar datos falsos -->
          <label class="inline-flex items-center text-sm text-gray-600 ml-4">
            <input type="checkbox" v-model="USE_MOCK" class="mr-2 rounded border-gray-300" />
            Usar datos falsos
          </label>
        </div>

        <div class="mb-4 flex items-center gap-4">
          <div v-if="loading" class="ml-auto text-sm text-gray-500">
            Cargando...
          </div>
          <div v-if="error" class="ml-auto text-sm text-red-600">
            {{ error }}
          </div>
        </div>

        <div class="h-64">
          <Bars :chartData="chartData" :chartOptions="chartOptions" />
        </div>
      </div>
    </section>

    <section>
      <div class="min-h-screen bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div
              class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
            >
              <div class="flex items-center justify-between">
                <div>
                  <h2 class="text-lg font-medium opacity-90">Apoyos Mes</h2>
                  <span >Entregados en el mes</span>
                </div>
                <div
                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
                >
                  <span class="text-2xl font-bold text-green-600">20</span>
                </div>
              </div>
            </div>
            <div
              class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
            >
              <div class="flex items-center justify-between">
                <div>
                  <h2 class="text-lg font-medium opacity-90">Apoyos Semana</h2>
                  <span class="text-sm">Entregados en la semana</span>
                </div>
                <div
                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
                >
                  <span class="text-2xl font-bold text-blue-600">20</span>
                </div>
              </div>
            </div>
            <div
              class="bg-gradient-to-r from-yellow-600 to-amber-700 rounded-lg shadow-lg p-6 text-white"
            >
              <div class="flex items-center justify-between">
                <div>
                  <h2 class="text-lg font-medium opacity-90">Apoyos Hoy</h2>
                  <span class="text-sm">Entregados hoy</span>
                </div>
                <div
                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
                >
                  <span class="text-2xl font-bold text-amber-600">20</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
