<script setup>

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

import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { Button, InputDialog, Dialog, FormGroup, MultiSelect } from 'pankow';
import { prettyLongDate } from 'pankow/utils';
import Section from  '../components/Section.vue';
import { TASK_TYPES } from '../constants.js';
import TasksModel from '../models/TasksModel.js';
import BackupsModel from '../models/BackupsModel.js';

const props = defineProps({
  profile: Object
});

const backupsModel = BackupsModel.create();
const tasksModel = TasksModel.create();

const backupRetentions = [
  { name: '2 days', id: { keepWithinSecs: 2 * 24 * 60 * 60 }},
  { name: '1 week', id: { keepWithinSecs: 7 * 24 * 60 * 60 }}, // default
  { name: '1 month', id: { keepWithinSecs: 30 * 24 * 60 * 60 }},
  { name: '3 months', id: { keepWithinSecs: 3 * 30 * 24 * 60 * 60 }},
  { name: '2 daily, 4 weekly', id: { keepDaily: 2, keepWeekly: 4 }},
  { name: '3 daily, 4 weekly, 6 monthly', id: { keepDaily: 3, keepWeekly: 4, keepMonthly: 6 }},
  { name: '7 daily, 4 weekly, 12 monthly', id: { keepDaily: 7, keepWeekly: 4, keepMonthly: 12 }},
  { name: 'Forever', id: { keepWithinSecs: -1 }}
];

// values correspond to cron days
const cronDays = [
  { id: 0, name: 'Sunday' },
  { id: 1, name: 'Monday' },
  { id: 2, name: 'Tuesday' },
  { id: 3, name: 'Wednesday' },
  { id: 4, name: 'Thursday' },
  { id: 5, name: 'Friday' },
  { id: 6, name: 'Saturday' },
];

// generates 24h time sets (instead of american 12h) to avoid having to translate everything to locales eg. 12:00
const cronHours = Array.from({ length: 24 }).map(function (v, i) { return { id: i, name: (i < 10 ? '0' : '') + i + ':00' }; });

function prettyBackupSchedule(pattern) {
  if (!pattern) return '';

  const tmp = pattern.split(' ');
  const hours = tmp[2].split(',');
  const days = tmp[5].split(',');

  let prettyDay;
  if (days.length === 7 || days[0] === '*') {
    prettyDay = 'Everyday';
  } else  {
    prettyDay = days.map(function (day) { return cronDays[parseInt(day, 10)].name.substr(0, 3); }).join(',');
  }

  const prettyHour = hours.map(function (hour) { return cronHours[parseInt(hour, 10)].name; }).join(',');

  return prettyDay + ' at ' + prettyHour;
};

function prettyBackupRetention(retention) {
  const retentionString = JSON.stringify(retention);
  const tmp = backupRetentions.find(function (p) { return JSON.stringify(p.id) === retentionString; });
  return tmp ? tmp.name : '';
};

const inputDialog = useTemplateRef('inputDialog');
const taskLogsMenu = ref([]);
const policy = ref({
  schedule: '',
  retention: ''
});
const cleanupTask = ref({});

async function onCleanup() {
  const yes = await inputDialog.value.confirm({
    // title: t('backups.cleanupBackups.title'),
    message: t('backups.cleanupBackups.description'),
    modal: true,
    confirmStyle: 'danger',
    confirmLabel: t('main.dialog.yes'),
    rejectLabel: t('main.dialog.no')
  });

  if (!yes) return;

  const [error] = await backupsModel.cleanup();
  if (error) return console.error(error);

  await refreshTasks();
}

const configureBusy = ref(false);
const configureError = ref('');
const configureDialog = useTemplateRef('configureDialog');
const configureDays = ref([]);
const configureHours = ref([]);
const configureRetention = ref('');
const isConfigureValid = computed(() => {
  return !!configureDays.value.length && !!configureHours.value.length;
});

function onConfigure() {
  configureBusy.value = false;
  configureError.value = false;

  const currentRetentionString = JSON.stringify(policy.value.retention);
  let selectedRetention = backupRetentions.find(function (x) { return JSON.stringify(x.id) === currentRetentionString; });
  if (!selectedRetention) selectedRetention = backupRetentions[0];
  configureRetention.value = selectedRetention.id;

  const tmp = policy.value.schedule.split(' ');
  const hours = tmp[2].split(',');
  const days = tmp[5].split(',');
  if (days[0] === '*') configureDays.value = cronDays.map((day) => { return day.id; });
  else configureDays.value = days.map((day) => { return parseInt(day, 10); });

  configureHours.value = hours.map((hour) => { return parseInt(hour, 10); });

  configureDialog.value.open();
}

async function onSubmitConfigure() {
  if (!isConfigureValid.value) return;

  configureBusy.value = true;

  let daysPattern;
  if (configureDays.value.length === 7) daysPattern = '*';
  else daysPattern = configureDays.value;

  let hoursPattern;
  if (configureHours.value.length === 24) hoursPattern = '*';
  else hoursPattern = configureHours.value;

  const policy = {
    retention: configureRetention.value,
    schedule: `00 00 ${hoursPattern} * * ${daysPattern}`
  };

  const [error] = await backupsModel.setPolicy(policy);
  if (error) {
    configureBusy.value = false;
    configureError.value = error.body ? error.body.message : 'Internal error';
    return console.error(error);
  }

  configureDialog.value.close();
  await refreshPolicy();
  configureBusy.value = false;
}

async function waitForTask() {
  if (!cleanupTask.value.id) return;

  const [error, result] = await tasksModel.get(cleanupTask.value.id);
  if (error) return console.error(error);

  cleanupTask.value = result;

  // task done, refresh menu
  if (!result.active) return await refreshTasks();

  setTimeout(waitForTask, 2000);
}

async function refreshTasks() {
  const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_CLEAN_BACKUPS);
  if (error) return console.error(error);

  cleanupTask.value = result[0] || {};

  // limit to last 10
  taskLogsMenu.value = result.slice(0,10).map(t => {
    return {
      icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
      label: prettyLongDate(t.ts),
      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
    };
  });

  // if last task is currently active, start polling
  if (cleanupTask.value.active) waitForTask();
}

async function refreshPolicy() {
  const [error, result] = await backupsModel.getPolicy();
  if (error) return console.error(error);

  policy.value = result;
}

onMounted(async () => {
  refreshTasks();
  refreshPolicy();
});

</script>

<template>
  <Section :title="$t('backups.schedule.title')">
    <InputDialog ref="inputDialog" />
    <Dialog ref="configureDialog"
      :title="$t('backups.configureBackupSchedule.title')"
       reject-style="secondary"
      :reject-label="configureBusy ? null : $t('main.dialog.cancel')"
      :confirm-label="$t('main.dialog.save')"
      :confirm-busy="configureBusy"
      :confirm-active="isConfigureValid"
      @confirm="onSubmitConfigure()"
    >
      <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>

      <form @submit.prevent="onSubmitConfigure()" autocomplete="off">
        <fieldset>
          <FormGroup>
            <label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
            <p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>

            <div style="display: flex; gap: 10px;">
              <div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="configureDays" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
              <div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="configureHours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
            </div>
          </FormGroup>

          <FormGroup>
            <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
            <select id="retentionInput" v-model="configureRetention">
              <option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
            </select>
          </FormGroup>
        </fieldset>
      </form>
    </Dialog>

    <template #header-buttons>
      <Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
    </template>

    <p v-html="$t('backups.schedule.description')"></p>

    <div class="info-row">
      <div class="info-label">{{ $t('backups.schedule.schedule') }}</div>
      <div class="info-value">{{ prettyBackupSchedule(policy.schedule) }}</div>
    </div>

    <div class="info-row">
      <div class="info-label">{{ $t('backups.schedule.retentionPolicy') }}</div>
      <div class="info-value">{{ prettyBackupRetention(policy.retention) }}</div>
    </div>

    <div v-if="cleanupTask.active">
      <ProgressBar :value="cleanupTask.percent" />
      <div>{{ cleanupTask.message }}</div>
    </div>

    <div class="button-bar">
      <Button @click="onCleanup()" :disabled="cleanupTask.active" :loading="cleanupTask.active">{{ $t('backups.listing.cleanupBackups') }}</Button>
      <Button v-show="props.profile.isAtLeastOwner" @click="onConfigure()">{{ $t('backups.schedule.configure') }}</Button>
    </div>
  </Section>
</template>
