<script setup>
import { ref } from "vue";

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

/** Eventos */
const emit = defineEmits(["fine-searched"]);

/** Refs */
const fineNumber = ref("");
const fineData = ref({
  fecha: "",
  placa: "",
  vin: "",
  licencia: "",
  tarjeta: "",
  rfc: "",
  nombre: "",
  monto: "",
});

/** Métodos */
const handleSearch = () => {
  if (!fineNumber.value.trim()) {
    alert("Por favor ingresa un número de multa");
    return;
  }

  // Aquí harías la llamada a la API para buscar la multa
  console.log("Buscando multa:", fineNumber.value);

  // Simular datos encontrados (temporal)
  fineData.value = {
    fecha: "2025-11-11",
    placa: "ABC-123-DEF",
    vin: "1HGBH41JXMN109186",
    licencia: "LIC123456",
    tarjeta: "TC987654",
    rfc: "XAXX010101000",
    nombre: "Juan Pérez García",
    monto: "$1,500.00",
  };

  emit("fine-searched", fineData.value);
};

const handlePayment = () => {
  if (!fineData.value.monto) {
    alert("No hay multa cargada para cobrar");
    return;
  }

  console.log("Procesando pago de:", fineData.value.monto);
  emit("payment-processed", fineData.value);
};
</script>
<template>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
    <div class="bg-white rounded-xl p-6 shadow-lg">
      <h3 class="text-xl font-semibold mb-4 text-gray-800">Buscar Multa</h3>

      <div class="mb-6">
        <label class="block text-sm text-gray-600 font-medium mb-2">
          Escanear Código QR
        </label>
        <div
          class="w-full h-1/2 bg-gray-800 rounded-lg flex flex-col items-center justify-center"
        >
          <!-- QR -->
          <QRscan v-model:fineNumber="fineNumber" @fine-searched="handleSearch" />
        </div>
      </div>

      <div class="mb-5">
        <Input
          v-model="fineNumber"
          id="Número de Multa"
          type="text"
          placeholder="Ingrese el número de multa"
          @keyup.enter="handleSearch"
        />
      </div>

      <button
        @click="handleSearch"
        type="button"
        class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
      >
        Buscar
      </button>
    </div>
     <div class="bg-white rounded-xl p-6 shadow-lg">
      <h3 class="text-xl font-semibold mb-4 text-gray-800">
        Detalles de la Multa
      </h3>

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

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

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

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

        <!-- Línea separadora -->
        <hr class="my-6 border-gray-300" />

        <!-- Monto a Pagar -->
        <div class="mb-5">
          <Input
            v-model="fineData.monto"
            id="Monto a Pagar"
            type="text"
            disabled
            class="text-lg font-semibold"
          />
        </div>

        <!-- Botón Cobrar -->
        <button
          type="submit"
          class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
        >
          Cobrar
        </button>
      </form>
    </div>
  </div>
</template>
