<!DOCTYPE html>
<html lang="en">

<head>
  <%- header %>
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div id="content" class="container">
    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
    <p>{{ $t('index.description') }}</p>
    <div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
      <div style="line-height: 32px;">
        <i class="fas fa-circle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
        <p v-html="$t('index.startup_errors')"></p>
        <br>
      </div>
      <ul>
        <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
      </ul>
      <a class="btn btn-danger" href="/troubleshooting/#logs">View Logs</a>
    </div>
    <!-- Version -->
    <div class="card p-2 my-4">
      <div class="card-body" v-if="version">
        <h2>Version {{version}}</h2>
        <br>
        <div v-if="loading">
          {{ $t('index.loading_latest') }}
        </div>
        <div class="alert alert-success" v-if="buildVersionIsDirty">
          {{ $t('index.version_dirty') }} 🌇
        </div>
        <div v-else-if="!nightlyBuildAvailable && !stableBuildAvailable && !buildVersionIsDirty">
          <div class="alert alert-success">
            {{ $t('index.version_latest') }}
          </div>
        </div>
        <div v-if="nightlyBuildAvailable">
          <div class="alert alert-warning">
            <div class="d-flex justify-content-between">
              <div class="my-2">
                <p v-html="$t('index.new_nightly')"></p>
              </div>
              <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev"
                target="_blank">Download</a>
            </div>
            <pre><b>{{nightlyData.head_sha}}</b></pre>
            <pre>{{nightlyData.display_title}}</pre>
          </div>
        </div>
        <div v-if="stableBuildAvailable">
          <div class="alert alert-warning">
            <div class="d-flex justify-content-between">
              <div class="my-2">
                <p v-html="$t('index.new_stable')"></p>
              </div>
              <a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">{{ $t('index.download') }}</a>
            </div>
            <h3>{{githubVersion.name}}</h3>
            <pre>{{githubVersion.body}}</pre>
          </div>
        </div>
      </div>
    </div>
    <!-- Resources -->
    <div class="my-4">
      <Resource-Card></Resource-Card>
    </div>
  </div>
</body>

<script type="module">
  import { createApp } from 'vue'
  import { initApp } from './init'
  import Navbar from './Navbar.vue'
  import ResourceCard from './ResourceCard.vue'

  console.log("Hello, Sunshine!")
  let app = createApp({
    components: {
      Navbar,
      ResourceCard
    },
    data() {
      return {
        version: null,
        githubVersion: null,
        nightlyData: null,
        loading: true,
        logs: null,
      }
    },
    async created() {
      try {
        this.version = (await fetch("/api/config").then((r) => r.json())).version;
        this.githubVersion = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()));
        if (this.buildVersionIsNightly) {
          this.nightlyData = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/actions/workflows/CI.yml/runs?branch=nightly&event=push&exclude_pull_requests=true&per_page=1").then((r) => r.json())).workflow_runs[0];
        }
      } catch (e) {
      }
      try {
        this.logs = (await fetch("/api/logs").then(r => r.text()))
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    computed: {
      stableBuildAvailable() {
        // If we can't get versions, return false
        if (!this.githubVersion || !this.version) return false;

        // Get the GitHub version tag
        let v_github = this.githubVersion.name;
        // If the version starts with a v, remove it
        if (v_github.indexOf("v") === 0) v_github = v_github.substring(1);

        // Get the current version
        let v_this = this.version;
        // If the version starts with a v, remove it
        if (v_this.indexOf("v") === 0) v_this = v_this.substring(1);

        // if nightly or dirty, we do an additional check to make sure it's an actual upgrade.
        if (this.buildVersionIsNightly || this.buildVersionIsDirty) {
          const stableVersion = this.version.split('.').slice(0, 3).join('.');
          return this.githubVersion.tag_name.substring(1) > stableVersion;
        }

        // return true if the version is different, otherwise false
        return v_github !== v_this;
      },
      nightlyBuildAvailable() {
        // Verify nightly data is available and the build version is not stable
        // This is important to ensure the UI does not try to load undefined values.
        if (!this.nightlyData || this.buildVersionIsStable) return false;
        // If built with dirty git tree, return false
        if (this.buildVersionIsDirty) return false;
        // Get the commit hash
        let commit = this.version?.split(".").pop();
        // return true if the commit hash is different, otherwise false
        return this.nightlyData.head_sha.indexOf(commit) !== 0;
      },
      buildVersionIsDirty() {
        return this.version?.split(".").length === 5 &&
          this.version.indexOf("dirty") !== -1
      },
      buildVersionIsNightly() {
        return this.version?.split(".").length === 4
      },
      buildVersionIsStable() {
        return this.version?.split(".").length === 3
      },
      /** Parse the text errors, calculating the text, the timestamp and the level */
      fancyLogs() {
        if (!this.logs) return [];
        let regex = /(\[\d{4}:\d{2}:\d{2}:\d{2}:\d{2}:\d{2}\]):\s/g;
        let rawLogLines = (this.logs.split(regex)).splice(1);
        let logLines = []
        for (let i = 0; i < rawLogLines.length; i += 2) {
          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
        }
        return logLines;
      }
    }
  });

  initApp(app);
</script>
