import { ReactNode } from 'react';

import { Link } from '@inertiajs/react';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';

export interface BreadcrumbCrumb {
  label: string;
  href?: string;
}

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  /** Alias for subtitle — accepted for convenience. */
  description?: string;
  actions?: ReactNode;
  /**
   * UI-001: Optional breadcrumb trail shown above the page title.
   * Last item is treated as the current page (no link).
   * Example: [{ label: 'Sites', href: '/sites' }, { label: 'My Blog' }]
   */
  breadcrumbs?: BreadcrumbCrumb[];
}

/**
 * PageHeader — standard page title area with optional breadcrumbs and actions.
 * @status stable
 * All authenticated pages should use this for their h1 heading.
 * Never render a bare <h1> outside of this component.
 *
 * UI-001: Standardised page header with optional breadcrumb navigation.
 *
 * Used as the top section of all authenticated pages. Breadcrumbs provide
 * consistent back-navigation context across the app.
 */
export default function PageHeader({
  title,
  subtitle,
  description,
  actions,
  breadcrumbs,
}: PageHeaderProps) {
  const subtext = subtitle ?? description;
  return (
    <div className="border-b bg-card">
      <div className="container py-6 md:py-8">
        {breadcrumbs && breadcrumbs.length > 0 && (
          <Breadcrumb className="mb-3">
            <BreadcrumbList>
              {breadcrumbs.map((crumb, index) => {
                const isLast = index === breadcrumbs.length - 1;
                return (
                  <BreadcrumbItem key={crumb.label}>
                    {isLast || !crumb.href ? (
                      <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
                    ) : (
                      <>
                        <BreadcrumbLink asChild>
                          <Link href={crumb.href}>{crumb.label}</Link>
                        </BreadcrumbLink>
                        <BreadcrumbSeparator />
                      </>
                    )}
                  </BreadcrumbItem>
                );
              })}
            </BreadcrumbList>
          </Breadcrumb>
        )}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div className="space-y-1">
            <h1 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground">
              {title}
            </h1>
            {subtext && <p className="text-muted-foreground text-base md:text-lg">{subtext}</p>}
          </div>
          {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
      </div>
    </div>
  );
}