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

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

type Props = {
  icon?: LucideIcon;
  title: React.ReactNode;
  description?: React.ReactNode;
  /** Right-hand action buttons (e.g. Create / Export / Refresh). */
  actions?: React.ReactNode;
  /** Optional breadcrumb shown above the card. */
  breadcrumb?: BreadcrumbCrumb[];
  /** Rendered inside the card BEFORE CardContent (e.g. tab navigation). */
  subNav?: React.ReactNode;
  /** Extra class for the inner CardContent. */
  contentClassName?: string;
  /** Extra class for the wrapping Card. */
  className?: string;
  children: React.ReactNode;
};

export function ListPageCard({
  icon: Icon,
  title,
  description,
  actions,
  breadcrumb,
  subNav,
  contentClassName,
  className,
  children,
}: Props) {
  return (
    <div className="flex flex-col gap-4 md:gap-6">
      {breadcrumb?.length ? <PageBreadcrumb items={breadcrumb} /> : null}
      <Card className={className}>
        <CardHeader className="border-b">
          <CardTitle className="flex items-center gap-2 text-base">
            {Icon ? <Icon className="size-5" /> : null}
            {title}
          </CardTitle>
          {description ? (
            <p className="mt-1 max-w-3xl text-muted-foreground text-sm">
              {description}
            </p>
          ) : null}
          {actions ? <CardAction>{actions}</CardAction> : null}
        </CardHeader>
        {subNav}
        <CardContent className={cn("pt-4", contentClassName)}>
          {children}
        </CardContent>
      </Card>
    </div>
  );
}

function PageBreadcrumb({ items }: { items: BreadcrumbCrumb[] }) {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/dashboard">Dashboard</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <span key={`${item.label}-${index}`} className="contents">
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                {item.href && !isLast ? (
                  <BreadcrumbLink asChild>
                    <Link href={item.href}>{item.label}</Link>
                  </BreadcrumbLink>
                ) : (
                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
                )}
              </BreadcrumbItem>
            </span>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
}