<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-2 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">
        Share Your Contact Info
      </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>

    <div class="flex justify-center mt-8">
      <button
        class="block w-fit text-center text-lg font-bold 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-2 py-3 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
        :disabled="isLoading"
        aria-label="Copy contact information to clipboard"
        @click="onClickShare()"
      >
        {{ isLoading ? "Copying..." : "Copy to Clipboard" }}
      </button>
    </div>
    <div class="ml-12">
      <div class="mt-8">Click to copy your info, then send it to them.</div>
      <div>
        They will paste it in the input box on the Contacts
        <font-awesome icon="users" /> screen.
      </div>
    </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 { NotificationIface } from "../constants/app";
import { retrieveFullyDecryptedAccount } from "../libs/util";
import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { Settings } from "@/db/tables/settings";
import { Account } from "@/db/tables/accounts";
import { copyToClipboard } from "../services/ClipboardService";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";

// Constants for magic numbers
const DELAYS = {
  SHARE_CONTACTS_DELAY: 3000,
} as const;

@Component({
  mixins: [PlatformServiceMixin],
  components: { QuickNav, TopMessage },
})
export default class ShareMyContactInfoView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;

  notify!: ReturnType<typeof createNotifyHelpers>;

  // Component state
  isLoading = false;

  async mounted() {
    const settings = await this.$accountSettings();
    const activeDid = settings?.activeDid;
    if (!activeDid) {
      this.$router.push({ name: "home" });
    }
  }

  /**
   * Main share functionality - orchestrates the contact sharing process
   */
  async onClickShare(): Promise<void> {
    this.notify = createNotifyHelpers(this.$notify);
    this.isLoading = true;

    try {
      const settings = await this.$accountSettings();
      const account = await this.retrieveAccount();

      if (!account) {
        this.showAccountError();
        return;
      }

      const message = await this.generateContactMessage(settings, account);
      await copyToClipboard(message);
      await this.showSuccessNotifications();
      this.navigateToContacts();
    } catch (error) {
      await this.$logError(`Error sharing contact info: ${error}`);
      this.showGenericError();
    } finally {
      this.isLoading = false;
    }
  }

  /**
   * Retrieve the fully decrypted account for the active DID
   */
  private async retrieveAccount(): Promise<Account | undefined> {
    // Get activeDid from new active_identity table (ActiveDid migration)
    const activeIdentity = await this.$getActiveIdentity();
    const activeDid = activeIdentity.activeDid || "";

    if (!activeDid) {
      return undefined;
    }
    return await retrieveFullyDecryptedAccount(activeDid);
  }

  /**
   * Generate the contact message URL for sharing
   */
  private async generateContactMessage(settings: Settings, account: Account) {
    const givenName = settings.firstName || "";
    const isRegistered = !!settings.isRegistered;
    const profileImageUrl = settings.profileImageUrl || "";

    return await generateEndorserJwtUrlForAccount(
      account,
      isRegistered,
      givenName,
      profileImageUrl,
      true,
    );
  }

  /**
   * Show success notifications after copying
   */
  private async showSuccessNotifications(): Promise<void> {
    this.notify.copied("contact info", TIMEOUTS.LONG);

    const numContacts = await this.$contactCount();
    if (numContacts > 0) {
      setTimeout(() => {
        this.notify.success(
          "You may want to share some of your contacts with them. Select them below to copy and send.",
          TIMEOUTS.VERY_LONG,
        );
      }, DELAYS.SHARE_CONTACTS_DELAY);
    }
  }

  /**
   * Navigate to contacts page
   */
  private navigateToContacts(): void {
    this.$router.push({ name: "contacts" });
  }

  /**
   * Show account not found error
   */
  private showAccountError(): void {
    this.notify.error(
      "No account was found for the active DID.",
      TIMEOUTS.LONG,
    );
  }

  /**
   * Show generic error notification
   */
  private showGenericError(): void {
    this.notify.error(
      "There was a problem sharing your contact information. Please try again.",
      TIMEOUTS.LONG,
    );
  }
}
</script>
