<script setup>
import { computed, watch } from "vue";
import { useRoute } from "vue-router";
import {
  companyBreadcrumbSegments,
  clearCompanyBreadcrumb,
} from "../composables/useCompanyBreadcrumb.js";
import {
  projectBreadcrumbSegments,
  clearProjectBreadcrumb,
} from "../composables/useProjectBreadcrumb.js";
import { getBreadcrumbForRoute } from "../composables/layout/menu.js";
import { useNavigation } from "../composables/useNavigation.js";

const route = useRoute();
const { menu } = useNavigation();

/** Only use company/project breadcrumbs on scoped routes; otherwise they would stick on other pages. */
const isCompanyRoute = computed(() => /^\/companies\/[^/]+/.test(route.path));
const isProjectRoute = computed(() =>
  /^\/companies\/[^/]+\/projects\/[^/]+/.test(route.path),
);

watch(
  () => route.path,
  (path) => {
    if (
      !/^\/companies\/[^/]+/.test(path) &&
      companyBreadcrumbSegments.value?.length
    ) {
      clearCompanyBreadcrumb();
    }
    if (!/^\/companies\/[^/]+\/projects\/[^/]+/.test(path)) {
      if (projectBreadcrumbSegments.value?.length) {
        clearProjectBreadcrumb();
      }
    }
  },
);

/** Breadcrumb segments: { label, to? }. Last segment has no `to` (current page, not clickable). */
const breadcrumbSegments = computed(() => {
  if (isProjectRoute.value && projectBreadcrumbSegments.value?.length) {
    return projectBreadcrumbSegments.value;
  }
  if (isCompanyRoute.value && companyBreadcrumbSegments.value?.length) {
    return companyBreadcrumbSegments.value;
  }

  const meta = route.meta?.breadcrumb;

  if (meta?.label !== undefined) {
    if (meta.parent) {
      return [
        { label: meta.parent.label, to: meta.parent.to },
        { label: meta.label },
      ];
    }
    return [{ label: meta.label }];
  }
  if (Array.isArray(meta) && meta.length) {
    return meta.map((label) => ({ label }));
  }

  const fromMenu = getBreadcrumbForRoute(menu.value, route.path);
  if (fromMenu?.length) return fromMenu;

  const labels = route.fullPath
    .split("/")
    .filter(Boolean)
    .filter((segment) => isNaN(Number(segment)))
    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1));
  return labels.map((label) => ({ label }));
});
</script>

<template>
  <nav class="layout-breadcrumb">
    <ol>
      <template
        v-for="(seg, i) in breadcrumbSegments"
        :key="seg.label + '_' + i"
      >
        <li class="text-surface-950 dark:text-surface-0 title-h7 text-xl">
          <router-link
            v-if="
              seg.to != null &&
              seg.to !== '' &&
              i !== breadcrumbSegments.length - 1
            "
            :to="seg.to"
            class="hover:underline hover:opacity-90"
          >
            {{ seg.label }}
          </router-link>
          <span v-else>{{ seg.label }}</span>
        </li>
        <li
          v-if="i !== breadcrumbSegments.length - 1"
          class="layout-breadcrumb-chevron"
        >
          /
        </li>
      </template>
    </ol>
  </nav>
</template>
