<script setup>

import { onMounted, ref, useTemplateRef, inject } from 'vue';
import { Button, ClipboardAction } from '@cloudron/pankow';
import { prettyDate } from '@cloudron/pankow/utils';
import { renderSafeMarkdown, stripSsoInfo } from '../../utils.js';
import AppsModel from '../../models/AppsModel.js';

const appsModel = AppsModel.create();

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

const showDoneChecklist = ref(false);
const hasOldChecklist = ref(false);
const editing = ref(false);
const busy = ref(false);
const placeholder = 'Add admin notes here...';
const noteContent = ref('');
const emit = defineEmits([ 'changed' ]);

const notesTextarea = useTemplateRef('notesTextarea');
const profile = inject('profile');

async function onAckChecklistItem(item, key) {
  const [error] = await appsModel.ackChecklistItem(props.app.id, key, true);
  if (error) return console.error(error);

  item.acknowledged = true;
  item.changedAt = Date.now();
  item.changedBy = profile.value.username;
  hasOldChecklist.value = true;
}

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

  // skip saving if unchanged from postInstall
  if (noteContent.value === props.app.manifest.postInstallMessage) {
    busy.value = false;
    editing.value = false;
    return;
  }

  const [error] = await appsModel.configure(props.app.id, 'notes', { notes: noteContent.value });
  if (error) {
    busy.value = false;
    return console.error(error);
  }

  // let main view know about this
  emit('changed');

  editing.value = false;
  busy.value = false;
}

function onEdit() {
  editing.value = true;
  setTimeout(() => notesTextarea.value.focus(), 200);
}

function onDismiss() {
  editing.value = false;
  noteContent.value = props.app.notes === null ? props.app.manifest.postInstallMessage : props.app.notes;
}

onMounted(() => {
  hasOldChecklist.value = !!Object.keys(props.app.checklist).find((k) => { return props.app.checklist[k].acknowledged; });
  noteContent.value = props.app.notes === null ? props.app.manifest.postInstallMessage : props.app.notes;

  editing.value = false;
  busy.value = false;
});

</script>

<template>
  <div>

    <div class="info-row">
      <div class="info-label">{{ $t('app.updates.info.description') }}</div>
      <div class="info-value" v-if="app.appStoreId">{{ app.manifest.title }} {{ app.manifest.upstreamVersion }}</div>
      <div class="info-value" v-else-if="app.versionsUrl">{{ app.manifest.title }} {{ app.manifest.upstreamVersion }}</div>
      <div class="info-value" v-else>{{ app.manifest.dockerImage }}</div>
    </div>

    <div class="info-row">
      <div class="info-label">{{ $t('app.updates.info.appId') }}</div>
      <div class="info-value">
        {{ app.id }}
        <ClipboardAction plain :value="app.id"/>
      </div>
    </div>

    <div class="info-row">
      <div class="info-label">{{ $t('app.updates.info.packageVersion') }}</div>
      <div class="info-value" v-if="app.appStoreId">
        <a :href="`/#/appstore/${app.manifest.id}?version=${app.manifest.version}`">{{ app.manifest.id }}@{{ app.manifest.version }}</a>
        <ClipboardAction plain :value="app.manifest.id + '@' + app.manifest.version"/>
      </div>
      <div class="info-value" v-else>{{ app.manifest.version }} <ClipboardAction plain :value="app.manifest.version"/></div>
    </div>

    <div class="info-row" v-if="app.versionsUrl">
      <div class="info-label">{{ $t('app.updates.info.packager') }}</div>
      <div class="info-value">
        <a :href="app.manifest.packagerUrl" target="_blank">{{ app.manifest.packagerName }}</a> (community)
      </div>
    </div>

    <div class="info-row">
      <div class="info-label">{{ $t('app.updates.info.installedAt') }}</div>
      <div class="info-value">{{ prettyDate(app.creationTime) }}</div>
    </div>

    <div class="info-row">
      <div class="info-label">{{ $t('app.updates.info.lastUpdated') }}</div>
      <div class="info-value">{{ prettyDate(app.updateTime) }}</div>
    </div>

    <div v-if="Object.keys(app.checklist).length">
      <br/>
      <div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;">
        <div class="actionable" @click="showDoneChecklist = true" v-show="hasOldChecklist && !showDoneChecklist">{{ $t('app.appInfo.checklistShow') }}</div>
        <div class="actionable" @click="showDoneChecklist = false" v-show="showDoneChecklist">{{ $t('app.appInfo.checklistHide') }}</div>
      </div>

      <div v-for="(item, key) in app.checklist" :key="key">
        <div class="checklist-item" v-if="!item.acknowledged">
          <span v-html="renderSafeMarkdown(item.message)"></span>
          <Button small plain tool style="margin-left: 10px;" @click="onAckChecklistItem(item, key)">{{ $t('main.dialog.done') }}</Button>
        </div>
      </div>

      <div v-for="(item, key) in app.checklist" :key="key" v-show="showDoneChecklist">
        <div class="checklist-item checklist-item-acknowledged" v-if="item.acknowledged">
          <span v-html="renderSafeMarkdown(item.message)"></span>
          <span class="text-muted text-small">{{ item.changedBy }} - {{ prettyDate(item.changedAt) }}</span>
        </div>
      </div>
    </div>

    <br/>

    <label class="control-label">
      {{ $t('app.info.notes.title') }}
      <i v-show="!editing" class="info-edit-indicator fa fa-pencil-alt" @click="onEdit()"></i>
    </label>

    <div>
      <div v-show="!editing">
        <div v-if="noteContent" v-html="renderSafeMarkdown(stripSsoInfo(noteContent, app.sso))"></div>
        <div v-else class="text-muted hand" @click="onEdit()">{{ placeholder }}</div>
      </div>
      <div v-show="editing">
        <textarea ref="notesTextarea" style="white-space: pre-wrap; margin-bottom: 5px; width: 100%" v-model="noteContent" rows="10"></textarea>
        <div class="edit-buttons">
          <Button secondary @click="onDismiss()" v-show="!busy">{{ $t('main.dialog.cancel') }}</Button>
          <Button @click="onSubmit()" :disabled="busy" :loading="busy">{{ $t('app.display.saveAction') }}</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.edit-buttons {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.info-edit-indicator {
  color: var(--pankow-text-color);
  margin-left: 10px;
  cursor: pointer;
}

.info-edit-indicator:hover {
  color: var(--pankow-color-dark);
}

.checklist-item {
  padding: 8px;
  border: none;
  border-left: 2px solid rgb(255, 76, 76);
  background-color: #ff000014;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.checklist-item-acknowledged {
  border-left: 2px solid var(--pankow-color-success);
  background-color: transparent;
}

</style>

<style>

.checklist-item > span > p {
  margin: 0;
}

</style>