<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
import { computed } from 'vue'
import { fetchProfile } from '@/api/profile'
import ProfileCard from '@/components/profile/ProfileCard.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

const route = useRoute()
const org = computed(() => route.params.org as string)

const { data, isLoading, error, refetch } = useQuery({
  queryKey: ['profile', org],
  queryFn: () => fetchProfile(org.value),
})
</script>

<template>
  <LoadingSpinner v-if="isLoading" />
  <div v-else-if="error" class="max-w-2xl mx-auto py-16 text-center">
    <p class="text-sm text-red-500 dark:text-red-400 mb-3">Failed to load profile.</p>
    <button
      class="text-sm text-accent-500 hover:text-accent-400 transition-colors"
      @click="() => refetch()"
    >
      Retry
    </button>
  </div>
  <ProfileCard v-else-if="data" :profile="data" />
</template>
