<script setup lang="ts">
const toast = useToast()
const items = ref([])
const loading = ref(true)
const syncingAccount = ref<string | null>(null)

const setupPage = async () => {
  loading.value = true
  try {
    items.value = await useNuxtApp().$api("/api/email/accounts")
  } finally {
    loading.value = false
  }
}

const syncAccount = async (account: any) => {
  syncingAccount.value = account.id
  try {
    const res = await useNuxtApp().$api(`/api/email/accounts/${account.id}/sync`, {
      method: "POST",
      body: { limit: 50 },
    })

    toast.add({
      title: "E-Mail Konto synchronisiert",
      description: `${res.synced?.[0]?.fetched || 0} neue Nachrichten geladen`,
      color: "success",
    })
  } catch (err: any) {
    toast.add({
      title: "Synchronisation fehlgeschlagen",
      description: err?.data?.error || err?.message || "Das Konto konnte nicht synchronisiert werden.",
      color: "error",
    })
  } finally {
    syncingAccount.value = null
    await setupPage()
  }
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="E-Mail Konten">
      <template #right>
        <UButton
            icon="i-heroicons-plus"
            @click="navigateTo('/settings/emailaccounts/create')"
        >
          E-Mail Konto
        </UButton>
      </template>
  </UDashboardNavbar>

  <div class="p-4 space-y-3">
    <div v-if="loading" class="space-y-2">
      <USkeleton v-for="i in 4" :key="i" class="h-20" />
    </div>

    <TableEmptyState
        v-else-if="items.length === 0"
        label="Keine E-Mail Konten anzuzeigen"
    />

    <div
        v-for="account in items"
        v-else
        :key="account.id"
        class="flex flex-col gap-3 border-b border-(--ui-border) py-4 md:flex-row md:items-center md:justify-between"
    >
      <div class="min-w-0">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-envelope" class="size-5 text-primary" />
          <p class="truncate font-medium">
            {{ account.email }}
          </p>
          <UBadge
              size="xs"
              color="neutral"
              variant="soft"
          >
            IMAP/SMTP
          </UBadge>
        </div>
        <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-dimmed">
          <span>IMAP: {{ account.imapHost || "nicht gesetzt" }}:{{ account.imapPort || "-" }}</span>
          <span>SMTP: {{ account.smtpHost || "nicht gesetzt" }}:{{ account.smtpPort || "-" }}</span>
          <span>{{ account.hasPassword ? "Passwort hinterlegt" : "Passwort fehlt" }}</span>
        </div>
      </div>

      <div class="flex shrink-0 items-center gap-2">
        <UButton
            icon="i-heroicons-arrow-path"
            color="neutral"
            variant="soft"
            :loading="syncingAccount === account.id"
            @click.stop="syncAccount(account)"
        >
          Synchronisieren
        </UButton>
        <UButton
            icon="i-heroicons-pencil-square"
            color="neutral"
            variant="ghost"
            @click="navigateTo(`/settings/emailaccounts/edit/${account.id}`)"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
