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

const columns = computed(() => [
  t('admin.newsletterSubscribers.columns.email'),
  t('admin.newsletterSubscribers.columns.referrer'),
  t('admin.newsletterSubscribers.columns.createdAt')
])

const { data: subscribers, refresh, pending: isLoading } = await useApiFetch<Subscriber[]>(
  '/api/super-admin/newsletter-subscribers',
  { server: false }
)

const subscribersList = computed<Subscriber[]>(() => {
  const subs = subscribers.value
  return Array.isArray(subs) ? subs : []
})

const formatDate = (date: string | Date | null | undefined) => {
  if (!date) return t('admin.newsletterSubscribers.na')
  return useDateFormat(date, 'MMM D, YYYY HH:mm a').value
}

const referrerLogo = (referrer: string | null | undefined) => {
  if (!referrer) return undefined
  return `https://logo.clearbit.com/${referrer}`
}
const { t } = useI18n()
const localePath = useLocalePath()

definePageMeta({
  layout: 'dashboard',
  middleware: ['super-admin'],
  colorMode: 'light'
})
</script>

<template>
  <NuxtLayout
    :page-title="$t('admin.newsletter-subscribers')"
    :parent="{
      label: $t('admin.title'),
      to: localePath('/dashboard/admin')
    }"
    type="admin"
  >
    <UPageBody>
      <PageRefresh :on-refresh="refresh" />
      <PageMainCard
        :title="$t('admin.newsletterSubscribers.title', { count: subscribersList.length })"
        :description="$t('admin.newsletterSubscribers.description')"
        :icon="useSolarIcon('mailbox')"
        :loading="isLoading"
        :on-refresh="refresh"
      >
        <div class="overflow-x-auto">
          <table class="w-full table-auto text-left text-sm">
            <thead>
              <tr>
                <th
                  v-for="column in columns"
                  :key="column"
                  class="p-2 text-nowrap whitespace-nowrap"
                >
                  {{ column }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="subscriber in subscribersList"
                :key="subscriber.id"
                class="border-b border-neutral-100 text-sm text-neutral-500 hover:bg-neutral-50 dark:border-white/10 dark:text-neutral-400 dark:hover:bg-neutral-800/50 [&>td]:whitespace-nowrap"
              >
                <td class="p-2">
                  <div class="flex items-center gap-2">
                    {{ subscriber.email }}
                  </div>
                </td>
                <td class="p-2">
                  <div class="flex items-center gap-2">
                    <UAvatar
                      v-if="referrerLogo(subscriber.referrer)"
                      :src="referrerLogo(subscriber.referrer)"
                      icon="i-lucide-globe"
                      size="3xs"
                      class="flex-shrink-0"
                    />
                    {{ subscriber.referrer || '--' }}
                  </div>
                </td>
                <td class="p-2">
                  <UTooltip
                    :text="formatDate(subscriber.createdAt)"
                    :delay-duration="0"
                  >
                    <div>
                      {{ subscriber.createdAt ? useTimeAgo(subscriber.createdAt) : '--' }}
                    </div>
                  </UTooltip>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </PageMainCard>
    </UPageBody>
  </NuxtLayout>
</template>
