import * as React from 'react';
import { ChevronLeft } from 'lucide-react';
import { cn } from '../../shared/utils';
import { Button } from '../button';

/**
 * Props for the PageHeader component.
 */
export interface PageHeaderProps {
  /** Main title of the page */
  title: string;
  /** Optional subtitle or description */
  subtitle?: string;
  /** Optional URL for the back button (renders a native `<a>`). */
  backHref?: string;
  /** Optional click handler for the back button. */
  onBack?: () => void;
  /**
   * Custom back link renderer — use this for SPA router links (React Router, Next.js, etc.)
   * so the navigation does not trigger a full page reload.
   *
   * @example
   * // React Router
   * renderBackLink={(icon) => <Link to="/previous">{icon}</Link>}
   * // Next.js
   * renderBackLink={(icon) => <NextLink href="/previous">{icon}</NextLink>}
   */
  renderBackLink?: (icon: React.ReactNode) => React.ReactElement;
  /** Action buttons or elements to display on the right */
  actions?: React.ReactNode;
  /** Additional CSS classes */
  className?: string;
  /** Accessible label for the back button. @default "Back" */
  backLabel?: string;
}

/**
 * Standard Header for individual pages or sections.
 *
 * @description
 * Use this component at the top of your page content to provide a consistent
 * title, optional subtitle, navigation (back button), and primary actions.
 *
 * @ai-rules
 * 1. Use `title` for the primary H1-level descriptor of the page.
 * 2. Prefer `renderBackLink` over `backHref` in SPA projects (React Router, Next.js) to avoid full reloads.
 * 3. Use `actions` for buttons like "Save", "Create", or secondary dropdowns.
 */
export function PageHeader({
  title,
  subtitle,
  backHref,
  onBack,
  renderBackLink,
  actions,
  className,
  backLabel = 'Back',
}: PageHeaderProps) {
  const showBack = !!(backHref || onBack || renderBackLink);
  const icon = <ChevronLeft className="h-5 w-5" />;

  return (
    <div
      className={cn(
        'flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8',
        className
      )}
    >
      <div className="flex items-start gap-4">
        {showBack && (
          <Button
            variant="outline"
            size="icon"
            className="h-10 w-10 shrink-0"
            onClick={onBack}
            asChild={!!renderBackLink || !!backHref}
            aria-label={backLabel}
          >
            {renderBackLink ? (
              renderBackLink(icon)
            ) : backHref ? (
              <a href={backHref}>{icon}</a>
            ) : (
              icon
            )}
          </Button>
        )}
        <div className="flex flex-col space-y-1">
          <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
          {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
        </div>
      </div>
      {actions && <div className="flex items-center gap-2">{actions}</div>}
    </div>
  );
}

/**
 * Styled Heading for custom page headers.
 */
export function PageHeaderHeading({
  className,
  ...props
}: React.HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h1
      className={cn(
        'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
        className
      )}
      {...props}
    />
  );
}

/**
 * Styled Description for custom page headers.
 */
export function PageHeaderDescription({
  className,
  ...props
}: React.HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn('text-lg text-muted-foreground sm:text-xl', className)} {...props} />;
}