<!-- pages/members/index.vue -->
<template>
  <UDashboard>
    <UDashboardPanel>
      <UDashboardHeader>
        <template #title> Welcome back, {{ member?.name }}! </template>
      </UDashboardHeader>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <UCard>
          <template #header>Your Circle</template>
          <p class="text-xl font-semibold">{{ circleLabel }}</p>
          <p class="text-sm text-zinc-600 mt-1">{{ circleDescription }}</p>
          <UButton variant="soft" size="sm" class="mt-2">
            Request Circle Change
          </UButton>
        </UCard>

        <UCard>
          <template #header>Your Contribution</template>
          <p class="text-xl font-semibold">{{ contributionLabel }}</p>
          <p class="text-sm text-zinc-600">Supporting 2 solidarity spots</p>
          <UButton variant="soft" size="sm" class="mt-2">
            Adjust Contribution
          </UButton>
        </UCard>
      </div>

      <UCard class="mt-6">
        <template #header>Quick Links</template>
        <UList>
          <li><NuxtLink to="/members/resources">Resource Library</NuxtLink></li>
          <li><a href="https://gamma-space.slack.com">Slack Community</a></li>
          <li><NuxtLink to="/members/events">Upcoming Events</NuxtLink></li>
        </UList>
      </UCard>
    </UDashboardPanel>
  </UDashboard>
</template>

<script setup>
import { computed } from 'vue'
import { getCircleByValue } from '~/config/circles'
import { getContributionTierByValue } from '~/config/contributions'

// Mock member data - in real app this would come from authentication/API
const member = ref({
  name: 'Guest User',
  circle: 'community',
  contributionTier: '15'
})

// Computed properties for display labels
const circleLabel = computed(() => {
  const circle = getCircleByValue(member.value?.circle)
  return circle?.label || member.value?.circle
})

const circleDescription = computed(() => {
  const circle = getCircleByValue(member.value?.circle)
  return circle?.description || ''
})

const contributionLabel = computed(() => {
  const tier = getContributionTierByValue(member.value?.contributionTier)
  return tier?.label || `$${member.value?.contributionTier}/month`
})
</script>
