import Link from "next/link";
import { Fragment, type ReactNode } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";

export type Crumb = { label: string; href?: string };

/** Sticky bar above every admin page: sidebar toggle, breadcrumbs, optional actions. */
export function AdminTopbar({
  breadcrumbs,
  children,
  className,
}: {
  breadcrumbs: Crumb[];
  children?: ReactNode;
  className?: string;
}) {
  return (
    <header
      className={cn(
        "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b bg-background/85 px-4 backdrop-blur-md supports-backdrop-filter:bg-background/70 lg:px-6",
        className,
      )}
    >
      <SidebarTrigger className="-ml-1.5 text-muted-foreground" />
      <Separator orientation="vertical" className="h-5!" />
      <Breadcrumb className="min-w-0">
        <BreadcrumbList className="flex-nowrap">
          {breadcrumbs.map((crumb, index) => {
            const last = index === breadcrumbs.length - 1;
            return (
              <Fragment key={`${crumb.label}-${index}`}>
                <BreadcrumbItem className={cn("min-w-0", !last && "hidden sm:inline-flex")}>
                  {last || !crumb.href ? (
                    <BreadcrumbPage className="truncate">{crumb.label}</BreadcrumbPage>
                  ) : (
                    <BreadcrumbLink asChild>
                      <Link href={crumb.href}>{crumb.label}</Link>
                    </BreadcrumbLink>
                  )}
                </BreadcrumbItem>
                {!last && <BreadcrumbSeparator className="hidden sm:block" />}
              </Fragment>
            );
          })}
        </BreadcrumbList>
      </Breadcrumb>
      {children && (
        <div className="ml-auto flex shrink-0 items-center gap-2">{children}</div>
      )}
    </header>
  );
}

/**
 * Standard admin page: top bar, a title row with primary actions, then content
 * in a centered column.
 */
export function AdminPage({
  title,
  description,
  actions,
  breadcrumbs,
  children,
  className,
}: {
  title: string;
  description?: ReactNode;
  actions?: ReactNode;
  breadcrumbs?: Crumb[];
  children: ReactNode;
  className?: string;
}) {
  return (
    <>
      <AdminTopbar breadcrumbs={breadcrumbs ?? [{ label: title }]} />
      <div
        className={cn(
          "mx-auto w-full max-w-[1400px] px-4 py-6 lg:px-8 lg:py-8",
          className,
        )}
      >
        <div className="mb-6 flex flex-wrap items-end justify-between gap-4 lg:mb-8">
          <div className="min-w-0">
            <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
            {description && (
              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
            )}
          </div>
          {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
        </div>
        {children}
      </div>
    </>
  );
}