lotteryAdmin/src/components/admin/admin-breadcrumb.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { adminNavLabel } from "@/lib/admin-nav-label";
import { ADMIN_BASE } from "@/modules/_config/admin-nav";
import { useAdminProfile } from "@/stores/admin-session";
import React from "react";

const DRAW_ROUTE_LABELS: Record<string, string> = {
  finance: "Draw Finance",
  review: "Review",
  results: "Results",
};

const RULES_ROUTE_LABELS: Record<string, string> = {
  plays: "nav.items.plays",
  odds: "nav.rulesOddsTitle",
};

const RISK_ROUTE_LABELS: Record<string, string> = {
  cap: "nav.riskCapTitle",
};

const SETTINGS_ROUTE_LABELS: Record<string, string> = {
  currencies: "currencies.title",
};

const CONFIG_ROUTE_LABELS: Record<string, string> = {
  "integration-sites": "integrationSites.title",
  plays: "nav.items.plays",
  odds: "nav.items.odds",
  rebate: "nav.items.rebate",
  jackpot: "nav.items.jackpot",
  "risk-cap": "nav.items.risk-cap",
  wallet: "wallet.title",
};

function titleCase(value: string): string {
  return value
    .split("-")
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}

type BreadcrumbCrumb = {
  label: string;
  href: string;
  isCurrent: boolean;
};

export function AdminBreadcrumb() {
  const { t } = useTranslation(["common", "dashboard", "audit", "config", "draws", "reports"]);
  const pathname = usePathname();
  const profile = useAdminProfile();
  const navItems = profile?.navigation ?? [];

  // Split the current path into segments.
  const segments = pathname.split("/").filter(Boolean);

  // Base breadcrumb: home / dashboard.
  const breadcrumbs: BreadcrumbCrumb[] = [
    {
      label: t("nav.home", { ns: "common" }),
      href: ADMIN_BASE,
      isCurrent: pathname === ADMIN_BASE,
    },
  ];

  if (pathname !== ADMIN_BASE) {
    const businessSegment = segments[1];
    if (businessSegment) {
      const navItem = navItems
        .filter(
          (item) =>
            pathname === item.href ||
            pathname.startsWith(`${item.href}/`) ||
            (item.activeMatchPrefix != null &&
              (pathname === item.activeMatchPrefix ||
                pathname.startsWith(`${item.activeMatchPrefix}/`))),
        )
        .sort((a, b) => b.href.length - a.href.length)[0];

      if (navItem && navItem.href !== ADMIN_BASE) {
        const translatedNavLabel = adminNavLabel(navItem.segment, t, navItem.label);
        breadcrumbs.push({
          label: translatedNavLabel,
          href: navItem.href,
          isCurrent: pathname === navItem.href || segments.length === 2,
        });
      } else {
        breadcrumbs.push({
          label: t(`nav.${businessSegment}`, {
            ns: "common",
            defaultValue: titleCase(businessSegment),
          }),
          href: `${ADMIN_BASE}/${businessSegment}`,
          isCurrent: segments.length === 2,
        });
      }

      const navCoversPath =
        navItem != null &&
        (pathname === navItem.href || pathname.startsWith(`${navItem.href}/`));

      if (segments.length > 2 && !navCoversPath) {
        const subSegment = segments[2];
        let subLabel = "";
        if (businessSegment === "rules" && subSegment) {
          const key = RULES_ROUTE_LABELS[subSegment];
          subLabel = key
            ? t(key, { ns: "config", defaultValue: titleCase(subSegment) })
            : titleCase(subSegment);
        } else if (businessSegment === "risk" && subSegment) {
          const key = RISK_ROUTE_LABELS[subSegment];
          subLabel = key
            ? t(key, { ns: "config", defaultValue: titleCase(subSegment) })
            : titleCase(subSegment);
        } else if (businessSegment === "settings" && subSegment) {
          subLabel = t(SETTINGS_ROUTE_LABELS[subSegment] ?? `settings.${subSegment}`, {
            ns: "config",
            defaultValue: titleCase(subSegment),
          });
        } else if (businessSegment === "config" && subSegment) {
          const key = CONFIG_ROUTE_LABELS[subSegment];
          subLabel = key
            ? t(key, { ns: "config", defaultValue: titleCase(subSegment) })
            : titleCase(subSegment);
        } else {
          subLabel = subSegment
            ? t(`subnav.${subSegment}`, {
                ns: "draws",
                defaultValue: DRAW_ROUTE_LABELS[subSegment] ?? titleCase(subSegment),
              })
            : "";
        }
        if (subLabel) {
          breadcrumbs.push({
            label: subLabel,
            href: pathname,
            isCurrent: true,
          });
        }
      }
    }
  }

  return (
    <Breadcrumb>
      <BreadcrumbList className="gap-1">
        {breadcrumbs.map((crumb, index) => {
          const isLast = index === breadcrumbs.length - 1;
          const itemKey = `${crumb.href}-${index}`;

          return (
            <React.Fragment key={itemKey}>
              <BreadcrumbItem>
                {crumb.isCurrent ? (
                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
                ) : (
                  <BreadcrumbLink render={<Link href={crumb.href} />}>{crumb.label}</BreadcrumbLink>
                )}
              </BreadcrumbItem>
              {!isLast && <BreadcrumbSeparator />}
            </React.Fragment>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}