"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import { Fragment } from "react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Home } from "lucide-react";

const labelMap: Record<string, string> = {
  dashboard: "Dashboard",
  properties: "Properties",
  companies: "Companies",
  blog: "Blog",
  magazine: "Magazine",
  advertising: "Advertising",
  settings: "Settings",
  users: "Users",
  roles: "Roles & Permissions",
  analytics: "Analytics",
  notifications: "Notifications",
  categories: "Categories",
  create: "Create",
  edit: "Edit",
  issues: "Issues",
  articles: "Articles",
  subscriptions: "Subscriptions",
  zones: "Ad Zones",
  ads: "Advertisements",
};

function formatSegment(segment: string): string {
  // Check label map first
  if (labelMap[segment]) return labelMap[segment];

  // If it looks like a slug (contains hyphens), format it nicely
  if (segment.includes("-")) {
    return segment
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ");
  }

  // Default: capitalize first letter
  return segment.charAt(0).toUpperCase() + segment.slice(1);
}

export function DashboardBreadcrumb() {
  const pathname = usePathname();
  const segments = pathname.split("/").filter(Boolean);

  // Remove "dashboard" from display but keep in href building
  const displaySegments = segments.slice(1); // skip "dashboard"

  if (displaySegments.length === 0) {
    return (
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbPage className="flex items-center gap-1.5 text-xs sm:text-sm">
              <Home className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Dashboard</span>
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    );
  }

  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/dashboard" className="flex items-center gap-1.5">
              <Home className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Dashboard</span>
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>

        {displaySegments.map((segment, index) => {
          const href = "/dashboard/" + displaySegments.slice(0, index + 1).join("/");
          const isLast = index === displaySegments.length - 1;
          const label = formatSegment(segment);

          return (
            <Fragment key={href}>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                {isLast ? (
                  <BreadcrumbPage className="max-w-32 truncate text-xs sm:max-w-none sm:text-sm">
                    {label}
                  </BreadcrumbPage>
                ) : (
                  <BreadcrumbLink asChild>
                    <Link href={href} className="text-xs sm:text-sm">
                      {label}
                    </Link>
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
            </Fragment>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}