import { ActionIcon, Group, Stack, Text, Title } from "@mantine/core";
import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";
import { useNavigate } from "react-router-dom";

import Breadcrumbs, { type BreadcrumbItem } from "@/components/ui/Breadcrumbs";

export interface PageHeaderProps {
  title: string;
  subtitle?: ReactNode;
  /** Breadcrumb trail — pass only on nested pages (details, sub-resources). */
  breadcrumbs?: BreadcrumbItem[];
  /** Route to return to; renders a back arrow before the title. */
  backTo?: string;
  /** Inline content beside the title (e.g. status badges). */
  meta?: ReactNode;
  /** Right-aligned actions — the primary CTA lives here. */
  action?: ReactNode;
}

/**
 * Unified page header: optional breadcrumbs, a title (with optional back arrow
 * and inline meta), a subtitle, and a right-aligned action slot. Keeps title /
 * action placement and spacing identical across every dashboard page.
 */
export function PageHeader({
  title,
  subtitle,
  breadcrumbs,
  backTo,
  meta,
  action,
}: PageHeaderProps) {
  const navigate = useNavigate();

  return (
    <Stack gap="sm">
      {breadcrumbs?.length ? <Breadcrumbs items={breadcrumbs} /> : null}

      <Group justify="space-between" align="flex-start" gap="md">
        <Group gap="sm" align="center" wrap="nowrap" style={{ minWidth: 0 }}>
          {backTo ? (
            <ActionIcon
              variant="subtle"
              color="gray"
              onClick={() => navigate(backTo)}
              aria-label="Go back"
            >
              <ArrowLeft size={18} />
            </ActionIcon>
          ) : null}

          <div style={{ minWidth: 0, maxWidth: 640 }}>
            <Group gap="sm" align="center" wrap="nowrap">
              <Title order={2} className="truncate" style={{ minWidth: 0 }}>
                {title}
              </Title>
              {meta}
            </Group>
            {subtitle ? (
              typeof subtitle === "string" ? (
                <Text c="dimmed" size="sm" mt={4} className="truncate">
                  {subtitle}
                </Text>
              ) : (
                // A component subtitle handles its own layout — truncating it
                // to one line would defeat e.g. an expandable description.
                <div style={{ marginTop: 4 }}>{subtitle}</div>
              )
            ) : null}
          </div>
        </Group>

        {action ? (
          <Group gap="sm" wrap="nowrap">
            {action}
          </Group>
        ) : null}
      </Group>
    </Stack>
  );
}

export default PageHeader;