import type { ReactNode } from "react";
import { Tabs, type TabsProps } from "./Tabs";
import "./pageHeader.css";

export type PageHeaderBreadcrumb = {
  label: string;
  href?: string;
  current?: boolean;
  icon?: ReactNode;
};

export type PageHeaderAction = {
  label: string;
  ariaLabel?: string;
  disabled?: boolean;
  href?: string;
  onClick?: () => void;
};

export type PageHeaderTabs = Pick<
  TabsProps,
  "activeIndex" | "ariaLabel" | "defaultActiveIndex" | "items" | "onActiveIndexChange"
>;

export type PageHeaderProps = {
  actions?: PageHeaderAction[] | false;
  breadcrumbLabel?: string;
  breadcrumbs?: PageHeaderBreadcrumb[] | false;
  className?: string;
  description?: string;
  dir?: "ltr" | "rtl";
  icon?: ReactNode | false;
  metaInfo?: string;
  tabs?: PageHeaderTabs | false;
  title?: string;
};

function classes(...names: Array<string | false | undefined>) {
  return names.filter(Boolean).join(" ");
}

function HomeIcon() {
  return (
    <svg aria-hidden="true" className="ds-page-header__home-icon" fill="none" viewBox="0 0 24 24">
      <path
        d="M3.75 10.5 12 3.75l8.25 6.75v8.25a1.5 1.5 0 0 1-1.5 1.5H15v-6h-6v6H5.25a1.5 1.5 0 0 1-1.5-1.5V10.5Z"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.8"
      />
    </svg>
  );
}

function Breadcrumbs({ items, label }: { items: PageHeaderBreadcrumb[]; label?: string }) {
  return (
    <nav aria-label={label} className="ds-page-header__breadcrumbs" data-node-id="1134:39921">
      <ol>
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          const isCurrent = item.current === true;
          const content = (
            <>
              {item.icon && <span className="ds-page-header__breadcrumb-icon">{item.icon}</span>}
              <span className="ds-page-header__breadcrumb-label">{item.label}</span>
            </>
          );

          return (
            <li key={`${item.label}-${index}`}>
              {item.href && !isCurrent ? (
                <a href={item.href}>{content}</a>
              ) : (
                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
                  {content}
                </span>
              )}
              {!isLast && (
                <span aria-hidden="true" className="ds-page-header__breadcrumb-separator">
                  /
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

function Action({ action }: { action: PageHeaderAction }) {
  const className = "ds-page-header__action";
  const label = <span>{action.label}</span>;

  if (action.href) {
    return (
      <a aria-label={action.ariaLabel} className={className} href={action.href}>
        {label}
      </a>
    );
  }

  return (
    <button
      aria-label={action.ariaLabel}
      className={className}
      disabled={action.disabled}
      onClick={action.onClick}
      type="button"
    >
      {label}
    </button>
  );
}

export function PageHeader({
  actions = [],
  breadcrumbLabel,
  breadcrumbs = [],
  className,
  description,
  dir = "ltr",
  icon,
  metaInfo,
  tabs = {},
  title,
}: PageHeaderProps) {
  const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
  const actionItems = actions === false ? [] : actions;
  const showIcon = icon !== false;

  return (
    <header className={classes("ds-page-header", className)} data-node-id="1154:2816" dir={dir}>
      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} label={breadcrumbLabel} />}

      <div className="ds-page-header__section" data-node-id="1134:40171">
        <div className="ds-page-header__topline" data-node-id="1134:40048">
          <div className="ds-page-header__copy" data-node-id="1134:40046">
            <div className="ds-page-header__heading-row" data-node-id="1136:40843">
              <div className="ds-page-header__heading-main" data-node-id="1157:13000">
                {showIcon && <span className="ds-page-header__icon">{icon ?? <HomeIcon />}</span>}
                {title && <h1 data-node-id="1134:39780">{title}</h1>}
              </div>
              {metaInfo && (
                <span className="ds-page-header__meta" data-node-id="1134:40045">
                  {metaInfo}
                </span>
              )}
            </div>
            {description && (
              <p className="ds-page-header__description" data-node-id="1136:40842">
                {description}
              </p>
            )}
          </div>

          {actionItems.length > 0 && (
            <div className="ds-page-header__actions" data-node-id="1156:2489">
              {actionItems.map((action, index) => (
                <Action action={action} key={`${action.label}-${index}`} />
              ))}
            </div>
          )}
        </div>

        {tabs !== false && (
          <Tabs
            ariaLabel={tabs.ariaLabel}
            className="ds-page-header__tabs"
            fullWidth
            items={tabs.items}
            activeIndex={tabs.activeIndex}
            defaultActiveIndex={tabs.defaultActiveIndex}
            onActiveIndexChange={tabs.onActiveIndexChange}
            size="md"
            variant="underline"
            dir={dir}
          />
        )}
      </div>
    </header>
  );
}
