<!-- This is useful in an environment where the download doesn't work. -->
<template>
  <QuickNav selected="" />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <TopMessage />

    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>

    <!-- Error Message -->
    <div
      v-if="error"
      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"
    >
      <span>{{ error }}</span>
    </div>

    <!-- Log Content -->
    <div v-if="loading" class="text-center">
      <font-awesome icon="spinner" class="fa-spin text-slate-400" />
      Loading logs...
    </div>
    <div v-else-if="!logs.length" class="text-center text-slate-500">
      No logs found.
    </div>
    <div v-else>
      <div v-for="(log, index) in logs" :key="index" class="mb-2">
        <pre
          class="bg-slate-100 p-4 rounded-md overflow-x-auto whitespace-pre-wrap"
          >{{ log.date }} {{ log.message }}</pre
        >
      </div>
    </div>
    <div class="text-slate-500">
      <h2 class="text-lg font-bold mb-2">Memory Logs</h2>
      <pre
        class="bg-slate-100 p-4 rounded-md overflow-x-auto whitespace-pre-wrap"
        >{{ memoryLogs.join("\n") }}</pre
      >
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";

import QuickNav from "../components/QuickNav.vue";
import TopMessage from "../components/TopMessage.vue";
import { logger } from "../utils/logger";
import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";

interface Log {
  date: string;
  message: string;
}

@Component({
  components: {
    QuickNav,
    TopMessage,
  },
  mixins: [PlatformServiceMixin],
})
export default class LogView extends Vue {
  $router!: Router;

  loading = true;
  error: string | null = null;
  logs: Log[] = [];
  memoryLogs: string[] = [];

  async mounted() {
    await this.loadLogs();
  }

  async loadLogs() {
    try {
      this.error = null; // Clear any previous errors
      this.memoryLogs = this.$memoryLogs;
      this.logs = (await this.$logs()) as unknown as Log[];
    } catch (error) {
      logger.error("Error loading logs:", error);
      this.error =
        error instanceof Error
          ? error.message
          : `An unknown error occurred while loading logs: ${String(error)}`;
    } finally {
      this.loading = false;
    }
  }
}
</script>
