"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight } from "lucide-react";

const labels: Record<string, string> = {
  admin: "Admin",
  applications: "Applications",
  members: "Members",
  blog: "Blog",
  academy: "Academy",
  research: "Research",
  store: "Store",
  team: "Team",
  notifications: "Notifications",
};

function prettySegment(segment: string): string {
  if (labels[segment]) return labels[segment];
  if (/^[0-9a-f-]{8,}$/i.test(segment)) return "Detail";
  return segment
    .split("-")
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
    .join(" ");
}

export function AdminBreadcrumb() {
  const pathname = usePathname();
  const parts = pathname.split("/").filter(Boolean);
  if (parts.length <= 1) return null;

  const crumbs = parts.map((segment, index) => {
    const href = "/" + parts.slice(0, index + 1).join("/");
    return { href, label: prettySegment(segment), isLast: index === parts.length - 1 };
  });

  return (
    <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-[12px] text-[var(--color-slate)]">
      {crumbs.map((c, i) => (
        <div key={c.href} className="flex items-center gap-1.5">
          {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-[var(--color-slate)]/60" aria-hidden />}
          {c.isLast ? (
            <span className="font-semibold text-[var(--color-ink)]">{c.label}</span>
          ) : (
            <Link
              href={c.href}
              className="transition-colors hover:text-[var(--color-blue)]"
            >
              {c.label}
            </Link>
          )}
        </div>
      ))}
    </nav>
  );
}
