<template>
  <QuickNav selected="Contacts" />

  <section id="Content" class="p-6 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">
        Onboarding Meeting
      </h1>

      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>

      <!-- 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>

    <!-- Existing Meeting Section -->
    <div
      v-if="!isLoading && currentMeeting != null && !isInEditOrCreateMode()"
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <h2 class="text-2xl">Current Meeting</h2>
          <button
            class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
            title="Edit Meeting"
            @click="startEditing"
          >
            <font-awesome icon="pen" class="fa-fw" />
            <span class="sr-only">{{
              isInCreateMode() ? "Create Meeting" : "Edit Meeting"
            }}</span>
          </button>
        </div>
        <button
          class="text-red-600 hover:text-red-800 transition-colors duration-200"
          :disabled="isDeleting"
          :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
          title="Delete Meeting"
          @click="confirmDelete"
        >
          <font-awesome icon="trash-can" class="fa-fw" />
          <span class="sr-only">{{
            isDeleting ? "Deleting..." : "Delete Meeting"
          }}</span>
        </button>
      </div>
      <div class="space-y-2">
        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
        <p>
          <strong>Expires:</strong>
          {{ formatExpirationTime(currentMeeting.expiresAt) }}
        </p>

        <div v-if="currentMeeting.password" class="mt-4">
          <p class="text-gray-600">
            Share the password with the members. You can also send them the
            "shortcut page for members" link below.
          </p>
        </div>
        <div v-else class="text-red-600">
          You must reenter your password. Edit this meeting, or delete it and
          create a new meeting.
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Dialog -->
    <div
      v-if="showDeleteConfirm"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
    >
      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
        <h3 class="text-lg font-medium mb-4">Delete Meeting?</h3>
        <p class="text-gray-600 mb-6">
          This action cannot be undone. Are you sure you want to delete this
          meeting?
        </p>
        <div class="flex justify-between space-x-4">
          <button
            class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"
            @click="showDeleteConfirm = false"
          >
            Cancel
          </button>
          <button
            class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
            @click="deleteMeeting"
          >
            Delete
          </button>
        </div>
      </div>
    </div>

    <!-- Create/Edit Meeting Form -->
    <div
      v-if="
        !isLoading &&
        isInEditOrCreateMode() &&
        newOrUpdatedMeetingInputs !=
          null /* duplicate check is for typechecks */
      "
      class="mt-8"
    >
      <h2 class="text-2xl mb-4">
        {{ isInCreateMode() ? "Create New Meeting" : "Edit Meeting" }}
      </h2>
      <!-- 
      This is my first form. Not sure if I like it; will see if the browser benefits extend to 
      the native app.
      -->
      <form
        class="space-y-4"
        @submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()"
      >
        <div>
          <label
            for="meetingName"
            class="block text-sm font-medium text-gray-700"
            >Meeting Name</label
          >
          <input
            id="meetingName"
            v-model="newOrUpdatedMeetingInputs.name"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Enter meeting name"
          />
        </div>

        <div>
          <label
            for="expirationTime"
            class="block text-sm font-medium text-gray-700"
            >Meeting Expiration Time</label
          >
          <input
            id="expirationTime"
            v-model="newOrUpdatedMeetingInputs.expiresAt"
            type="datetime-local"
            required
            :min="minDateTime"
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700"
            >Meeting Password</label
          >
          <input
            id="password"
            v-model="newOrUpdatedMeetingInputs.password"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Enter meeting password"
          />
        </div>

        <div>
          <label for="userName" class="block text-sm font-medium text-gray-700"
            >Your Name</label
          >
          <input
            id="userName"
            v-model="newOrUpdatedMeetingInputs.userFullName"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Your name"
          />
        </div>

        <div>
          <label
            for="projectLink"
            class="block text-sm font-medium text-gray-700"
            >Project Link</label
          >
          <input
            id="projectLink"
            v-model="newOrUpdatedMeetingInputs.projectLink"
            type="text"
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Project ID"
          />
        </div>

        <button
          type="submit"
          class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800"
          :disabled="isLoading"
        >
          {{
            isLoading
              ? isInCreateMode()
                ? "Creating..."
                : "Updating..."
              : isInCreateMode()
                ? "Create Meeting"
                : "Update Meeting"
          }}
        </button>
        <button
          v-if="isInEditOrCreateMode()"
          type="button"
          class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600"
          @click="cancelEditing"
        >
          Cancel
        </button>
      </form>
    </div>

    <!-- Members Section -->
    <div
      v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between">
        <h2 class="font-bold">Meeting Members</h2>
      </div>
      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
        <li>
          Page for Members:
          <span
            class="ml-4 cursor-pointer text-blue-600"
            title="Click to copy link for members"
            @click="copyMembersLinkToClipboard"
          >
            <font-awesome icon="link" />
          </span>
          <a
            v-if="!!currentMeeting.password"
            :href="onboardMeetingMembersLink()"
            class="ml-4 text-blue-600"
            target="_blank"
          >
            <font-awesome icon="external-link" />
          </a>
        </li>
      </ul>

      <MembersList
        :password="currentMeeting.password || ''"
        :show-organizer-tools="true"
        class="mt-4"
        @error="handleMembersError"
      />
    </div>

    <div
      v-if="currentMeeting?.projectLink"
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <!-- Project Link Section -->
      <div>
        <router-link
          :to="'/project/' + encodeURIComponent(currentMeeting.projectLink)"
          class="text-blue-600 hover:text-blue-800 transition-colors duration-200"
        >
          Go To Project Page
        </router-link>
      </div>
    </div>

    <div v-else-if="isLoading">
      <div class="flex justify-center items-center h-full">
        <font-awesome icon="spinner" class="fa-spin-pulse" />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { copyToClipboard } from "../services/ClipboardService";
import { RouteLocationNormalizedLoaded, Router } from "vue-router";

import QuickNav from "../components/QuickNav.vue";
import TopMessage from "../components/TopMessage.vue";
import MembersList from "../components/MembersList.vue";
import {
  errorStringForLog,
  getHeaders,
  serverMessageForUser,
} from "../libs/endorserServer";
import { encryptMessage } from "../libs/crypto";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { APP_SERVER } from "@/constants/app";
import {
  NOTIFY_MEETING_INVALID_TIME,
  NOTIFY_MEETING_NAME_REQUIRED,
  NOTIFY_MEETING_PASSWORD_REQUIRED,
  NOTIFY_MEETING_CREATED,
  NOTIFY_MEETING_DELETED,
  NOTIFY_MEETING_LINK_COPIED,
} from "@/constants/notifications";
interface ServerMeeting {
  groupId: number; // from the server
  name: string; // to & from the server
  expiresAt: string; // to & from the server
  userFullName?: string; // from the user's session
  password?: string; // from the user's session
  projectLink?: string; // to & from the server
}

interface MeetingSetupInputs {
  name: string;
  expiresAt: string;
  userFullName: string;
  password: string;
  projectLink: string;
}

@Component({
  components: {
    QuickNav,
    TopMessage,
    MembersList,
  },
  mixins: [PlatformServiceMixin],
})
export default class OnboardMeetingView extends Vue {
  $notify!: (
    notification: { group: string; type: string; title: string; text: string },
    timeout?: number,
  ) => void;
  $route!: RouteLocationNormalizedLoaded;
  $router!: Router;
  notify!: ReturnType<typeof createNotifyHelpers>;
  /** Production share domain for deep links */
  APP_SERVER = APP_SERVER;

  currentMeeting: ServerMeeting | null = null;
  newOrUpdatedMeetingInputs: MeetingSetupInputs | null = null;
  activeDid = "";
  apiServer = "";
  isDeleting = false;
  isLoading = true;
  isRegistered = false;
  showDeleteConfirm = false;
  fullName = "";
  get minDateTime() {
    const now = new Date();
    now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
    return this.formatDateForInput(now);
  }

  async created() {
    this.notify = createNotifyHelpers(
      this.$notify as Parameters<typeof createNotifyHelpers>[0],
    );
    const settings = await this.$accountSettings();
    this.activeDid = settings?.activeDid || "";
    this.apiServer = settings?.apiServer || "";
    this.fullName = settings?.firstName || "";
    this.isRegistered = !!settings?.isRegistered;

    await this.fetchCurrentMeeting();
    this.isLoading = false;
  }

  isInCreateMode(): boolean {
    return (
      this.newOrUpdatedMeetingInputs != null && this.currentMeeting == null
    );
  }

  isInEditOrCreateMode(): boolean {
    return this.newOrUpdatedMeetingInputs != null;
  }

  getDefaultExpirationTime(): string {
    const date = new Date();
    // Round up to the next hour
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    date.setHours(date.getHours() + 1); // Round up to next hour
    date.setHours(date.getHours() + 2); // Add 2 more hours
    return this.formatDateForInput(date);
  }

  // Format a date object to YYYY-MM-DDTHH:mm format for datetime-local input
  private formatDateForInput(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");

    return `${year}-${month}-${day}T${hours}:${minutes}`;
  }

  blankMeeting(): MeetingSetupInputs {
    return {
      // no groupId yet
      name: "",
      expiresAt: this.getDefaultExpirationTime(),
      userFullName: this.fullName,
      password: (this.currentMeeting?.password as string) || "",
      projectLink: (this.currentMeeting?.projectLink as string) || "",
    };
  }

  async fetchCurrentMeeting() {
    try {
      const headers = await getHeaders(this.activeDid);

      const response = await this.axios.get(
        this.apiServer + "/api/partner/groupOnboard",
        { headers },
      );

      const queryPassword = this.$route.query["password"] as string;

      if (response?.data?.data) {
        this.currentMeeting = {
          ...response.data.data,
          userFullName: this.fullName,
          password: this.currentMeeting?.password || queryPassword || "",
        };
      } else {
        this.newOrUpdatedMeetingInputs = this.blankMeeting();
      }
    } catch (error: unknown) {
      this.newOrUpdatedMeetingInputs = this.blankMeeting();
    }
  }

  async createMeeting() {
    this.isLoading = true;

    try {
      if (!this.newOrUpdatedMeetingInputs) {
        throw Error(
          "There was no meeting data to create. We should never get here.",
        );
      }

      // Convert local time to UTC for comparison and server submission
      const localExpiresAt = new Date(this.newOrUpdatedMeetingInputs.expiresAt);
      const now = new Date();
      if (localExpiresAt <= now) {
        this.notify.warning(NOTIFY_MEETING_INVALID_TIME.message, TIMEOUTS.LONG);
        return;
      }
      if (!this.newOrUpdatedMeetingInputs.userFullName) {
        this.notify.warning(
          NOTIFY_MEETING_NAME_REQUIRED.message,
          TIMEOUTS.LONG,
        );
        return;
      }
      if (!this.newOrUpdatedMeetingInputs.password) {
        this.notify.warning(
          NOTIFY_MEETING_PASSWORD_REQUIRED.message,
          TIMEOUTS.LONG,
        );
        return;
      }

      // create content with user's name & DID encrypted with password
      const content = {
        name: this.newOrUpdatedMeetingInputs.userFullName,
        did: this.activeDid,
        isRegistered: this.isRegistered,
      };
      const encryptedContent = await encryptMessage(
        JSON.stringify(content),
        this.newOrUpdatedMeetingInputs.password,
      );

      const headers = await getHeaders(this.activeDid);
      const response = await this.axios.post(
        this.apiServer + "/api/partner/groupOnboard",
        {
          name: this.newOrUpdatedMeetingInputs.name,
          expiresAt: localExpiresAt.toISOString(),
          content: encryptedContent,
          projectLink: this.newOrUpdatedMeetingInputs.projectLink,
        },
        { headers },
      );

      if (response.data && response.data.success) {
        this.currentMeeting = {
          ...this.newOrUpdatedMeetingInputs,
          groupId: response.data.success.groupId,
        };

        this.newOrUpdatedMeetingInputs = null;
        this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
      } else {
        throw { response: response };
      }
    } catch (error) {
      this.$logAndConsole(
        "Error creating meeting: " + errorStringForLog(error),
        true,
      );
      const errorMessage = serverMessageForUser(error);
      this.notify.error(
        errorMessage ||
          "Failed to create meeting. Try reloading or submitting again.",
        5000,
      );
    } finally {
      this.isLoading = false;
    }
  }

  formatExpirationTime(expiresAt: string): string {
    const expiration = new Date(expiresAt); // Server time is in UTC
    const now = new Date();
    const diffHours = Math.round(
      (expiration.getTime() - now.getTime()) / (1000 * 60 * 60),
    );

    if (diffHours < 0) {
      return "Expired";
    } else if (diffHours < 1) {
      return "Less than an hour";
    } else if (diffHours === 1) {
      return "1 hour";
    } else {
      return `${diffHours} hours`;
    }
  }

  confirmDelete() {
    this.showDeleteConfirm = true;
  }

  async deleteMeeting() {
    this.isDeleting = true;
    try {
      const headers = await getHeaders(this.activeDid);
      await this.axios.delete(this.apiServer + "/api/partner/groupOnboard", {
        headers,
      });

      this.currentMeeting = null;
      this.newOrUpdatedMeetingInputs = this.blankMeeting();
      this.showDeleteConfirm = false;

      this.notify.success(NOTIFY_MEETING_DELETED.message, TIMEOUTS.STANDARD);
    } catch (error) {
      this.$logError("Error deleting meeting: " + error);
      this.notify.error(
        serverMessageForUser(error) || "Failed to delete meeting.",
        TIMEOUTS.LONG,
      );
    } finally {
      this.isDeleting = false;
    }
  }

  startEditing() {
    // Populate form with existing meeting data
    if (this.currentMeeting) {
      const localExpiresAt = new Date(this.currentMeeting.expiresAt);
      this.newOrUpdatedMeetingInputs = {
        name: this.currentMeeting.name,
        expiresAt: this.formatDateForInput(localExpiresAt),
        userFullName: this.currentMeeting.userFullName || "",
        password: this.currentMeeting.password || "",
        projectLink: this.currentMeeting.projectLink || "",
      };
    } else {
      this.$logError(
        "There is no current meeting to edit. We should never get here.",
      );
    }
  }

  cancelEditing() {
    // Reset form data
    this.newOrUpdatedMeetingInputs = null;
  }

  async updateMeeting() {
    this.isLoading = true;
    if (!this.newOrUpdatedMeetingInputs) {
      throw Error("There was no meeting data to update.");
    }

    try {
      // Convert local time to UTC for comparison and server submission
      const localExpiresAt = new Date(this.newOrUpdatedMeetingInputs.expiresAt);
      const now = new Date();
      if (localExpiresAt <= now) {
        this.notify.warning(NOTIFY_MEETING_INVALID_TIME.message, TIMEOUTS.LONG);
        return;
      }
      if (!this.newOrUpdatedMeetingInputs.userFullName) {
        this.notify.warning(
          NOTIFY_MEETING_NAME_REQUIRED.message,
          TIMEOUTS.LONG,
        );
        return;
      }
      if (!this.newOrUpdatedMeetingInputs.password) {
        this.notify.warning(
          NOTIFY_MEETING_PASSWORD_REQUIRED.message,
          TIMEOUTS.LONG,
        );
        return;
      }
      // create content with user's name & DID encrypted with password
      const content = {
        name: this.newOrUpdatedMeetingInputs.userFullName,
        did: this.activeDid,
        isRegistered: this.isRegistered,
      };
      const encryptedContent = await encryptMessage(
        JSON.stringify(content),
        this.newOrUpdatedMeetingInputs.password,
      );

      const headers = await getHeaders(this.activeDid);
      const response = await this.axios.put(
        this.apiServer + "/api/partner/groupOnboard",
        {
          // the groupId is in the currentMeeting but it's not necessary while users only have one meeting
          name: this.newOrUpdatedMeetingInputs.name,
          expiresAt: localExpiresAt.toISOString(),
          content: encryptedContent,
          projectLink: this.newOrUpdatedMeetingInputs.projectLink,
        },
        { headers },
      );

      if (response.data && response.data.success) {
        // Update the current meeting with only the necessary fields
        this.currentMeeting = {
          ...this.newOrUpdatedMeetingInputs,
          groupId: (this.currentMeeting?.groupId as number) || -1,
        };
        this.newOrUpdatedMeetingInputs = null;

        if (this.currentMeeting?.password) {
          this.$router.push({
            name: "onboard-meeting-setup",
            query: { password: this.currentMeeting?.password },
          });
        }
      } else {
        throw { response: response };
      }
    } catch (error) {
      this.$logAndConsole(
        "Error updating meeting: " + errorStringForLog(error),
        true,
      );
      const errorMessage = serverMessageForUser(error);
      this.notify.error(
        errorMessage ||
          "Failed to update meeting. Try reloading or submitting again.",
        TIMEOUTS.LONG,
      );
    } finally {
      this.isLoading = false;
    }
  }

  onboardMeetingMembersLink(): string {
    if (this.currentMeeting) {
      // Use production URL for sharing to avoid localhost issues in development
      return `${APP_SERVER}/deep-link/onboard-meeting-members/${this.currentMeeting?.groupId}?password=${encodeURIComponent(
        this.currentMeeting?.password || "",
      )}`;
    }
    return "";
  }

  handleMembersError(message: string) {
    this.notify.error(message, TIMEOUTS.LONG);
  }

  async copyMembersLinkToClipboard() {
    try {
      await copyToClipboard(this.onboardMeetingMembersLink());
      this.notify.info(NOTIFY_MEETING_LINK_COPIED.message, TIMEOUTS.LONG);
    } catch (error) {
      this.$logAndConsole(
        `Error copying meeting link to clipboard: ${error}`,
        true,
      );
      this.notify.error("Failed to copy meeting link to clipboard.");
    }
  }
}
</script>
