<script setup>

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

import { ref, useTemplateRef, onMounted } from 'vue';
import { Button, InputDialog } from '@cloudron/pankow';
import { prettyDecimalSize, sleep } from '@cloudron/pankow/utils';
import moment from 'moment-timezone';
import Section from '../components/Section.vue';
import CloudronModel from '../models/CloudronModel.js';
import DashboardModel from '../models/DashboardModel.js';
import SystemModel from '../models/SystemModel.js';

const systemModel = SystemModel.create();
const dashboardModel = DashboardModel.create();
const cloudronModel = CloudronModel.create();

const config = ref({});
const info = ref({});
const uptime = ref('');
const activeSince = ref('');
const memory = ref({});
const cpus = ref({});

const inputDialog = useTemplateRef('inputDialog');
async function onReboot() {
  const confirmed = await inputDialog.value.confirm({
    title: t('main.rebootDialog.title'),
    message: t('main.rebootDialog.description'),
    confirmLabel: t('main.rebootDialog.rebootAction'),
    confirmStyle: 'danger',
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary'
  });

  if (!confirmed) return;

  await systemModel.reboot();

  // now poll until the backend does not respond anymore to trigger the unreachable overlay
  while (true) {
    const [error] = await dashboardModel.config();
    if (error) break;
    await sleep(1000);
  }
}

onMounted(async () => {
  let [error, result] = await systemModel.memory();
  if (error) return console.error(error);
  memory.value = result;

  [error, result] = await systemModel.cpus();
  if (error) return console.error(error);
  cpus.value = result;

  [error, result] = await cloudronModel.getTimeZone();
  if (error) return console.error(error);

  [error, result] = await systemModel.info();
  if (error) return console.error(error);
  info.value = result;

  uptime.value = moment.duration(info.value.uptimeSecs, 'seconds').locale(navigator.language).humanize();
  activeSince.value = info.value.activationTime ? moment(info.value.activationTime).fromNow() : 'unknown';

  [error, result] = await dashboardModel.config();
  if (error) return console.error(error);
  config.value = result;
});

</script>

<template>
  <Section :title="$t('system.title')">
    <InputDialog ref="inputDialog"/>

    <template #header-buttons>
      <Button tool secondary href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
      <Button @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
    </template>

    <div class="info-row">
      <div class="info-label">{{ $t('system.info.cloudronVersion') }}</div>
      <div class="info-value">{{ config.version }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.ubuntuVersion') }}</div>
      <div class="info-value">{{ config.ubuntuVersion }} {{ config.kernelVersion }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.vendor') }}</div>
      <div class="info-value">{{ info.sysVendor }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.product') }}</div>
      <div class="info-value">{{ info.productName }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">CPU</div>
      <div class="info-value">{{ cpus.length ? `${cpus.length} Core "${cpus[0].model}"` : '' }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.memory') }}</div>
      <div class="info-value">{{ prettyDecimalSize(memory.memory) }} RAM <span v-show="memory.swap">&amp; {{ prettyDecimalSize(memory.swap) }} Swap</span></div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.uptime') }}</div>
      <div class="info-value">{{ uptime }}</div>
    </div>
    <div class="info-row">
      <div class="info-label">{{ $t('system.info.activationTime') }}</div>
      <div class="info-value">{{ activeSince }}</div>
    </div>
  </Section>
</template>
