"use client";

import { HomeIcon } from "@/components/icons/dashboard";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { AuthorizedAction } from "@/components/auth/authorized-action";
import type { ActionSpec } from "@/lib/rbac/action-access";
import { cn } from "@/lib/utils";
import { ReactNode } from "react";

interface BreadcrumbItemType {
  label: string;
  href?: string;
}

interface ActionButton extends ActionSpec {
  label: string;
  icon?: ReactNode;
  onClick?: () => void;
  href?: string;
  variant?:
    | "default"
    | "outline"
    | "secondary"
    | "ghost"
    | "link"
    | "destructive";
  disabled?: boolean;
  // Backward compatible aliases
  requiredPermissions?: string[];
  permissionRequire?: "any" | "all";
  permissionMode?: "hide" | "disable";
  unauthorizedMessage?: string;
}

interface PageHeaderProps {
  title: string;
  description?: string;
  breadcrumbs: BreadcrumbItemType[];
  action?: ActionButton;
  actions?: ActionButton[] | ReactNode;
}

export function PageHeader({
  title,
  description,
  breadcrumbs,
  action,
  actions,
}: PageHeaderProps) {
  // Handle both array of actions and ReactNode
  const renderActions = () => {
    if (!actions && !action) return null;

    // If actions is a ReactNode (not an array)
    if (actions && !Array.isArray(actions)) {
      return <div className="w-full lg:w-auto lg:shrink-0">{actions}</div>;
    }

    // Combine single action and multiple actions for backward compatibility
    const allActions = (actions as ActionButton[]) || (action ? [action] : []);

    if (allActions.length === 0) return null;
    const hasMultipleActions = allActions.length > 1;

    return (
      <div
        className={cn(
          "w-full shrink-0",
          hasMultipleActions
            ? "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:flex lg:flex-wrap lg:items-center lg:justify-end"
            : "flex justify-stretch",
          "sm:justify-end lg:w-auto",
        )}
      >
        {allActions.map((actionItem, index) => {
          const isDisabled = !!actionItem.disabled;

          return (
            <AuthorizedAction
              key={index}
              surface="page"
              action={{
                actionKey: actionItem.actionKey,
                permissions: actionItem.permissions || actionItem.requiredPermissions,
                require: actionItem.require || actionItem.permissionRequire,
                mode: actionItem.mode || actionItem.permissionMode,
                message: actionItem.message || actionItem.unauthorizedMessage,
                roleAliases: actionItem.roleAliases,
              }}
            >
              <Button
                variant={actionItem.variant || "default"}
                className={cn(
                  "h-9 lg:h-10 gap-1.5 text-sm px-3 lg:px-4 justify-center whitespace-nowrap",
                  hasMultipleActions
                    ? "w-full lg:w-auto lg:min-w-0 lg:shrink-0"
                    : "sm:min-w-[140px]",
                )}
                onClick={actionItem.onClick}
                disabled={isDisabled}
                asChild={!!actionItem.href}
              >
                {actionItem.href ? (
                  <Link href={actionItem.href}>
                    {actionItem.icon}
                    <span className="truncate">{actionItem.label}</span>
                  </Link>
                ) : (
                  <>
                    {actionItem.icon}
                    <span className="truncate">{actionItem.label}</span>
                  </>
                )}
              </Button>
            </AuthorizedAction>
          );
        })}
      </div>
    );
  };

  return (
    <div className=" w-full max-w-full overflow-hidden  bg-transparent">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        {/* Breadcrumb and Title */}
        <div className="flex min-w-0 flex-col gap-2.5 lg:gap-3">
          <h1 className="text-base sm:text-lg lg:text-base font-semibold text-primary line-clamp-2 lg:line-clamp-1">
            {title}
          </h1>
          {description ? (
            <p className="max-w-3xl text-sm text-muted-foreground line-clamp-2">
              {description}
            </p>
          ) : null}

          <Breadcrumb className="rounded-xl border border-border/70 bg-background/60 px-3 py-2 sm:rounded-none sm:border-0 sm:bg-transparent sm:px-0 sm:py-0">
            <BreadcrumbList className="flex-wrap gap-1.5 sm:gap-1">
              {/* Home breadcrumb - always first */}
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link href="/" className="flex items-center gap-1.5 lg:gap-2">
                    <HomeIcon className="h-3.5 w-3.5 shrink-0 lg:h-4 lg:w-4" />
                    <span className="text-xs sm:text-sm">
                      {breadcrumbs[0]?.label}
                    </span>
                  </Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              {/* Rest of breadcrumbs */}
              {breadcrumbs.slice(1).map((item, index) => (
                <div key={index} className="flex items-center gap-1 sm:gap-1.5 lg:gap-2">
                  <BreadcrumbSeparator />
                  <BreadcrumbItem>
                    {item.href ? (
                      <BreadcrumbLink asChild>
                        <Link
                          href={item.href}
                          className="text-xs sm:text-sm font-bold line-clamp-1"
                        >
                          {item.label}
                        </Link>
                      </BreadcrumbLink>
                    ) : (
                      <BreadcrumbPage className="text-xs sm:text-sm font-bold line-clamp-1">
                        {item.label}
                      </BreadcrumbPage>
                    )}
                  </BreadcrumbItem>
                </div>
              ))}
            </BreadcrumbList>
          </Breadcrumb>
        </div>

        {/* Action Buttons */}
        <div className="w-full min-w-0 lg:w-auto lg:shrink-0">
          {renderActions()}
        </div>
      </div>
    </div>
  );
}