"use client";

import {
  DashboardBreadcrumbAction,
  DashboardBreadcrumbItem,
  useDashboardBreadcrumbState,
} from "@/components/dashboard/breadcrumb-config";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Link, usePathname } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { ChevronLeft, Eye, Home, Plus } from "lucide-react";
import { usePermissions } from "@/hooks/use-permissions";
import { useTranslations } from "next-intl";
import * as React from "react";

interface PageBreadcrumbProps {
  title?: string;
  customBreadcrumbs?: DashboardBreadcrumbItem[];
  showAddButton?: boolean;
}

export function PageBreadcrumb({
  title,
  customBreadcrumbs,
  showAddButton = false,
}: PageBreadcrumbProps) {
  const t = useTranslations("dashboard.breadcrumb");
  const pathname = usePathname();
  const { state: breadcrumbState } = useDashboardBreadcrumbState();
  const { ready, canKey } = usePermissions();

  const breadcrumbs = React.useMemo(() => {
    const configuredBreadcrumbs = customBreadcrumbs || breadcrumbState?.breadcrumbs;

    if (configuredBreadcrumbs?.length) {
      return configuredBreadcrumbs;
    }

    const normalizedPath = pathname.replace(/^\/(ar|en)(?=\/|$)/, "");
    const segments = normalizedPath.split("/").filter(Boolean);
    const items: DashboardBreadcrumbItem[] = [
      { title: t("home"), href: "/dashboard" },
    ];

    segments.forEach((segment, index) => {
      if (segment === "dashboard") return;

      const href = "/" + segments.slice(0, index + 1).join("/");
      items.push({
        title: getSegmentTitle(segment, t),
        href,
      });
    });

    return items;
  }, [pathname, customBreadcrumbs, breadcrumbState?.breadcrumbs, t]);

  const pageTitle =
    title ||
    breadcrumbState?.title ||
    breadcrumbs[breadcrumbs.length - 1]?.title ||
    t("pageName");

  const actionConfigs: DashboardBreadcrumbAction[] =
    breadcrumbState?.actions?.length
      ? breadcrumbState.actions
      : breadcrumbState?.action
        ? [breadcrumbState.action]
        : showAddButton
          ? [
              {
                label: `${t("add")} ${pageTitle}`,
                href: `${pathname}/add`,
                icon: "plus",
                style: "solid",
              },
            ]
          : [];

  if (breadcrumbState?.hidden) {
    return null;
  }

  return (
    <div className="flex h-20 items-center justify-between border-b border-border bg-card px-6">
      <div className="flex flex-col  gap-3 ">
        <h1 className="text-base font-bold leading-none text-foreground">{pageTitle}</h1>

        <Breadcrumb>
          <BreadcrumbList>
            {breadcrumbs.map((crumb, index) => {
              const isLast = index === breadcrumbs.length - 1;
              const crumbKey = `${crumb.href || crumb.title}-${index}`;

              return (
                <React.Fragment key={crumbKey}>
                  <BreadcrumbItem>
                    {isLast ? (
                      <BreadcrumbPage className="text-xs font-bold text-secondary">
                        {crumb.title}
                      </BreadcrumbPage>
                    ) : (
                      <BreadcrumbLink
                        asChild
                        className="flex items-center gap-2 text-xs text-muted-foreground"
                      >
                        <Link href={crumb.href || "/dashboard"}>
                          {index === 0 && <Home className="h-4 w-4" />}
                          {crumb.title}
                        </Link>
                      </BreadcrumbLink>
                    )}
                  </BreadcrumbItem>
                  {!isLast && (
                    <BreadcrumbSeparator>
                      <ChevronLeft className="h-4 w-4 text-muted-foreground" />
                    </BreadcrumbSeparator>
                  )}
                </React.Fragment>
              );
            })}
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        {actionConfigs
          .filter((action) => !action.permission || (ready && canKey(action.permission)))
          .map((action, index) => (
          <BreadcrumbActionButton
            key={`${action.label}-${action.href || action.formId || index}`}
            action={action}
          />
        ))}
      </div>
    </div>
  );
}

function BreadcrumbActionButton({ action }: { action: DashboardBreadcrumbAction }) {
  const Icon = action.icon === "eye" ? Eye : action.icon === "plus" ? Plus : null;

  const className = cn(
    "h-12 rounded-xl px-5 text-sm font-bold tracking-[-0.084px]",
    Icon && "gap-2",
    action.style === "outline"
      ? "border border-primary bg-transparent text-primary hover:bg-primary-50/70"
      : "bg-primary text-white hover:bg-primary/90"
  );

  if (action.href) {
    return (
      <Button asChild variant="ghost" size="xl" className={className}>
        <Link href={action.href}>
          <span>{action.label}</span>
          {Icon ? <Icon className="h-5 w-5" /> : null}
        </Link>
      </Button>
    );
  }

  return (
    <Button
      type={action.buttonType || "button"}
      form={action.formId}
      variant="ghost"
      size="xl"
      className={className}
      onClick={action.onClick}
    >
      <span>{action.label}</span>
      {Icon ? <Icon className="h-5 w-5" /> : null}
    </Button>
  );
}

function getSegmentTitle(segment: string, t: (key: string) => string): string {
  const keyMap: Record<string, string> = {
    blog: "blog",
    blogs: "blog",
    users: "users",
    settings: "settings",
    profile: "profile",
    appearance: "appearance",
    pages: "pages",
    tickets: "tickets",
    lifi: "lifi",
    all: "all",
    new: "new",
    add: "new",
    create: "new",
    categories: "categories",
    roles: "roles",
    general: "general",
    email: "email",
    security: "security",
    site: "site",
    company: "company",
    control: "control",
    communication: "communication",
    maintenance: "maintenance",
    external: "external",
    preview: "preview",
    widgets: "widgets",
    menu: "menu",
    "custom-css": "customCss",
    "custom-js": "customJs",
    "custom-html": "customHtml",
    "robots-text-editor": "robotsTextEditor",
    colors: "colors",
    fonts: "fonts",
    logo: "logo",
    dashboard: "dashboard",
  };

  const key = keyMap[segment];
  return key ? t(key) : segment;
}