<template>
  <Card>
    <CardHeader class="pb-3">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <Avatar class="h-10 w-10">
            <AvatarImage :src="getInitialsAvatarUrl(user.first_name, user.last_name)" />
            <AvatarFallback>{{ userInitials }}</AvatarFallback>
          </Avatar>
          <div>
            <CardTitle class="text-base">{{ user.first_name }} {{ user.last_name }}</CardTitle>
            <p class="text-sm text-muted-foreground">{{ user.email }}</p>
          </div>
        </div>
        <Badge variant="secondary">Pending</Badge>
      </div>
    </CardHeader>
    
    <CardContent class="pt-0">
      <div class="flex items-center justify-between">
        <div class="text-sm text-muted-foreground">
          Registered {{ formatDate(user.created_at) }}
        </div>
        <div class="flex space-x-2">
          <Button
            variant="outline"
            size="sm"
            @click="handleReject"
            :disabled="isLoading"
          >
            <X class="h-4 w-4 mr-1" />
            Reject
          </Button>
          <Button
            size="sm"
            @click="handleApprove"
            :disabled="isLoading"
          >
            <Check class="h-4 w-4 mr-1" />
            Approve
          </Button>
        </div>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Check, X } from 'lucide-vue-next'
import type { User } from '@/types/auth'
import { useAvatarUrl } from '@/composables/useAvatarUrl'

const { getInitialsAvatarUrl } = useAvatarUrl()

interface Props {
  user: User
  isLoading?: boolean
}

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

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

const userInitials = computed(() => {
  return `${props.user.first_name.charAt(0)}${props.user.last_name.charAt(0)}`.toUpperCase()
})

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

const handleApprove = () => {
  emit('approve', props.user.id)
}

const handleReject = () => {
  emit('reject', props.user.id)
}
</script>