"use client";

import type { ReactNode } from "react";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";

import { Button } from "@/components/ui/button";

type Props = {
  /** Optional — when present, shows a back arrow that links here and uses parentLabel as breadcrumb root. */
  backHref?: string;
  /** Breadcrumb segments (root → leaf). The last item is rendered as the current page (non-link). */
  breadcrumb?: { label: string; href?: string }[];
  /** Convenience: shorthand for breadcrumb when there's just a parent + current segment. */
  parentLabel?: string;
  currentLabel?: string;
  titleIcon?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  /** Optional inline meta (e.g. a live total chip) shown to the right of the title row. */
  meta?: ReactNode;
};

export function FormPageHeader({
  backHref,
  breadcrumb,
  parentLabel,
  currentLabel = "New",
  titleIcon,
  title,
  description,
  meta,
}: Props) {
  // Resolve breadcrumb items.
  const crumbs =
    breadcrumb ??
    (parentLabel
      ? [{ label: parentLabel, href: backHref }, { label: currentLabel }]
      : []);

  return (
    <header className="mb-6 rounded-xl border bg-card px-4 py-3 shadow-xs md:px-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="flex items-start gap-3">
          {backHref ? (
            <Button type="button" variant="ghost" size="icon" className="size-8" asChild>
              <Link href={backHref} aria-label={`Back to ${parentLabel ?? "previous page"}`}>
                <ArrowLeft className="size-4" />
              </Link>
            </Button>
          ) : null}
          <div className="space-y-0.5">
            {crumbs.length ? (
              <div className="flex flex-wrap items-center gap-1.5 text-xs">
                {crumbs.map((crumb, i) => {
                  const isLast = i === crumbs.length - 1;
                  return (
                    <span key={`${crumb.label}-${i}`} className="contents">
                      {i > 0 ? <span className="text-muted-foreground">/</span> : null}
                      {crumb.href && !isLast ? (
                        <Link href={crumb.href} className="text-muted-foreground hover:underline">
                          {crumb.label}
                        </Link>
                      ) : (
                        <span className={isLast ? "font-medium" : "text-muted-foreground"}>
                          {crumb.label}
                        </span>
                      )}
                    </span>
                  );
                })}
              </div>
            ) : null}
            <h1 className="flex items-center gap-2 text-lg font-semibold leading-tight">
              {titleIcon}
              {title}
            </h1>
            {description ? (
              <p className="max-w-2xl text-muted-foreground text-xs">{description}</p>
            ) : null}
          </div>
        </div>
        {meta ? <div className="flex items-center gap-2">{meta}</div> : null}
      </div>
    </header>
  );
}