<template>
  <ClientOnly>
    <div v-if="shouldShowBanner" class="status-banner">
      <div class="status-banner-inner">
        <div class="status-banner-text">
          <strong class="status-banner-label">{{ statusConfig.label }}</strong>
          <span class="status-banner-msg">{{ bannerMessage }}</span>
        </div>

        <div v-if="nextAction" class="status-banner-actions">
          <!-- Payment button for pending payment status -->
          <button
            v-if="isPendingPayment"
            :disabled="isProcessingPayment"
            class="btn btn-primary"
            @click="handleActionClick"
          >
            {{ isProcessingPayment ? "Processing..." : nextAction.label }}
          </button>

          <!-- Link button for other actions -->
          <NuxtLink
            v-else-if="nextAction.link"
            :to="nextAction.link"
            class="btn"
          >
            {{ nextAction.label }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </ClientOnly>
</template>

<script setup>
const {
  isPendingPayment,
  isSuspended,
  isCancelled,
  statusConfig,
  getNextAction,
  getBannerMessage,
} = useMemberStatus();

const { completePayment, isProcessingPayment } = useMemberPayment();

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

const shouldShowBanner = computed(
  () => isPendingPayment.value || isSuspended.value || isCancelled.value,
);

const bannerMessage = computed(() => getBannerMessage());
const nextAction = computed(() => getNextAction());
</script>

<style scoped>
.status-banner {
  width: 100%;
  background: var(--parch);
}

.status-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.status-banner-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.status-banner-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parch-text);
  white-space: nowrap;
}

.status-banner-msg {
  font-size: 12px;
  color: var(--parch-text-dim);
  line-height: 1.5;
}

.status-banner-actions {
  flex-shrink: 0;
}

/* Ensure no border-radius leaks in from global resets or UButton */
.status-banner .btn {
  border-radius: 0;
}
</style>
