<template>
  <ModalContainer />
  <header
    id="header_inside_maincontainer"
    class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10"
  >
    <Header />
    <Navbar />
  </header>
  <main id="loading_and_router_view_container_in_maincontainer" class="w-full">
    <Loading v-if="loadingStore.isLoading" />
    <router-view></router-view>
  </main>
</template>

<script setup lang="ts">
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module views/MainContainer Main application layout with
 *   header, navbar, and router view. Handles unsaved-changes
 *   confirmation via onBeforeRouteUpdate.
 */

import { onBeforeMount } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import { useLoadingStore } from "@/stores/loading";
import { usePageAdminStore } from "@/stores/pageAdmin";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useConformanceStore } from "@/stores/conformance";
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
import emitter from "@/utils/emitter";
import Header from "@/components/AppHeader.vue";
import Navbar from "@/components/AppNavbar.vue";
import Loading from "@/components/LoadingOverlay.vue";
import ModalContainer from "./AccountManagement/ModalContainer.vue";

const loadingStore = useLoadingStore();
const pageAdminStore = usePageAdminStore();
const allMapDataStore = useAllMapDataStore();
const conformanceStore = useConformanceStore();
const router = useRouter();

/** Sets the highlighted navbar item based on the current URL path on page load. */
const setHighlightedNavItemOnLanding = () => {
  const currentPath = router.currentRoute.value.path;
  const pathSegments = currentPath
    .split("/")
    .filter((segment) => segment !== "");
  if (pathSegments.length === 1) {
    if (pathSegments[0] === "files") {
      pageAdminStore.setActivePage("ALL");
    }
  } else if (pathSegments.length > 1) {
    pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
  }
};

onBeforeMount(() => {
  setHighlightedNavItemOnLanding();
});

// Handles unsaved-changes confirmation when navigating between routes
onBeforeRouteUpdate(async (to, from) => {
  pageAdminStore.setPreviousPage(from.name);

  // When leaving the Map page, check if there is unsaved data
  if (
    (from.name === "Map" || from.name === "CheckMap") &&
    allMapDataStore.tempFilterId
  ) {
    // Notify the Map's Sidebar to close
    emitter.emit("leaveFilter", false);
    let blocked = false;
    await leaveFilter(
      (value) => { if (value === false) blocked = true; },
      allMapDataStore.addFilterId,
      to.path,
    );
    if (blocked) return false;
  } else if (
    (from.name === "Conformance" || from.name === "CheckConformance") &&
    (conformanceStore.conformanceLogTempCheckId ||
      conformanceStore.conformanceFilterTempCheckId)
  ) {
    let blocked = false;
    await leaveConformance(
      (value) => { if (value === false) blocked = true; },
      conformanceStore.addConformanceCreateCheckId,
      to.path,
    );
    if (blocked) return false;
  } else if (pageAdminStore.shouldKeepPreviousPage) {
    pageAdminStore.clearShouldKeepPreviousPageBoolean();
  } else {
    pageAdminStore.copyPendingPageToActivePage();
  }
});
</script>
