<template>
  <div
    v-if="user.banned"
    class="flex items-center gap-0.5"
  >
    <span class="text-xs text-rose-500">{{ $t('superAdmin.userBanStatus.yes') }}</span>
    <UPopover mode="hover">
      <UButton
        variant="ghost"
        size="xs"
        color="error"
        icon="i-solar-info-circle-line-duotone"
      />
      <template #content>
        <div class="w-64 p-4">
          <p class="text-xs font-bold text-neutral-500 dark:text-neutral-400">
            {{ $t('superAdmin.userBanStatus.bannedUntil') }}
          </p>
          <p class="mt-1 text-sm">
            {{ formatDate(user.bannedUntil ?? undefined) }}
          </p>
          <p
            class="mt-4 text-xs font-bold text-neutral-600 dark:text-neutral-400"
          >
            {{ $t('superAdmin.userBanStatus.reason') }}
          </p>
          <p class="mt-1 text-sm">
            {{ user.bannedReason }}
          </p>
          <UButton
            :label="$t('superAdmin.userBanStatus.liftBanButton')"
            block
            variant="soft"
            color="neutral"
            class="mt-4"
            :loading="loading"
            @click="$emit('liftBan', user)"
          />
        </div>
      </template>
    </UPopover>
  </div>
  <div v-else>
    <span class="text-xs">{{ $t('superAdmin.userBanStatus.no') }}</span>
  </div>
</template>

<script lang="ts" setup>
import { useDateFormat } from '@vueuse/core'
import type { User } from '~/types/database'

/* eslint-disable @stylistic/member-delimiter-style */
type UserWithBan = User & { banned?: boolean; bannedUntil?: string | Date; bannedReason?: string }
defineProps<{ user: UserWithBan; loading: boolean }>()

defineEmits<(e: 'liftBan', user: UserWithBan) => void>()

const { t } = useI18n()

const formatDate = (date: string | Date | undefined) => {
  if (!date) return t('superAdmin.userBanStatus.na')
  return useDateFormat(date, 'MMM D, YYYY').value
}
</script>
