<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, reactive, onMounted, watch } from 'vue';
import { Button, ButtonGroup, Dropdown, Spinner, TextInput, MultiSelect } from 'pankow';
import { useDebouncedRef, prettyDate, prettyLongDate, prettyEmailAddresses } from 'pankow/utils';
import Section from '../components/Section.vue';
import MailModel from '../models/MailModel.js';

const mailModel = MailModel.create();

const availableTypes = [
  { id: 'bounce', name: 'Bounce'  },
  { id: 'deferred', name: 'Deferred'  },
  { id: 'delivered', name: 'Delivered'  },
  { id: 'denied', name: 'Denied'  },
  { id: 'queued', name: 'Queued'  },
  { id: 'quota', name: 'Quota'  },
  { id: 'received', name: 'Received'  },
  { id: 'spam', name: 'Spam'  },
];

const perPageOptions = [
  { name: t('main.pagination.perPageSelector', { n: 20 }), value: 20 },
  { name: t('main.pagination.perPageSelector', { n: 50 }), value: 50 },
  { name: t('main.pagination.perPageSelector', { n: 100 }), value: 100 }
];

const busy = ref(false);
const refreshBusy = ref(false);
const eventlogs = ref([]);
const activeId = ref('');
const search = useDebouncedRef('');
const page = ref(1);
const perPage = ref(20);
const types = reactive([]);

async function onRefresh() {
  refreshBusy.value = true;

  const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
  if (error) return console.error(error);

  eventlogs.value = result;

  refreshBusy.value = false;
}

function onEventLogDetails(id) {
  if (activeId.value === id) activeId.value = '';
  else activeId.value = id;
}

async function onPrevPage() {
  if (page.value > 1) page.value--;
  else page.value = 1;
  await onRefresh();
}

async function onNextPage() {
  page.value++;
  await onRefresh();
}

watch(perPage, onRefresh);
watch(types, onRefresh);
watch(search, onRefresh);

onMounted(async () => {
  busy.value = true;

  await onRefresh();

  busy.value = false;
});

</script>

<template>
  <div class="content">
    <Section :title="$t('emails.eventlog.title')">
      <template #header-buttons>
        <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
        <MultiSelect v-model="types" :options="availableTypes" option-key="id" option-label="name" :selected-label="types.length ? $t('main.multiselect.selected', { n: types.length }) : $t('emails.typeFilterHeader')"/>
        <Button href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
      </template>

<!-- TODO replace with fetch more on scroll -->
      <div class="eventlog-filter">

        <Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>

        <ButtonGroup>
          <Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
          <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
          <Button tool secondary @click="onNextPage()" :disabled="busy || perPage > eventlogs.length" icon="fa-solid fa-angle-double-right" v-tooltip="$t('main.pagination.next')" />
        </ButtonGroup>
      </div>

<!-- TODO style table -->
      <center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
      <table v-show="!busy" class="table table-condensed table-hover">
        <thead>
          <tr>
            <th style="width:  5%"><!-- Icon --></th>
            <th style="width: 15%">{{ $t('emails.eventlog.time') }}</th>
            <th style="width: 25%">{{ $t('emails.eventlog.mailFrom') }}</th>
            <th style="width: 25%">{{ $t('emails.eventlog.rcptTo') }}</th>
            <th style="width: 30%">{{ $t('emails.eventlog.details') }}</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="eventlog in eventlogs" :key="eventlog.uuid">
            <tr @click="onEventLogDetails(eventlog.uuid)" class="hand" >
              <td class="no-wrap">
                <i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'delivered'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
                <i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
                <i class="fas fa-arrow-circle-right" v-if="eventlog.type === 'received'" v-tooltip="$t('emails.eventlog.type.incoming')"></i>
                <i class="fas fa-align-justify" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') !== 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
                <i class="fas fa-trash" v-if="eventlog.type === 'queued' && eventlog.spamStatus && eventlog.spamStatus.indexOf('Yes,') === 0" v-tooltip="$t('emails.eventlog.type.queued')"></i>
                <i class="fas fa-minus-circle" v-if="eventlog.type === 'denied'" v-tooltip="$t('emails.eventlog.type.denied')"></i>
                <i class="fas fa-hand-paper" v-if="eventlog.type === 'bounce'" v-tooltip="$t('emails.eventlog.type.bounce')"></i>
                <i class="fas fa-filter" v-if="eventlog.type === 'spam-learn'" v-tooltip="$t('emails.eventlog.type.spamFilterTrained')"></i>
                <i class="fas fa-fill-drip" v-if="eventlog.type === 'quota'" v-tooltip="$t('emails.eventlog.type.quota')"></i>
              </td>
              <td class="no-wrap"><span v-tooltip="prettyLongDate(eventlog.ts)" class="arrow">{{ prettyDate(eventlog.ts) }}</span></td>
              <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.mailFrom) || '-' }}</td>
              <td class="elide-table-cell">{{ prettyEmailAddresses(eventlog.rcptTo) || eventlog.mailbox || '-' }}</td>
              <td>
                <span v-if="eventlog.type === 'bounce'">{{ $t('emails.eventlog.type.bounceInfo') }}. {{ eventlog.message || eventlog.reason }}</span>
                <span v-if="eventlog.type === 'deferred'">{{ $t('emails.eventlog.type.deferredInfo', { delay:eventlog.delay }) }}. {{ eventlog.message || eventlog.reason }} </span>
                <span v-if="eventlog.type === 'queued'">
                  <span v-if="eventlog.direction === 'inbound'">{{ $t('emails.eventlog.type.inboundInfo') }}</span>
                  <span v-if="eventlog.direction === 'outbound'">{{ $t('emails.eventlog.type.outboundInfo') }}</span>
                </span>
                <span v-if="eventlog.type === 'received'">{{ $t('emails.eventlog.type.receivedInfo') }}</span>
                <span v-if="eventlog.type === 'delivered'">{{ $t('emails.eventlog.type.deliveredInfo') }}</span>
                <span v-if="eventlog.type === 'denied'">{{ $t('emails.eventlog.type.deniedInfo') }}. {{ eventlog.message || eventlog.reason }} </span>
                <span v-if="eventlog.type === 'spam-learn'">{{ $t('emails.eventlog.type.spamFilterTrainedInfo') }}</span>
                <span v-if="eventlog.type === 'quota'">
                  <span v-if="eventlog.quotaPercent > 0">{{ $t('emails.eventlog.type.overQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: eventlog.quotaPercent }) }}</span>
                  <span v-if="eventlog.quotaPercent < 0">{{ $t('emails.eventlog.type.underQuotaInfo', { mailbox: eventlog.mailbox, quotaPercent: -eventlog.quotaPercent }) }}</span>
                </span>
              </td>
            </tr>
            <tr v-if="activeId === eventlog.uuid">
              <td colspan="6">
                <pre class="eventlog-details">{{ JSON.stringify(eventlog, null, 4) }}</pre>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </Section>
  </div>
</template>

<style scoped>

.eventlog-filter {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.eventlog-details {
  white-space: pre-wrap;
  color: var(--pankow-text-color);
  background-color: var(--pankow-input-background-color);
  border: none;
  border-radius: var(--pankow-border-radius);
}

</style>
