<script setup>
import { ref } from "vue";
import { api, apiURL } from "@Services/Api";

import Input from "@Holos/Form/Input.vue";

/** Eventos */
const emit = defineEmits(["discount-authorized"]);

/** Refs */
const searchForm = ref({
  fineNumber: "",
  placa: "",
  curp: "",
});

const discountData = ref({
  id: null,
  fecha: "",
  placa: "",
  vin: "",
  licencia: "",
  tarjeta: "",
  rfc: "",
  nombre: "",
  montoOriginal: "",
  pagoMinimo: "",
  nuevoMonto: "",
  descuentoAplicado: "",
  // Solo los valores numéricos necesarios para cálculos
  total_amount: 0,
  min_total: 0,
  discount: 0,
  isPaid: false,
  hasDiscount: false,
});

/** Métodos */
const handleSearch = async () => {
  if (
    !searchForm.value.fineNumber &&
    !searchForm.value.placa &&
    !searchForm.value.curp
  ) {
    window.Notify.warning("Por favor ingresa al menos un criterio de búsqueda");
    return;
  }

  await api.get(apiURL(`fines/search`), {
    params: {
      id: searchForm.value.fineNumber.trim() || undefined,
      plate: searchForm.value.placa.trim() || undefined,
      curp: searchForm.value.curp.trim() || undefined,
    },
    onSuccess: (data) => {
      const model = data.model;
      const hasDiscount = model.discount && parseFloat(model.discount) > 0;
      const isPaid =
        model.payments &&
        model.payments.length > 0 &&
        model.payments[0].status === "paid";

      // Verificar si ya está pagada
      if (isPaid) {
        window.Notify.info("La multa ya ha sido pagada previamente");

        discountData.value = {
          id: model.id,
          fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
          placa: model.plate || "",
          vin: model.vin || "",
          licencia: model.license || "",
          tarjeta: model.circulation || "",
          rfc: model.rfc || "",
          nombre: model.name || "",
          montoOriginal: `$${data.total_amount.toFixed(2)}`,
          pagoMinimo: `$${data.min_total.toFixed(2)}`,
          nuevoMonto: "",
          total_amount: data.total_amount,
          min_total: data.min_total,
          discount: parseFloat(model.discount) || 0,
          isPaid: true,
          hasDiscount: hasDiscount,
        };
        return;
      }

      if (hasDiscount) {
        window.Notify.info(
          "La multa ya tiene un descuento aplicado previamente"
        );
        // Multa pendiente
        discountData.value = {
          id: model.id,
          fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
          placa: model.plate || "",
          vin: model.vin || "",
          licencia: model.license || "",
          tarjeta: model.circulation || "",
          rfc: model.rfc || "",
          nombre: model.name || "",
          montoOriginal: `$${data.total_amount.toFixed(2)}`,
          pagoMinimo: `$${data.min_total.toFixed(2)}`,
          descuentoAplicado: `$${parseFloat(model.discount).toFixed(2)}`,
          nuevoMonto: data.total_to_pay.toFixed(2),
          total_amount: data.total_amount,
          min_total: data.min_total,
          discount: parseFloat(model.discount),
          isPaid: false,
          hasDiscount: true,
        };
        return;
      }

      discountData.value = {
        id: model.id,
        fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
        placa: model.plate || "",
        vin: model.vin || "",
        licencia: model.license || "",
        tarjeta: model.circulation || "",
        rfc: model.rfc || "",
        nombre: model.name || "",
        montoOriginal: `$${data.total_amount.toFixed(2)}`,
        pagoMinimo: `$${data.min_total.toFixed(2)}`,
        nuevoMonto: data.min_total.toFixed(2),
        total_amount: data.total_amount,
        min_total: data.min_total,
        discount: 0,
        isPaid: false,
        hasDiscount: false,
      };

      window.Notify.success("Multa encontrada");
    },
    onFail: (error) => {
      window.Notify.error(error.message || "Multa no encontrada");
      clearDiscountData();
    },
    onError: (error) => {
      console.error("Error al buscar multa:", error);
      window.Notify.error("Ocurrió un error al buscar la multa");
      clearDiscountData();
    },
  });
};

const handleAuthorize = async () => {
  if (!discountData.value.id) {
    window.Notify.warning("No hay multa cargada para autorizar");
    return;
  }

  if (discountData.value.hasDiscount) {
    window.Notify.error("Esta multa ya tiene un descuento autorizado");
    return;
  }

  if (!discountData.value.nuevoMonto) {
    window.Notify.warning("Por favor ingresa el nuevo monto autorizado");
    return;
  }

  const nuevoMontoNumber = parseFloat(discountData.value.nuevoMonto);

  if (nuevoMontoNumber < discountData.value.min_total) {
    window.Notify.error(
      `El monto no puede ser menor al pago mínimo de $${discountData.value.min_total.toFixed(
        2
      )}`
    );
    return;
  }

  if (nuevoMontoNumber > discountData.value.total_amount) {
    window.Notify.error(
      `El monto no puede ser mayor al original de $${discountData.value.total_amount.toFixed(
        2
      )}`
    );
    return;
  }

  const descuento = discountData.value.total_amount - nuevoMontoNumber;

  await api.put(apiURL(`fines/${discountData.value.id}/discount`), {
    data: {
      discount: descuento,
    },
    onSuccess: (response) => {
      window.Notify.success("Descuento autorizado exitosamente");

      emit("discount-authorized", {
        fine_id: discountData.value.id,
        authorized_amount: nuevoMontoNumber,
        discount: descuento,
        response: response,
      });

      clearDiscountData();
      clearSearchForm();
    },
    onFail: (error) => {
      window.Notify.error(error.message || "Error al autorizar el descuento");
    },
    onError: (error) => {
      console.error("Error al autorizar descuento:", error);
      window.Notify.error("Ocurrió un error al autorizar el descuento");
    },
  });
};

const clearDiscountData = () => {
  discountData.value = {
    id: null,
    fecha: "",
    placa: "",
    vin: "",
    licencia: "",
    tarjeta: "",
    rfc: "",
    nombre: "",
    montoOriginal: "",
    pagoMinimo: "",
    descuentoAplicado: "",
    nuevoMonto: "",
    total_amount: 0,
    min_total: 0,
    discount: 0,
    isPaid: false,
    hasDiscount: false,
  };
};

const clearSearchForm = () => {
  searchForm.value = {
    fineNumber: "",
    placa: "",
    curp: "",
  };
};
</script>

<template>
  <div class="p-6">
    <!-- Formulario de búsqueda -->
    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-6">
      <h3 class="text-xl font-semibold mb-6 text-gray-800">
        Buscar Multa para Autorización
      </h3>

      <form @submit.prevent="handleSearch">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
          <Input
            v-model="searchForm.fineNumber"
            id="Número de Multa"
            type="text"
          />

          <Input v-model="searchForm.placa" id="Placa" type="text" />

          <Input v-model="searchForm.curp" id="CURP" type="text" />

          <button
            type="submit"
            class="py-3 px-8 rounded-lg transition-colors h-[42px] bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium"
          >
            Buscar
          </button>
        </div>
      </form>
    </div>

    <!-- Detalles para Autorización -->
    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg">
      <h3 class="text-xl font-semibold mb-6 text-gray-800">
        Detalles para Autorización
      </h3>

      <form @submit.prevent="handleAuthorize">
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.fecha"
            id="Fecha de Multa"
            type="text"
            disabled
          />
          <Input v-model="discountData.placa" id="Placa" type="text" disabled />
        </div>

        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input v-model="discountData.vin" id="VIN" type="text" disabled />
          <Input
            v-model="discountData.licencia"
            id="Licencia"
            type="text"
            disabled
          />
        </div>

        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.tarjeta"
            id="Tarjeta de Circulación"
            type="text"
            disabled
          />
          <Input v-model="discountData.rfc" id="RFC" type="text" disabled />
        </div>

        <div class="mb-5">
          <Input
            v-model="discountData.nombre"
            id="Nombre"
            type="text"
            disabled
          />
        </div>

        <hr class="my-6 border-gray-300" />

        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.montoOriginal"
            id="Monto a Pagar (Original)"
            type="text"
            disabled
          />
          <Input
            v-model="discountData.pagoMinimo"
            id="Pago Mínimo"
            type="text"
            disabled
          />
        </div>

        <div v-if="discountData.hasDiscount" class="mb-5">
          <Input
            v-model="discountData.descuentoAplicado"
            id="Descuento Ya Aplicado"
            type="text"
            disabled
          />
        </div>

        <div class="mb-6">
          <Input
            v-model="discountData.nuevoMonto"
            id="Nuevo Monto a Cobrar (Autorizado)"
            type="number"
            step="0.01"
            :min="discountData.min_total"
            :max="discountData.total_amount"
            placeholder="Ingrese el nuevo monto autorizado"
            :disabled="discountData.isPaid || discountData.hasDiscount"
            required
          />
        </div>

        <!-- Alertas -->
        <div
          v-if="discountData.isPaid"
          class="mb-5 p-4 bg-blue-50 border border-blue-200 rounded-lg"
        >
          <p class="text-blue-800 font-semibold">
            Esta multa ya ha sido pagada previamente
          </p>
        </div>

        <div
          v-if="discountData.hasDiscount && !discountData.isPaid"
          class="mb-5 p-4 bg-yellow-50 border border-yellow-200 rounded-lg"
        >
          <p class="text-yellow-800 font-semibold">
            Esta multa ya tiene un descuento autorizado de
            {{ discountData.descuentoAplicado }}
          </p>
          <p class="text-yellow-700 text-sm mt-1">
            Monto con descuento: ${{
              (discountData.total_amount - discountData.discount).toFixed(2)
            }}
          </p>
        </div>

        <button
          type="submit"
          :disabled="discountData.isPaid || !discountData.id"
          :class="[
            'w-full font-medium py-3.5 rounded-lg transition-colors',
            discountData.isPaid || discountData.hasDiscount || !discountData.id
              ? 'bg-gray-400 cursor-not-allowed'
              : 'bg-green-700 hover:bg-green-600 text-white',
          ]"
        >
          {{
            discountData.isPaid
              ? "Multa ya pagada"
              : discountData.hasDiscount
              ? "Descuento ya aplicado"
              : "Autorizar Descuento"
          }}
        </button>
      </form>
    </div>
  </div>
</template>
