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

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

/** Eventos */
const emit = defineEmits(["membership-paid"]);

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

const memberData = ref({
  image: null,
  name: "",
  curp: "",
  tutorName: "",
});

const paymentData = ref({
  service: [],
  quantity: 1,
  totalAmount: "",
});

const serviceOptions = ref([
  { id: 1, description: "Membresía Mensual" },
  { id: 2, description: "Membresía Trimestral" },
  { id: 3, description: "Membresía Semestral" },
  { id: 4, description: "Membresía Anual" },
]);

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

  console.log("Buscando miembro:", searchForm.value);

  // Simular datos encontrados
  memberData.value = {
    name: "Juan Pérez García",
    curp: "PEGJ900101HDFRNN09",
    tutorName: "María López Hernández",
    image: null,
  };
};

const handlePayment = () => {
  if (!paymentData.value.service) {
    alert("Por favor selecciona un servicio");
    return;
  }

  console.log("Procesando pago de membresía:", {
    member: memberData.value,
    payment: paymentData.value,
  });

  emit("membership-paid", {
    member: memberData.value,
    payment: paymentData.value,
  });
};

const calculateTotal = () => {
  paymentData.value.totalAmount = "0.00";
};
</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 miembro</h3>
      <form @submit.prevent="handleSearch">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
          <!-- Número de Membresía -->
          <Input
            v-model="searchForm.membershipNumber"
            id="Número de Membresía"
            type="text"
            placeholder=""
          />

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

          <!-- Botón Buscar -->
          <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>

    <!-- Información del Miembro -->
    <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">
        Información del Miembro
      </h3>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Fotografía -->
        <div>
          <label class="block text-sm text-gray-600 font-medium mb-2">
            Fotografía
          </label>
          <div
            class="w-full h-64 bg-gray-200 rounded-lg flex items-center justify-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-24 w-24 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
              />
            </svg>
          </div>
        </div>

        <!-- Datos del miembro -->
        <div class="space-y-5">
          <Input v-model="memberData.name" id="Nombre" type="text" disabled />

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

          <Input
            v-model="memberData.tutorName"
            id="Nombre Tutor"
            type="text"
            disabled
          />
        </div>
      </div>
    </div>

    <!-- Realizar Cobro de Membresía -->
    <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">
        Realizar Cobro de Membresía
      </h3>

      <form @submit.prevent="handlePayment">
        <div class="grid grid-cols-3 gap-4 mb-6">
          <!-- Servicio a Pagar -->
          <Selectable
            v-model="paymentData.service"
            label="description"
            title="Servicio a pagar"
            :options="serviceOptions"
            multiple
          />

          <!-- Cantidad -->
          <Input
            v-model="paymentData.quantity"
            id="Cantidad (días)"
            type="number"
            min="1"
            @input="calculateTotal"
          />

          <!-- Monto Total -->
          <Input
            v-model="paymentData.totalAmount"
            id="Monto Total"
            type="text"
            disabled
          />
        </div>

        <!-- Botón Cobrar -->
        <button
          type="submit"
          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
        >
          Pagar membresía
        </button>
      </form>
    </div>
  </div>
</template>
