<script setup>

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

import { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
import { Button, ButtonGroup, ProgressBar } from '@cloudron/pankow';
import PostInstallDialog from '../components/PostInstallDialog.vue';
import SftpInfoDialog from '../components/SftpInfoDialog.vue';
import Access from '../components/app/Access.vue';
import Backups from '../components/app/Backups.vue';
import Cron from '../components/app/Cron.vue';
import Display from '../components/app/Display.vue';
import Email from '../components/app/Email.vue';
import Eventlog from '../components/app/Eventlog.vue';
import Graphs from '../components/app/Graphs.vue';
import Info from '../components/app/Info.vue';
import Location from '../components/app/Location.vue';
import Proxy from '../components/app/Proxy.vue';
import Resources from '../components/app/Resources.vue';
import Repair from '../components/app/Repair.vue';
import Security from '../components/app/Security.vue';
import Services from '../components/app/Services.vue';
import Storage from '../components/app/Storage.vue';
import Uninstall from '../components/app/Uninstall.vue';
import Updates from '../components/app/Updates.vue';
import AppsModel from '../models/AppsModel.js';
import TasksModel from '../models/TasksModel.js';
import { API_ORIGIN, APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';

const appsModel = AppsModel.create();
const tasksModel = TasksModel.create();
const installationStateLabel = AppsModel.installationStateLabel;

const busy = ref(true);
const id = ref('');
const app = ref(null);
const currentView = ref('');
const link = ref('');
const infoMenu = ref([]);
const hasLocalStorage = ref(false);
const hasOptionalServices = ref(false);
const hasEmail = ref(false);
const busyStopTask = ref(false);
const postInstallDialog = useTemplateRef('postInstallDialog');
const sftpInfoDialog = useTemplateRef('sftpInfoDialog');

let refreshTimer = null;
async function refresh() {
  const [error, result] = await appsModel.get(id.value);
  if (error) {
    if (error.status === 403) return window.location.hash = '/';
    else if (error.status === 404) return window.location.hash = '/apps';
    return console.error(error);
  }

  // prevent users who have no acces to
  if (result.accessLevel !== 'admin' && result.accessLevel !== 'operator') return window.location.hash = '/';

  app.value = result;

  link.value = (result.installationState !== ISTATES.INSTALLED || result.health !== HSTATES.HEALTHY || result.runState === RSTATES.STOPPED) ? '' : `https://${result.fqdn}`;
  hasLocalStorage.value = result.manifest && result.manifest.addons && result.manifest.addons.localstorage;
  hasOptionalServices.value = result.manifest && result.manifest.addons && (result.manifest.addons.turn?.optional || result.manifest.addons.redis?.optional);
  hasEmail.value = result.manifest && result.manifest.addons && (result.manifest.addons.sendmail || result.manifest.addons.recvmail);

  infoMenu.value = [];
  infoMenu.value.push({
    label: t('app.docsAction'),
    disabled: !result.manifest?.documentationUrl,
    href: result.manifest.documentationUrl,
    target: '_blank',
  });

  if (result.manifest?.postInstallMessage) {
    infoMenu.value.push({
      label: t('app.firstTimeSetupAction'),
      action: () => postInstallDialog.value.open(app.value),
    });
  }

  if (result.manifest?.configurePath) {
    infoMenu.value.push({
      label: t('app.adminPageAction'),
      href: link.value + result.manifest.configurePath,
      target: '_blank',
    });
  }

  if (result.manifest?.addons?.localstorage?.ftp) {
    infoMenu.value.push({
      label: t('app.sftpInfoAction'),
      action: () => sftpInfoDialog.value.open(app.value),
    });
  }

  infoMenu.value.push({ separator: true });
  infoMenu.value.push({
    label: t('app.forumUrlAction'),
    disabled: !result.manifest?.forumUrl,
    href: result.manifest.forumUrl,
    target: '_blank',

  });
  infoMenu.value.push({ separator: true });
  infoMenu.value.push({
    label: t('app.projectWebsiteAction'),
    disabled: !result.manifest?.website,
    href: result.manifest.website,
    target: '_blank',
  });

  refreshTimer = setTimeout(refresh, 2000);
}

function isViewEnabled(view, errorState) {
  if (!errorState) return true;

  if (view === 'info' || view === 'uninstall' || view === 'eventlog') return true;

  if (errorState === ISTATES.PENDING_INSTALL) return view === 'repair';
  if (errorState === ISTATES.PENDING_UNINSTALL) return false;
  if (errorState === ISTATES.PENDING_CLONE) return false;

  if (view === 'display'
    || view === 'backups'
    || view === 'access'
    || view === 'proxy'
    || view === 'graphs'
    || view === 'security'
    || view === 'cron'
  ) return true;

  if (view === 'location') {
    return errorState === ISTATES.PENDING_LOCATION_CHANGE;
  } else if (view === 'repair') {
    return errorState === ISTATES.PENDING_RESTART || errorState === ISTATES.PENDING_CONFIGURE || ISTATES.PENDING_INSTALL || ISTATES.PENDING_DEBUG;
  } else if (view === 'resources') {
    return errorState === ISTATES.PENDING_RESIZE || errorState === ISTATES.PENDING_RECREATE_CONTAINER;
  } else if (view === 'storage') {
    return errorState === ISTATES.PENDING_DATA_DIR_MIGRATION || errorState === ISTATES.PENDING_RECREATE_CONTAINER;
  } else if (view === 'services') {
    return errorState === ISTATES.PENDING_SERVICES_CHANGE;
  } else if (view === 'email') {
    return errorState === ISTATES.PENDING_SERVICES_CHANGE;
  } else if (view === 'updates') {
    return errorState === ISTATES.PENDING_UPDATE;
  }

  return false;
}

async function onStopAppTask() {
  if (!app.value.taskId) return;

  busyStopTask.value = true;

  const [error] = await tasksModel.stop(app.value.taskId);
  if (error) console.error(error);

  busyStopTask.value = false;
}

const views = ref([]);

function hashChange() {
  const tmp = window.location.hash.slice('#/app/'.length);
  if (!tmp) return;

  const parts = tmp.split('/');
  if (parts.length !== 2) return;

  const newView = parts[1] || 'info';
  if (!isViewEnabled(newView, app.value.error?.details.installationState)) {
    if (!currentView.value) {
      currentView.value = 'info';
      window.location.hash = `/app/${id.value}/info`;
    }

    return;
  }

  currentView.value = newView;
  window.location.hash = `/app/${id.value}/${newView}`;
}

onMounted(async () => {
  const tmp = window.location.hash.slice('#/app/'.length);
  if (!tmp) return;

  const parts = tmp.split('/');
  if (parts.length !== 2) return;

  id.value = parts[0];

  await refresh();
  if (!app.value) return;

  let hasServices = false;
  if (app.value.manifest.addons.turn && app.value.manifest.addons.turn.optional) hasServices = true;
  if (app.value.manifest.addons.redis && app.value.manifest.addons.redis.optional) hasServices = true;

  function buildMenuItem(id, label) {
    return {
      id: id,
      disabled: () => !isViewEnabled(id, app.value.error?.details.installationState),
      label: label,
      href: `/#/app/${id.value}/${id}`,
    };
  }

  views.value.push(buildMenuItem('info', t('app.infoTabTitle')));
  views.value.push(buildMenuItem('display', t('app.displayTabTitle')));
  if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('location', t('app.locationTabTitle')));
  if (app.value.type === APP_TYPES.PROXIED) views.value.push(buildMenuItem('proxy', 'Proxy'));
  if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('access', t('app.accessControlTabTitle')));
  if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('resources', t('app.resourcesTabTitle')));
  if (app.value.type !== APP_TYPES.PROXIED && hasServices) views.value.push(buildMenuItem('services', t('app.servicesTabTitle')));
  if (app.value.accessLevel === 'admin' && app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('storage', t('app.storageTabTitle')));
  if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('graphs', t('app.graphsTabTitle')));
  views.value.push(buildMenuItem('security', t('app.securityTabTitle')));
  if (app.value.accessLevel === 'admin' && hasEmail.value && app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('email', t('app.emailTabTitle')));
  if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('cron', t('app.cronTabTitle')));
  views.value.push(buildMenuItem('updates', t('app.updatesTabTitle')));
  if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('backups', t('app.backupsTabTitle')));
  views.value.push(buildMenuItem('repair', t('app.repairTabTitle')));
  views.value.push(buildMenuItem('eventlog', t('app.eventlogTabTitle')));
  if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('uninstall', t('app.uninstallTabTitle')));

  hashChange();
  window.addEventListener('hashchange', hashChange);

  busy.value = false;
});

onBeforeUnmount(() => {
  if (refreshTimer) clearTimeout(refreshTimer);
  window.removeEventListener('hashchange', hashChange);
});

</script>

<template>
  <div class="configure-outer">
    <PostInstallDialog ref="postInstallDialog"/>
    <SftpInfoDialog ref="sftpInfoDialog"/>

    <div class="configure-inner" v-if="!busy">
      <div class="titlebar">
        <div style="display: flex; flex-grow: 1; overflow: hidden;">
          <img :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="height: 64px; width: 64px; margin-right: 10px;"/>
          <h2>
            <a class="applink" :href="link || null" target="_blank">{{ app.label || app.fqdn }}</a>
            <div class="statelabel" v-if="app.error">{{ installationStateLabel(app) }} - {{ app.error.message }}</div>
            <div class="statelabel" v-else>{{ installationStateLabel(app) }} {{ app.message ? ' - ' + app.message : '' }}</div>
            <ProgressBar v-if="app.progress" :busy="true" slim :value="app.progress" :show-label="false" style="margin-top: 10px"/>
          </h2>
        </div>

        <div class="titlebar-toolbar">
          <Button v-if="app.taskId" danger tool plain icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
          <Button :menu="views" secondary class="pankow-no-desktop" tool>{{ views.find(v => v.id === currentView).label }}</Button>
          <ButtonGroup>
            <Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
            <Button secondary tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />
            <Button secondary tool v-if="hasLocalStorage" :href="`/filemanager.html#/home/app/${app.id}`" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder" />
          </ButtonGroup>

          <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
        </div>
      </div>


      <div class="configure-body">
        <div class="configure-menu pankow-no-mobile">
          <div v-for="view in views" :key="view.id" class="configure-menu-item" :active="currentView === view.id ? true : null" :disabled="isViewEnabled(view.id, app.error?.details.installationState) ? null : true">
            <a v-if="isViewEnabled(view.id, app.error?.details.installationState)" :href="`/#/app/${app.id}/${view.id}`">{{ view.label }}</a>
            <span v-else>{{ view.label }}</span>
          </div>
        </div>
        <div class="configure-content">
          <Transition name="slide-fade" mode="out-in">
            <Info v-if="currentView === 'info'" :app="app"/>
            <Display v-else-if="currentView === 'display'" :app="app"/>
            <Location v-else-if="currentView === 'location'" :app="app"/>
            <Proxy v-else-if="currentView === 'proxy'" :app="app"/>
            <Access v-else-if="currentView === 'access'" :app="app"/>
            <Resources v-else-if="currentView === 'resources'" :app="app"/>
            <Services v-else-if="currentView === 'services'" :app="app"/>
            <Storage v-else-if="currentView === 'storage'" :app="app"/>
            <Graphs v-else-if="currentView === 'graphs'" :app="app"/>
            <Security v-else-if="currentView === 'security'" :app="app"/>
            <Email v-else-if="currentView === 'email'" :app="app"/>
            <Cron v-else-if="currentView === 'cron'" :app="app"/>
            <Updates v-else-if="currentView === 'updates'" :app="app"/>
            <Backups v-else-if="currentView === 'backups'" :app="app"/>
            <Repair v-else-if="currentView === 'repair'" :app="app"/>
            <Eventlog v-else-if="currentView === 'eventlog'" :app="app"/>
            <Uninstall v-else-if="currentView === 'uninstall'" :app="app"/>
          </Transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.applink {
  display: flex;
  align-items: center;
  color: var(--pankow-text-color);
}

.titlebar {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.titlebar h2 {
  overflow: hidden;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.titlebar-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 576px) {
  .titlebar-toolbar {
    flex-grow: 1;
  }
}

.statelabel {
  font-size: 12px;
  margin-top: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}

.applink:not([href]) {
  cursor: not-allowed;
}

.configure-outer {
  width: 100%;
  margin: auto;
  margin-top: 0;
}

.configure-inner {
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 0 15px;
}

.apptask-progress {
  position: relative;
  width: 100%;
  height: 5px;
  text-align: center;
  border-radius: 10px;
  color: var(--pankow-text-color);
  margin-top: 4px;
}

.apptask-progress-filled {
  background-color: var(--pankow-color-primary);
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  z-index: 1;
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 40px 40px;
  animation: apptask-progress-bar-stripes 1s linear infinite;
  transition: width 300ms;
}

@keyframes apptask-progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.configure-body {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  overflow-wrap: hidden;
}

.configure-menu-item {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  margin-right: 60px;
}

.configure-menu-item > a,
.configure-menu-item > span {
  padding: 4px 4px 4px 4px;
  display: block;
  color: var(--pankow-text-color);
}

.configure-menu-item[active] > a,
.configure-menu-item[active] > span {
  color: var(--pankow-color-primary-active);
  font-weight: bold;
}

.configure-menu-item:hover > a,
.configure-menu-item:hover > span {
  color: var(--pankow-color-primary-hover);
}

.configure-menu-item[disabled] > a,
.configure-menu-item[disabled] > span {
  color: gray;
  cursor: not-allowed;
}

.configure-content {
  flex-grow: 1;
  overflow: hidden;
}

</style>
