<template>
  <QuickNav selected="Discover" />
  <TopMessage />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
        <!-- Back -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </button>
        Individual Profile
      </h1>
      <div class="text-sm text-center text-slate-500"></div>
    </div>

    <!-- Loading Animation -->
    <div
      v-if="isLoading"
      class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
    >
      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
    </div>

    <div v-else-if="profile">
      <!-- Profile Info -->
      <div class="mt-8">
        <div class="text-sm">
          <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
          {{ profileDisplayName }}
          <button title="Copy Link to Profile" @click="onCopyLinkClick()">
            <font-awesome
              icon="link"
              class="text-sm text-slate-500 ml-2 mb-1"
            />
          </button>
        </div>
        <p v-if="profile.description" class="mt-4 text-slate-600">
          {{ profile.description }}
        </p>
      </div>

      <!-- Map for first coordinates -->
      <div v-if="hasFirstLocation" class="mt-4">
        <h2 class="text-lg font-semibold">Location</h2>
        <div class="h-96 mt-2 w-full">
          <l-map ref="profileMap" :center="firstLocationCoords" :zoom="mapZoom">
            <l-tile-layer
              :url="tileLayerUrl"
              layer-type="base"
              name="OpenStreetMap"
            />
            <l-marker :lat-lng="firstLocationCoords">
              <l-popup>{{ profileDisplayName }}</l-popup>
            </l-marker>
          </l-map>
        </div>
      </div>

      <!-- Map for second coordinates -->
      <div v-if="hasSecondLocation" class="mt-4">
        <h2 class="text-lg font-semibold">Second Location</h2>
        <div class="h-96 mt-2 w-full">
          <l-map
            ref="profileMap"
            :center="secondLocationCoords"
            :zoom="mapZoom"
          >
            <l-tile-layer
              :url="tileLayerUrl"
              layer-type="base"
              name="OpenStreetMap"
            />
            <l-marker :lat-lng="secondLocationCoords">
              <l-popup>{{ profileDisplayName }}</l-popup>
            </l-marker>
          </l-map>
        </div>
      </div>
    </div>

    <div v-else class="text-center mt-8">
      <p class="text-lg text-slate-500">Profile not found.</p>
    </div>
  </section>
</template>

<script lang="ts">
import "leaflet/dist/leaflet.css";
import { Component, Vue } from "vue-facing-decorator";
import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { Router, RouteLocationNormalizedLoaded } from "vue-router";

import QuickNav from "../components/QuickNav.vue";
import TopMessage from "../components/TopMessage.vue";
import {
  DEFAULT_PARTNER_API_SERVER,
  NotificationIface,
  APP_SERVER,
} from "../constants/app";
import { Contact } from "../db/tables/contacts";
import { didInfo, getHeaders } from "../libs/endorserServer";
import { UserProfile } from "../libs/partnerServer";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { useClipboard } from "@vueuse/core";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { NOTIFY_PROFILE_LOAD_ERROR } from "@/constants/notifications";

/**
 * User Profile View Component
 *
 * Displays individual user profile information including:
 * - Basic profile data and description
 * - Location information with interactive maps
 * - Profile link sharing functionality
 *
 * Features:
 * - Profile data loading from partner API
 * - Interactive maps for location visualization
 * - Copy-to-clipboard functionality for profile links
 * - Responsive design with loading states
 *
 * @author Matthew Raymer
 */
@Component({
  components: {
    LMap,
    LMarker,
    LPopup,
    LTileLayer,
    QuickNav,
    TopMessage,
  },
  mixins: [PlatformServiceMixin],
})
export default class UserProfileView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;
  $route!: RouteLocationNormalizedLoaded;

  notify!: ReturnType<typeof createNotifyHelpers>;

  activeDid = "";
  allContacts: Array<Contact> = [];
  allMyDids: Array<string> = [];
  isLoading = true;
  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
  profile: UserProfile | null = null;

  // make this function available to the Vue template
  didInfo = didInfo;
  /** Production share domain for deep links */
  APP_SERVER = APP_SERVER;

  /**
   * Initializes notification helpers
   */
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }

  /**
   * Component initialization
   *
   * Loads account settings, contacts, and profile data
   * Uses PlatformServiceMixin for database operations
   */
  async mounted() {
    await this.initializeSettings();
    await this.loadContacts();
    await this.loadProfile();
  }

  /**
   * Initializes account settings from database
   */
  private async initializeSettings() {
    const settings = await this.$accountSettings();
    this.activeDid = settings.activeDid || "";
    this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
  }

  /**
   * Loads all contacts from database
   */
  private async loadContacts() {
    this.allContacts = await this.$getAllContacts();
    this.allMyDids = await retrieveAccountDids();
  }

  /**
   * Loads user profile data from partner API
   *
   * Handles profile loading with error handling and loading states
   */
  async loadProfile() {
    const profileId: string = this.$route.params.id as string;
    if (!profileId) {
      this.isLoading = false;
      return;
    }

    try {
      const response = await fetch(
        `${this.partnerApiServer}/api/partner/userProfile/${encodeURIComponent(profileId)}`,
        {
          method: "GET",
          headers: await getHeaders(this.activeDid),
        },
      );

      if (response.status === 200) {
        const result = await response.json();
        this.profile = result.data;
        if (this.profile && this.profile.rowId !== profileId) {
          // currently the server returns "rowid" with lowercase "i"; remove when that's fixed
          this.profile.rowId = profileId;
        }
      } else {
        throw new Error("Failed to load profile");
      }
    } catch (error) {
      logger.error("Error loading profile:", error);
      this.notify.error(NOTIFY_PROFILE_LOAD_ERROR.message, TIMEOUTS.LONG);
    } finally {
      this.isLoading = false;
    }
  }

  /**
   * Copies profile link to clipboard
   *
   * Creates a deep link to the profile and copies it to the clipboard
   * Shows success notification when completed
   */
  onCopyLinkClick() {
    // Use production URL for sharing to avoid localhost issues in development
    const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
    useClipboard()
      .copy(deepLink)
      .then(() => {
        this.notify.copied("profile link", TIMEOUTS.STANDARD);
      });
  }

  /**
   * Computed properties for template logic streamlining
   */

  /**
   * Gets the display name for the profile using didInfo utility
   * @returns Formatted display name for the profile owner
   */
  get profileDisplayName() {
    return this.didInfo(
      this.profile?.issuerDid,
      this.activeDid,
      this.allMyDids,
      this.allContacts,
    );
  }

  /**
   * Checks if the profile has first location coordinates
   * @returns True if both latitude and longitude are available
   */
  get hasFirstLocation() {
    return this.profile?.locLat && this.profile?.locLon;
  }

  /**
   * Gets the coordinate array for the first location
   * @returns Array of [latitude, longitude] for map center
   */
  get firstLocationCoords() {
    return [this.profile?.locLat, this.profile?.locLon];
  }

  /**
   * Checks if the profile has second location coordinates
   * @returns True if both latitude and longitude are available
   */
  get hasSecondLocation() {
    return this.profile?.locLat2 && this.profile?.locLon2;
  }

  /**
   * Gets the coordinate array for the second location
   * @returns Array of [latitude, longitude] for map center
   */
  get secondLocationCoords() {
    return [this.profile?.locLat2, this.profile?.locLon2];
  }

  /**
   * Standard map zoom level for profile location maps
   * @returns Default zoom level for location display
   */
  get mapZoom() {
    return 12;
  }

  /**
   * OpenStreetMap tile layer URL template
   * @returns URL template for map tile fetching
   */
  get tileLayerUrl() {
    return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  }
}
</script>
