<template>
  <div
    v-if="message"
    class="-mt-6 bg-rose-100 border border-t-0 border-dashed border-rose-600 text-rose-900 text-sm text-center font-semibold rounded-b-md px-3 py-2 mb-3"
  >
    {{ message }}
  </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";
import { logger } from "../utils/logger";

@Component({
  mixins: [PlatformServiceMixin],
})
export default class TopMessage extends Vue {
  // Enhanced PlatformServiceMixin v4.0 provides:
  // - Cached database operations: this.$contacts(), this.$accountSettings()
  // - Settings shortcuts: this.$saveSettings()
  // - 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 {
      // Load settings without overriding database values - fixes settings inconsistency
      logger.debug("[TopMessage] 📥 Loading settings without overrides...");
      const settings = await this.$accountSettings();

      // Get activeDid from new active_identity table (ActiveDid migration)
      const activeIdentity = await this.$getActiveIdentity();

      logger.debug("[TopMessage] 📊 Settings loaded:", {
        activeDid: activeIdentity.activeDid,
        apiServer: settings.apiServer,
        warnIfTestServer: settings.warnIfTestServer,
        warnIfProdServer: settings.warnIfProdServer,
        component: "TopMessage",
        timestamp: new Date().toISOString(),
      });

      // Only show warnings if the user has explicitly enabled them
      if (
        settings.warnIfTestServer &&
        settings.apiServer &&
        settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = activeIdentity.activeDid?.slice(11, 15);
        this.message = "You're not using prod, user " + didPrefix;
        logger.debug("[TopMessage] ⚠️ Test server warning displayed:", {
          apiServer: settings.apiServer,
          didPrefix: didPrefix,
        });
      } else if (
        settings.warnIfProdServer &&
        settings.apiServer &&
        settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = activeIdentity.activeDid?.slice(11, 15);
        this.message = "You are using prod, user " + didPrefix;
        logger.debug("[TopMessage] ⚠️ Production server warning displayed:", {
          apiServer: settings.apiServer,
          didPrefix: didPrefix,
        });
      } else {
        logger.debug(
          "[TopMessage] ℹ️ No warnings displayed - conditions not met",
        );
      }
    } catch (err: unknown) {
      logger.error("[TopMessage] ❌ Error loading settings:", err);
      this.notify.error(JSON.stringify(err), TIMEOUTS.MODAL);
    }
  }
}
</script>
