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

const props = defineProps({
  membership: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["select"]);

const hasExpiration = computed(() => Boolean(props.membership?.expires_at));

const isNoExpires = computed(() => props.membership?.status === "no_expires");

const isExpired = computed(() => {
  if (!props.membership || isNoExpires.value || !props.membership.expires_at) {
    return false;
  }

  return new Date(props.membership.expires_at) <= new Date();
});

const daysUntilExpiration = computed(() => {
  if (!props.membership || isNoExpires.value || !props.membership.expires_at) {
    return null;
  }

  const expirationDate = new Date(props.membership.expires_at);
  const now = new Date();
  const diffTime = expirationDate - now;

  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
});

const statusLabel = computed(() => {
  if (isNoExpires.value) return "Sin vencimiento";
  if (isExpired.value || props.membership?.status === "expired") return "Vencida";
  if (props.membership?.status === "active") return "Activa";
  return props.membership?.status || "Sin estatus";
});

const statusClasses = computed(() => {
  if (isNoExpires.value) return "bg-slate-100 text-slate-700";
  if (isExpired.value || props.membership?.status === "expired") {
    return "bg-red-100 text-red-700";
  }
  if (props.membership?.status === "active") {
    return "bg-green-100 text-green-700";
  }
  return "bg-gray-100 text-gray-700";
});

const cardClasses = computed(() => {
  if (isNoExpires.value) {
    return "border-slate-200 bg-slate-50 hover:border-slate-300";
  }

  if (isExpired.value || props.membership?.status === "expired") {
    return "border-red-200 bg-red-50 hover:border-red-300";
  }

  if (props.membership?.status === "active") {
    return "border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 hover:border-green-400";
  }

  return "border-gray-200 bg-white hover:border-primary";
});

const expirationHint = computed(() => {
  if (!hasExpiration.value || isNoExpires.value || daysUntilExpiration.value == null) {
    return "No requiere renovación";
  }

  if (daysUntilExpiration.value < 0) {
    return "Membresía vencida";
  }

  if (daysUntilExpiration.value === 0) {
    return "Vence hoy";
  }

  if (daysUntilExpiration.value === 1) {
    return "Vence mañana";
  }

  return `Faltan ${daysUntilExpiration.value} días`;
});

const expirationHintClasses = computed(() => {
  if (isNoExpires.value) return "bg-slate-100 text-slate-600";
  if (isExpired.value || props.membership?.status === "expired") {
    return "bg-red-100 text-red-600";
  }
  if (props.membership?.status === "active") {
    return daysUntilExpiration.value != null && daysUntilExpiration.value <= 7
      ? "bg-amber-100 text-amber-700"
      : "bg-green-100 text-green-700";
  }
  return "bg-gray-100 text-gray-600";
});

const formattedExpiration = computed(() => {
  if (!hasExpiration.value) return "No aplica";

  return new Date(props.membership.expires_at).toLocaleDateString("es-MX", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
});
</script>

<template>
  <button
    type="button"
    class="w-full rounded-xl border p-4 text-left shadow-sm transition hover:shadow-md"
    :class="cardClasses"
    @click="emit('select', membership)"
  >
    <div class="flex items-start justify-between gap-4">
      <div class="min-w-0">
        <p class="truncate text-base font-semibold text-gray-900">
          {{ membership.charge_concept?.name || "Membresía sin nombre" }}
        </p>
        <p class="mt-1 text-sm text-gray-500">
          {{ membership.charge_concept?.short_name || "Sin clave corta" }}
        </p>
      </div>
      <span
        class="rounded-full px-3 py-1 text-xs font-semibold"
        :class="statusClasses"
      >
        {{ statusLabel }}
      </span>
    </div>

    <div class="mt-3 inline-flex rounded-full px-3 py-1 text-sm font-medium" :class="expirationHintClasses">
      {{ expirationHint }}
    </div>

    <div class="mt-4 grid gap-3 md:grid-cols-2">
      <div class="rounded-lg bg-white/70 p-3">
        <p class="text-xs uppercase tracking-wide text-gray-500">Estatus</p>
        <p class="mt-1 text-sm font-medium text-gray-800">
          {{ statusLabel }}
        </p>
      </div>
      <div class="rounded-lg bg-white/70 p-3">
        <p class="text-xs uppercase tracking-wide text-gray-500">Vencimiento</p>
        <p class="mt-1 text-sm font-medium text-gray-800">
          {{ formattedExpiration }}
        </p>
      </div>
    </div>
  </button>
</template>
