<template>
  <div
    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
  >
    <span class="align-center text-red-500 mr-2">{{ message }}</span>
    <span class="ml-2">
      <router-link
        :to="{ name: 'help' }"
        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
      >
        Help
      </router-link>
    </span>
  </div>
</template>

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

import { AppString, NotificationIface } from "../constants/app";
import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "../utils/notify";

@Component({
  mixins: [PlatformServiceMixin],
})
export default class TopMessage extends Vue {
  // Enhanced PlatformServiceMixin v4.0 provides:
  // - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
  // - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
  // - Cache management: this.$refreshSettings(), this.$clearAllCaches()
  // - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()
  // - All methods use smart caching with TTL for massive performance gains

  $notify!: (notification: NotificationIface, timeout?: number) => void;

  notify!: ReturnType<typeof createNotifyHelpers>;

  @Prop selected = "";

  message = "";

  async mounted() {
    this.notify = createNotifyHelpers(this.$notify);

    try {
      // Ultra-concise cached settings loading - replaces 50+ lines of logic!
      const settings = await this.$accountSettings(undefined, {
        activeDid: undefined,
        apiServer: AppString.PROD_ENDORSER_API_SERVER,
      });

      if (
        settings.warnIfTestServer &&
        settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15);
        this.message = "You're not using prod, user " + didPrefix;
      } else if (
        settings.warnIfProdServer &&
        settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15);
        this.message = "You are using prod, user " + didPrefix;
      }
    } catch (err: unknown) {
      this.notify.error(JSON.stringify(err), TIMEOUTS.MODAL);
    }
  }
}
</script>
