<template>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="text-lg font-medium">Pending Approvals</h3>
        <p class="text-sm text-muted-foreground">
          {{ pendingUsers.length }} user{{ pendingUsers.length !== 1 ? 's' : '' }} waiting for approval
        </p>
      </div>
      <Badge variant="secondary" v-if="pendingUsers.length > 0">
        {{ pendingUsers.length }} Pending
      </Badge>
    </div>

    <div v-if="pendingUsers.length === 0" class="text-center py-12">
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
        <CheckCircle class="h-6 w-6 text-green-600 dark:text-green-400" />
      </div>
      <h3 class="mt-4 text-sm font-medium text-gray-900 dark:text-gray-100">All caught up!</h3>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
        No users are waiting for approval at the moment.
      </p>
    </div>

    <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <UserApprovalCard
        v-for="user in pendingUsers"
        :key="user.id"
        :user="user"
        :is-loading="isProcessing === user.id"
        @approve="handleApprove"
        @reject="handleReject"
      />
    </div>

    <!-- Confirmation Dialog -->
    <AlertDialog :open="showConfirmDialog" @update:open="showConfirmDialog = $event">
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            {{ confirmAction === 'approve' ? 'Approve User' : 'Reject User' }}
          </AlertDialogTitle>
          <AlertDialogDescription>
            Are you sure you want to {{ confirmAction }} 
            <strong>{{ selectedUser?.first_name }} {{ selectedUser?.last_name }}</strong>?
            {{ confirmAction === 'reject' ? 'This action cannot be undone.' : 'They will gain access to the system.' }}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel @click="cancelAction">Cancel</AlertDialogCancel>
          <AlertDialogAction 
            @click="confirmActionHandler"
            :class="confirmAction === 'reject' ? 'bg-destructive hover:bg-destructive/90' : ''"
          >
            {{ confirmAction === 'approve' ? 'Approve' : 'Reject' }}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { CheckCircle } from 'lucide-vue-next'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
import UserApprovalCard from './UserApprovalCard.vue'
import type { User } from '@/types/auth'

interface Props {
  pendingUsers: User[]
  isProcessing?: number | null
}

interface Emits {
  (e: 'approve', userId: number): void
  (e: 'reject', userId: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const showConfirmDialog = ref(false)
const confirmAction = ref<'approve' | 'reject'>('approve')
const selectedUser = ref<User | null>(null)

const handleApprove = (userId: number) => {
  const user = props.pendingUsers.find(u => u.id === userId)
  if (user) {
    selectedUser.value = user
    confirmAction.value = 'approve'
    showConfirmDialog.value = true
  }
}

const handleReject = (userId: number) => {
  const user = props.pendingUsers.find(u => u.id === userId)
  if (user) {
    selectedUser.value = user
    confirmAction.value = 'reject'
    showConfirmDialog.value = true
  }
}

const confirmActionHandler = () => {
  if (selectedUser.value) {
    if (confirmAction.value === 'approve') {
      emit('approve', selectedUser.value.id)
    } else {
      emit('reject', selectedUser.value.id)
    }
  }
  cancelAction()
}

const cancelAction = () => {
  showConfirmDialog.value = false
  selectedUser.value = null
  confirmAction.value = 'approve'
}
</script>