<script setup>

import { ref, onMounted } from 'vue';
import { Button, ClipboardAction } from '@cloudron/pankow';
import Section from './Section.vue';
import MailModel from '../models/MailModel.js';

const props = defineProps([ 'domain' ]);

const mailModel = MailModel.create();

const dnsRecordLabels = ref({
  'mx': {
    label: 'MX',
    isOpen: false,
  },
  'dkim': {
    label: 'DKIM',
    isOpen: false,
  },
  'spf': {
    label: 'SPF',
    isOpen: false,
  },
  'dmarc': {
    label: 'DMARC',
    isOpen: false,
  },
  'ptr4': {
    label: 'PTR4',
    isOpen: false,
  },
  'ptr6': {
    label: 'PTR6',
    isOpen: false,
  },
});

const rblTypes = ref({
  'rbl4': {
    label: 'rbl4',
    isOpen: false,
  },
  'rbl6': {
    label: 'rbl6',
    isOpen: false,
  },
});

const busy = ref(false);
const mailConfig = ref({});
const domainStatus = ref({});

async function refresh() {
  busy.value = true;

  let [error, result] = await mailModel.status(props.domain);
  if (error) return console.error(error);

  if (result.relay) result.relay.isOpen = false;

  domainStatus.value = result;

  [error, result] = await mailModel.config(props.domain);
  if (error) return console.error(error);

  mailConfig.value = result;

  busy.value = false;
}

onMounted(async () => {
  await refresh();
});

</script>

<template>
  <Section title="Status">
    <template #header-buttons>
      <Button @click="refresh()" secondary tool icon="fa fa-sync-alt" :disabled="busy" :loading="busy"/>
    </template>

    <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
    <br/>

    <!-- DNS records including PTR4/PTR6 -->
    <div v-if="domainStatus.mx">
      <div v-for="(item, key) in dnsRecordLabels" :key="key" class="record-item">
        <div class="record-header" @click="item.isOpen = !item.isOpen">
          <i v-if="!busy" class="fa-solid" :class="{
            'fa-check-circle text-success': domainStatus[key].status === 'passed',
            'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
            'fa-circle-minus text-warning': domainStatus[key].status === 'skipped',
            }"></i>
          <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
          &nbsp;
          <b>{{ item.label }} record</b>
          <i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
        </div>

        <div class="record-details" v-if="item.isOpen" @click.stop>
          <div v-if="key === 'mx' && domain.provider === 'namecheap'">{{ $t('email.dnsStatus.namecheapInfo') }} <sup><a href="https://docs.cloudron.io/domains/#namecheap-dns" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
          <div v-if="key === 'ptr4' || key === 'ptr6'">{{ $t('email.dnsStatus.ptrInfo') }} <sup><a href="https://docs.cloudron.io/email/#ptr-record" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
          <div v-if="domainStatus[key].status === 'skipped'">{{ domainStatus[key].message }}</div>
          <div v-else style="overflow: hidden;">
            <table class="domain-status" style="width: 100%; table-layout: fixed;">
              <tbody>
                <tr>
                  <td style="width: 160px">{{ $t('email.dnsStatus.hostname') }}:</td>
                  <td>{{ domainStatus[key].name }}</td>
                </tr>
                <tr>
                  <td>{{ $t('email.dnsStatus.domain') }}:</td>
                  <td>{{ domainStatus[key].domain }}</td>
                </tr>
                <tr>
                  <td>{{ $t('email.dnsStatus.type') }}:</td>
                  <td>{{ domainStatus[key].type }}</td>
                </tr>
                <tr>
                  <td class="domain-status-expected-label">{{ $t('email.dnsStatus.expected') }}:</td>
                  <td class="domain-status-expected-value">
                    <div class="domain-status-expected">{{ domainStatus[key].expected }}</div>
                    <ClipboardAction :value="domainStatus[key].expected"/>
                  </td>
                </tr>
                <tr>
                  <td>{{ $t('email.dnsStatus.current') }}:</td>
                  <td>
                    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ domainStatus[key].value ? domainStatus[key].value : ('['+$t('email.dnsStatus.recordNotSet')+']') }} {{ domainStatus[key].message }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- outbound SMTP / Relay status -->
    <div v-if="domainStatus.relay" class="record-item">
      <div class="record-header" @click="domainStatus.relay.isOpen = !domainStatus.relay.isOpen">
        <i v-if="!busy" class="fa" :class="{
          'fa-check-circle text-success': domainStatus.relay.status === 'passed',
          'fa-exclamation-triangle text-danger': domainStatus.relay.status === 'failed',
          'fa-circle-minus text-warning': domainStatus.relay.status === 'skipped',
          }"></i>
        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
        &nbsp;
        <b>{{ $t('email.smtpStatus.outboundSmtp') }}</b>
        <i class="fa-solid" :class="domainStatus.relay.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
      </div>
      <div class="record-details" v-if="domainStatus.relay.isOpen" @click.stop>
        {{ domainStatus.relay.message }}
      </div>
    </div>

    <!-- Blacklist -->
    <div v-for="(item, key) in rblTypes" :key="key" class="record-item">
      <div v-if="domainStatus[key]">
        <div class="record-header" @click="item.isOpen = !item.isOpen">
          <i v-if="!busy" class="fa" :class="{
            'fa-check-circle text-success': domainStatus[key].status === 'passed',
            'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
            'fa-circle-minus text-warning': domainStatus[key].status === 'skipped',
            }"></i>
          <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
          &nbsp;
          <b>{{ key === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</b>
          <i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
        </div>
        <div class="record-details" v-if="item.isOpen" @click.stop>
          <div v-if="domainStatus[key].status === 'passed'">IP: {{ domainStatus[key].ip }}</div>
          <div v-else-if="domainStatus[key].status === 'skipped'">{{ domainStatus[key].message }}</div>
          <div v-else>
            <div v-if="domainStatus[key].servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus[key].ip })"></div>
            <div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus[key].ip })"></div>

            <!-- servers is only the blocked servers -->
            <br/>
            <div v-for="server in domainStatus[key].servers" :key="server.name">
              <a :href="server.removal" target="_blank">{{ server.name }} removal link</a>
              &nbsp;
              <span v-if="server.txtRecords.length">TXT record: {{ server.txtRecords.join('. ') }}</span>
              <span v-else>No TXT Records</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Section>
</template>

<style scoped>

.record-header {
  border-radius: var(--pankow-border-radius);
  padding: 10px;
  color: var(--pankow-text-color);
  cursor: pointer;
}

.record-header:hover {
  background-color: var(--pankow-color-background-hover);
}

.record-details {
  padding: 10px 40px;
  overflow: hidden;
}

.record-details > table {
  table-layout: fixed;
  width: 100%;
}

.record-details > table > tr > td:nth-child(1) {
  width: 150px;
}

.record-details > table > tr > td:nth-child(2) {
  display: block;
  overflow: scroll;
  white-space: nowrap;
  text-overflow: auto;
  font-weight: var(--pankow-font-weight-bold);
}

.domain-status > tbody > tr > td:first-of-type {
  white-space: nowrap;
  padding-right: 20px;
}

.domain-status-expected-label {
  vertical-align: top;
}

.domain-status-expected-value {
  display: flex;
  gap: 6px;
  align-items: center;
}

.domain-status-expected {
  overflow-wrap: break-word;
  word-break: break-all;
}

</style>
