<template>
  <ClientOnly>
    <div v-if="shouldShowBanner" class="w-full">
      <div
        :class="[
          'backdrop-blur-sm border rounded-lg p-4 flex items-start gap-4',
          statusConfig.bgColor,
          statusConfig.borderColor,
        ]"
      >
        <Icon
          :name="statusConfig.icon"
          :class="['w-5 h-5 flex-shrink-0 mt-0.5', statusConfig.textColor]"
        />

        <div class="flex-1 min-w-0">
          <h3 :class="['font-semibold mb-1', statusConfig.textColor]">
            {{ statusConfig.label }}
          </h3>
          <p :class="['text-sm', statusConfig.textColor, 'opacity-90']">
            {{ bannerMessage }}
          </p>
        </div>

        <div class="flex items-center gap-2 flex-shrink-0">
          <!-- Payment button for pending payment status -->
          <UButton
            v-if="isPendingPayment && nextAction"
            :color="getButtonColor(nextAction.color)"
            size="sm"
            :loading="isProcessingPayment"
            @click="handleActionClick"
            class="whitespace-nowrap"
          >
            {{ isProcessingPayment ? "Processing..." : nextAction.label }}
          </UButton>

          <!-- Link button for other actions -->
          <NuxtLink
            v-else-if="nextAction && nextAction.link"
            :to="nextAction.link"
            :class="[
              'px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all',
              getActionButtonClass(nextAction.color),
            ]"
          >
            {{ nextAction.label }}
          </NuxtLink>

          <button
            v-if="dismissible"
            @click="isDismissed = true"
            class="text-guild-400 hover:text-guild-200 transition-colors"
            :aria-label="`Dismiss ${statusConfig.label} banner`"
          >
            <Icon name="heroicons:x-mark" class="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>
  </ClientOnly>
</template>

<script setup>
const props = defineProps({
  dismissible: {
    type: Boolean,
    default: true,
  },
  compact: {
    type: Boolean,
    default: false,
  },
});

const {
  isPendingPayment,
  isSuspended,
  isCancelled,
  statusConfig,
  getNextAction,
  getBannerMessage,
} = useMemberStatus();
const { completePayment, isProcessingPayment } = useMemberPayment();

const isDismissed = ref(false);

// Handle action button click
const handleActionClick = async () => {
  if (isPendingPayment.value) {
    try {
      await completePayment();
    } catch (error) {
      console.error("Payment failed:", error);
    }
  }
};

// Map color names to UButton color props
const getButtonColor = (color) => {
  const colorMap = {
    orange: "warning",
    blue: "primary",
    gray: "neutral",
  };
  return colorMap[color] || "primary";
};

// Only show banner if status is not active
const shouldShowBanner = computed(() => {
  if (isDismissed.value) return false;
  return isPendingPayment.value || isSuspended.value || isCancelled.value;
});

const bannerMessage = computed(() => getBannerMessage());
const nextAction = computed(() => getNextAction());

// Button styling based on color
const getActionButtonClass = (color) => {
  const baseClass = "hover:scale-105 active:scale-95";
  const colorClasses = {
    orange: "bg-candlelight-600 text-white hover:bg-candlelight-700",
    blue: "bg-guild-600 text-white hover:bg-guild-500",
    gray: "bg-guild-700 text-guild-100 hover:bg-guild-600",
  };
  return `${baseClass} ${colorClasses[color] || colorClasses.blue}`;
};
</script>
