<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Accept Invitation" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right />
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left />
      </UDashboardToolbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
        <UPageCard title="Accept Invitation" description="Accept or decline the invitation." class="mb-6">
          <div v-if="invitation && !error">
            <div v-if="invitationStatus === 'pending'" class="space-y-4">
              <p>
                <strong>{{ invitation.inviterEmail }}</strong> has invited you to join
                <strong>{{ invitation.organizationName }}</strong
                >.
              </p>
              <p>
                This invitation was sent to <strong>{{ invitation.email }}</strong
                >.
              </p>
            </div>

            <div v-if="invitationStatus === 'accepted'" class="space-y-4 text-center">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-green-100 rounded-full">
                <UIcon name="i-lucide-check" class="w-8 h-8 text-green-600" />
              </div>
              <h2 class="text-2xl font-bold">Welcome to {{ invitation.organizationName }}!</h2>
              <p>You've successfully joined the organization. We're excited to have you on board!</p>
            </div>

            <div v-if="invitationStatus === 'rejected'" class="space-y-4 text-center">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-red-100 rounded-full">
                <UIcon name="i-lucide-x" class="w-8 h-8 text-red-600" />
              </div>
              <h2 class="text-2xl font-bold">Invitation Declined</h2>
              <p>You've declined the invitation to join {{ invitation.organizationName }}.</p>
            </div>

            <div v-if="invitationStatus === 'pending'" class="flex justify-between mt-6">
              <UButton variant="soft" color="neutral" @click="handleReject">Decline</UButton>
              <UButton color="primary" @click="handleAccept">Accept Invitation</UButton>
            </div>
          </div>

          <div v-else-if="!invitation && !error" class="space-y-4">
            <USkeleton class="w-1/3 h-6" />
            <USkeleton class="w-full h-4" />
            <USkeleton class="w-2/3 h-4" />
            <USkeleton class="w-24 h-10 ml-auto" />
          </div>

          <div v-else>
            <p class="text-red-600 font-medium">{{ error }}</p>
          </div>
        </UPageCard>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import type { CustomInvitation } from '~/composables/useAuth'

const invitationId = useRoute().params.id as string

const { acceptInvitation, rejectInvitation, getInvitation } = useOrganizationStore()
const invitation = ref<CustomInvitation>(null)
const invitationStatus = ref<'pending' | 'accepted' | 'rejected'>('pending')
const error = ref<string | null>(null)

async function handleAccept() {
  await acceptInvitation(invitationId)
}

async function handleReject() {
  await rejectInvitation(invitationId)
}

onMounted(async () => {
  invitation.value = await getInvitation(invitationId)
})
</script>
