<script lang="ts">
  import { stockTicker } from "$lib/store";
  import { page } from "$app/stores";

  export let data;

  const names = data?.getBusinessMetrics?.revenue?.names || [];
  const subsectionTitles = ["Overview", ...names];

  const sectionMap = Object.fromEntries(
    subsectionTitles?.map((title) => {
      const key = title
        ?.toLowerCase()
        ?.replace(/&/g, "") // Remove & symbol
        ?.replace(/\s+/g, "-") // Replace spaces with dash
        ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
        ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
        ?.trim();
      return [key, key === "overview" ? "" : key];
    }),
  );

  let displaySubSection = "overview";

  function changeSubSection(state) {
    displaySubSection = state;
    const path =
      state === "overview" ? "/metrics" : `/metrics/${sectionMap[state]}`;
    // Navigate programmatically using SvelteKit's goto function
  }

  function getHref(section) {
    const path =
      section === "overview" ? "/metrics" : `/metrics/${sectionMap[section]}`;
    return `/stocks/${$stockTicker}${path}`;
  }

  $: {
    if ($page?.url?.pathname) {
      const parts = $page.url.pathname.split("/");

      // Filter out empty strings from URL parts and look for the section
      const foundSection = parts.find(
        (part) => part && Object.values(sectionMap).includes(part),
      );

      // If a valid section is found in the URL, update the displaySubSection
      displaySubSection =
        Object.keys(sectionMap).find(
          (key) => sectionMap[key] === foundSection,
        ) || "overview";
    }
  }
</script>

<!-- Rest of the component remains the same -->

<section class="w-full bg-default overflow-hidden h-full">
  <div class="m-auto h-full overflow-hidden">
    <main class="w-full">
      <div class="m-auto">
        {#if names?.length > 0}
          <nav
            class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
          >
            <ul class="flex flex-row items-center w-full text-white">
              {#each subsectionTitles as title}
                {@const sectionKey = title
                  ?.toLowerCase()
                  ?.replace(/&/g, "") // Remove & symbol
                  ?.replace(/\s+/g, "-") // Replace spaces with dash
                  ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
                  ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
                  ?.trim()}
                <a
                  href={getHref(sectionKey)}
                  on:click={() => changeSubSection(sectionKey)}
                  class="p-2 px-5 cursor-pointer {displaySubSection ===
                  sectionKey
                    ? 'text-white bg-primary/90'
                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
                >
                  {title}
                </a>
              {/each}
            </ul>
          </nav>
        {/if}
      </div>
    </main>

    <slot />
  </div>
</section>

<style>
  .scrollbar {
    display: grid;
    grid-gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    grid-auto-flow: column;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
  }
</style>
