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

  type Crumb = { label: string; href: string; current: boolean };

  function buildCrumbs(
    routeId: string | null,
    pathname: string,
    data: Record<string, unknown>,
    searchParams: URLSearchParams,
  ): Crumb[] {
    if (!routeId || routeId.startsWith("/(auth)")) return [];

    switch (routeId) {
      case "/":
        return [];
      case "/companies":
        return [{ label: "Companies", href: "/companies", current: true }];
      case "/companies/[id]":
        return [
          { label: "Companies", href: "/companies", current: false },
          {
            label: (data.company as { name?: string })?.name ?? "Company",
            href: pathname,
            current: true,
          },
        ];
      case "/procurement":
        return [{ label: "Procurement", href: "/procurement", current: true }];
      case "/procurement/catalog":
        return [
          { label: "Procurement", href: "/procurement", current: false },
          { label: "Catalog", href: "/procurement/catalog", current: true },
        ];
      case "/sales": {
        const tab = (data.tab as string) ?? "dashboard";
        if (tab === "opportunities") {
          return [
            { label: "Sales", href: "/sales", current: false },
            { label: "Opportunities", href: "/sales?tab=opportunities", current: true },
          ];
        }
        return [{ label: "Sales", href: "/sales", current: true }];
      }
      case "/sales/opportunity/[id]": {
        const from = searchParams.get("from");
        const oppName = (data.opportunity as { name?: string })?.name ?? "Opportunity";
        if (from === "dashboard") {
          return [
            { label: "Sales", href: "/sales", current: false },
            { label: "My Dashboard", href: "/sales?tab=dashboard", current: false },
            { label: oppName, href: pathname, current: true },
          ];
        }
        return [
          { label: "Sales", href: "/sales", current: false },
          { label: "All Opportunities", href: "/sales?tab=opportunities", current: false },
          { label: oppName, href: pathname, current: true },
        ];
      }
      case "/admin":
        return [{ label: "Admin", href: "/admin", current: true }];
      case "/admin/users":
        return [
          { label: "Admin", href: "/admin", current: false },
          { label: "Users", href: "/admin/users", current: true },
        ];
      case "/admin/roles":
        return [
          { label: "Admin", href: "/admin", current: false },
          { label: "Roles", href: "/admin/roles", current: true },
        ];
      case "/admin/credential-types":
        return [
          { label: "Admin", href: "/admin", current: false },
          {
            label: "Credential Types",
            href: "/admin/credential-types",
            current: true,
          },
        ];
      case "/admin/reports":
        return [
          { label: "Admin", href: "/admin", current: false },
          { label: "Reports", href: "/admin/reports", current: true },
        ];
      default:
        return [];
    }
  }

  $: crumbs = buildCrumbs(
    $page.route.id,
    $page.url.pathname,
    $page.data as Record<string, unknown>,
    $page.url.searchParams,
  );
</script>

{#if crumbs.length > 0}
  <nav class="breadcrumb" aria-label="Breadcrumb">
    {#each crumbs as crumb, i}
      {#if i > 0}
        <svg class="breadcrumb-sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <polyline points="9 18 15 12 9 6" />
        </svg>
      {/if}
      {#if crumb.current}
        <span class="breadcrumb-current" aria-current="page">{crumb.label}</span>
      {:else}
        <a href={crumb.href} class="breadcrumb-link">{crumb.label}</a>
      {/if}
    {/each}
  </nav>
{/if}
