<script setup>

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

import { ref, useTemplateRef, onMounted } from 'vue';
import { fetcher, Button, ButtonGroup, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from '@cloudron/pankow';
import '@xterm/xterm/css/xterm.css';
import { Terminal } from '@xterm/xterm';
import { AttachAddon } from '@xterm/addon-attach';
import { FitAddon } from '@xterm/addon-fit';
import { API_ORIGIN, ISTATES, RSTATES, HSTATES } from '../constants.js';
import AppsModel from '../models/AppsModel.js';
import { createDirectoryModel } from '../models/DirectoryModel.js';

let directoryModel = null;
const appsModel = AppsModel.create();
const accessToken = localStorage.token;
let socket = null;
let terminal = null;

const fatalError = ref(false);
const busyRestart = ref(false);
const connected = ref(false);
const addons = ref({});
const showFilemanager = ref(false);
const manifestVersion = ref('');
const schedulerMenuModel = ref([]);
const id = ref('');
const cwd = ref('');
const name = ref('');
const link = ref('');
const downloadFileDownloadUrl = ref('');

const fatalErrorDialog = useTemplateRef('fatalErrorDialog');
const inputDialog = useTemplateRef('inputDialog');
const fileUploader = useTemplateRef('fileUploader');
const schedulerMenu = useTemplateRef('schedulerMenu');

function onFatalError(errorMessage) {
  fatalError.value = errorMessage;
  fatalErrorDialog.value.open();
}

async function onDownload() {
  downloadFileDownloadUrl.value = '';

  const downloadFileName = await inputDialog.value.prompt({
    title: t('terminal.download.title'),
    message: t('terminal.download.description'),
    value: '',
    confirmStyle: 'primary',
    confirmLabel: t('terminal.download.download'),
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary'
  });

  if (!downloadFileName) return;

  try {
    await fetcher.head(`${API_ORIGIN}/api/v1/apps/${id.value}/download`, {
      file: downloadFileName,
      access_token: accessToken
    });
  } catch (error) {
    if (error.status === 404) console.error('The requested file does not exist.');
    else console.error('Failed', error);

    return;
  }

  downloadFileDownloadUrl.value = `${API_ORIGIN}/api/v1/apps/${id.value}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${accessToken}`;

  // we have to click the link to make the browser do the download
  // don't know how to prevent the browsers
  setTimeout(() => {
    document.getElementById('fileDownloadLink').click();
  }, 100);
}

function onUpload() {
  fileUploader.value.onUploadFile('/');
}

async function uploadHandler(targetDir, file, progressHandler) {
  await directoryModel.upload(targetDir, file, progressHandler);
}

function usesAddon(addon) {
  return !!Object.keys(addons.value).find(function (a) { return a === addon; });
}

function terminalInject(addon, command) {
  if (!socket) return;

  let cmd = '';
  if (addon === 'mysql') {
    if (manifestVersion.value === 1) {
      cmd = 'mysql --user=${MYSQL_USERNAME} --password=${MYSQL_PASSWORD} --host=${MYSQL_HOST} ${MYSQL_DATABASE}';
    } else {
      cmd = 'mysql --user=${CLOUDRON_MYSQL_USERNAME} --password=${CLOUDRON_MYSQL_PASSWORD} --host=${CLOUDRON_MYSQL_HOST} ${CLOUDRON_MYSQL_DATABASE}';
    }
  } else if (addon === 'postgresql') {
  if (manifestVersion.value === 1) {
      cmd = 'PGPASSWORD=${POSTGRESQL_PASSWORD} psql -h ${POSTGRESQL_HOST} -p ${POSTGRESQL_PORT} -U ${POSTGRESQL_USERNAME} -d ${POSTGRESQL_DATABASE}';
    } else {
      cmd = 'PGPASSWORD=${CLOUDRON_POSTGRESQL_PASSWORD} psql -h ${CLOUDRON_POSTGRESQL_HOST} -p ${CLOUDRON_POSTGRESQL_PORT} -U ${CLOUDRON_POSTGRESQL_USERNAME} -d ${CLOUDRON_POSTGRESQL_DATABASE}';
    }
  } else if (addon === 'mongodb') {
    if (manifestVersion.value === 1) {
      cmd = 'mongo -u "${MONGODB_USERNAME}" -p "${MONGODB_PASSWORD}" ${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DATABASE}';
    } else {
      cmd = 'mongosh -u "${CLOUDRON_MONGODB_USERNAME}" -p "${CLOUDRON_MONGODB_PASSWORD}" ${CLOUDRON_MONGODB_HOST}:${CLOUDRON_MONGODB_PORT}/${CLOUDRON_MONGODB_DATABASE}';
    }
  } else if (addon === 'redis') {
    if (manifestVersion.value === 1) {
      cmd = 'redis-cli -h "${REDIS_HOST}" -p "${REDIS_PORT}" -a "${REDIS_PASSWORD}"';
    } else if (addons.value['redis'].noPassword) {
      cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}"';
    } else {
      cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}" -a "${CLOUDRON_REDIS_PASSWORD}" --no-auth-warning';
    }
  } else if (addon === 'scheduler' && command) {
    cmd = command;
  }

  if (!cmd) return;

  cmd += ' ';

  socket.send(cmd);
  terminal.focus();
}

function onSchedulerMenu(event) {
  schedulerMenu.value.toggle(event);
}

async function onRestartApp() {
  const confirmed = await inputDialog.value.confirm({
    message: t('filemanager.toolbar.restartApp') + '?',
    confirmLabel: t('main.action.restart'),
    confirmStyle: 'danger',
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary',
  });

  if (!confirmed) return;

  busyRestart.value = true;

  const [error] = await appsModel.restart(id.value);
  if (error) return console.error(error);

  busyRestart.value = false;
}

let fitAddon = null;
let attachAddon = null;

let connectingTimeout = null;

async function connect(retry = false) {
  clearTimeout(connectingTimeout);

  let execId;
  try {
    const execBody = { cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' };
    if (cwd.value) execBody.cwd = cwd.value;
    const result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id.value}/exec`, execBody, { access_token: accessToken });
    execId = result.body.id;
  } catch (error) {
    console.error('Cannot create socket.', error);
    connectingTimeout = setTimeout(() => connect(true), 1000);
    return;
  }

  if (retry) terminal.writeln('\nReconnecting...');
  else terminal.writeln('\nConnecting...');

  fitAddon.fit();

  // websocket cannot use relative urls
  const url = `${API_ORIGIN.replace('https', 'wss')}/api/v1/apps/${id.value}/exec/${execId}/startws?tty=true&rows=${terminal.rows}&columns=${terminal.cols}&access_token=${accessToken}`;
  socket = new WebSocket(url);

  if (attachAddon) attachAddon.dispose();
  attachAddon = new AttachAddon(socket);
  terminal.loadAddon(attachAddon);

  // eslint-disable-next-line no-unused-vars
  socket.addEventListener('open', (event) => {
    connected.value = true;
    clearTimeout(connectingTimeout);
  });

  // eslint-disable-next-line no-unused-vars
  socket.addEventListener('close', (event) => {
    connected.value = false;
    console.log('Socket closed. Reconnecting...');
    connectingTimeout = setTimeout(() => connect(true), 1000);
  });

  socket.addEventListener('error', (error) => {
    connected.value = false;
    console.log('Socket error. Reconnecting...', error);
    connectingTimeout = setTimeout(() => connect(true), 1000);
  });

  terminal.focus();
}

onMounted(async () => {
  if (!localStorage.token) {
    console.error('Set localStorage.token');
    return;
  }

  const urlParams = new URLSearchParams(window.location.search);
  id.value = urlParams.get('id');
  cwd.value = urlParams.get('cwd') || '';

  if (!id.value) {
    console.error('No app id specified');
    return;
  }

  name.value = id.value;

  directoryModel = createDirectoryModel(API_ORIGIN, accessToken, `apps/${id.value}`);

  const [error, app] = await appsModel.get(id.value);
  if (error) {
    console.error(`Failed to get app info for ${id.value}:`, error);
    return onFatalError(`Unknown app ${id.value}. Cannot continue.`);
  }

  name.value = `${app.label || app.fqdn} (${app.manifest.title})`;
  link.value = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
  addons.value = app.manifest.addons;
  manifestVersion.value = app.manifest.manifestVersion;
  showFilemanager.value = !!app.manifest.addons.localstorage;

  schedulerMenuModel.value = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
    return {
      label: k,
      action: () => terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
    };
  });

  window.document.title = `Terminal - ${name.value}`;

  window.addEventListener('beforeunload', function (e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }, true );

  window.addEventListener('keydown', (event) => {
    if (event.key === 'C' && (event.ctrlKey || event.metaKey)) { // ctrl shift c
      event.preventDefault();

      if (!terminal) return;

      // execCommand('copy') would copy any selection from the page, so do this only if terminal has a selection
      if (!terminal.getSelection()) return;

      document.execCommand('copy');

      terminal.focus();
    }
  });

  terminal = new Terminal();
  terminal.open(document.getElementsByClassName('pankow-main-layout-body')[0]);

  // Let the browser handle paste
  terminal.attachCustomKeyEventHandler(function (e) {
    if (e.key === 'V' && (e.ctrlKey || e.metaKey)) return false;
  });

  fitAddon = new FitAddon();
  terminal.loadAddon(fitAddon);
  fitAddon.fit();

  connect();
});

</script>

<template>
  <MainLayout :gap="false">
    <template #dialogs>
      <Dialog ref="fatalErrorDialog" title="Error">
        <p>{{ fatalError }}</p>
      </Dialog>

      <InputDialog ref="inputDialog" />
      <a id="fileDownloadLink" :href="downloadFileDownloadUrl" target="_blank"></a>
    </template>
    <template #header>
      <TopBar class="navbar">
        <template #left>
          <a class="title" :href="link" target="_blank">{{ name }}</a>
        </template>
        <template #right>
          <ButtonGroup>
            <!-- Scheduler/cron tasks -->
            <Button success :menu="schedulerMenuModel" v-if="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>

            <!-- addon actions -->
            <Button success @click="terminalInject('mysql')" v-if="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
            <Button success @click="terminalInject('postgresql')" v-if="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
            <Button success @click="terminalInject('mongodb')" v-if="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
            <Button success @click="terminalInject('redis')" v-if="usesAddon('redis')" :disabled="!connected">Redis</Button>
          </ButtonGroup>

          <ButtonGroup>
            <!-- upload/download actions -->
            <Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
            <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
          </ButtonGroup>

          <Button style="margin: 0 20px;" v-tooltip="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>

          <ButtonGroup>
            <Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" v-tooltip="$t('filemanager.title')" />
            <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" v-tooltip="$t('logs.title')" />
          </ButtonGroup>
        </template>
      </TopBar>
    </template>
    <template #body>
      <!-- terminal will be injected here -->
    </template>
    <template #footer>
      <FileUploader
        ref="fileUploader"
        :upload-handler="uploadHandler"
        :tr="$t"
      />
    </template>
  </MainLayout>
</template>

<style>

body {
  background-color: black !important;
  overflow: hidden;
}

.title {
  font-size: 20px;
  color: var(--pankow-color-text);
}

.pankow-top-bar {
  background-color: black;
  color: white;
  margin-bottom: 0 !important;
  padding: 5px 10px;
}

</style>

<style scoped>

.dialog-header {
  font-weight: 600;
  font-size: 1.25rem;
}

.dialog-single-input {
  display: block;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 1.5rem;
}

.dialog-single-input-submit {
  margin-top: 5px;
}

</style>

