import { cn } from "@/lib/utils";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { ReactNode } from "react";
import { PRIMARY_COLOR } from "@/lib/common";

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface PageHeaderProps {
  title: string;
  breadcrumbs?: BreadcrumbItem[];
  description?: string;
  actions?: ReactNode;
  className?: string;
}

export function PageHeader({
  title,
  breadcrumbs = [],
  description,
  actions,
  className,
}: PageHeaderProps) {
  return (
    <header
      className={cn(
        "relative mb-5 overflow-hidden rounded-2xl border px-5 py-4 shadow-sm",
        className
      )}
      style={{
        borderColor: `${PRIMARY_COLOR}20`,
        background: `linear-gradient(135deg, #ffffff 0%, ${PRIMARY_COLOR}08 100%)`,
      }}
    >
      {/* Left accent bar */}
      <div
        className="absolute inset-y-0 left-0 w-[3px] rounded-l-2xl"
        style={{ backgroundColor: PRIMARY_COLOR }}
      />

      {/* Decorative blob */}
      <div
        className="pointer-events-none absolute -right-10 -top-8 h-36 w-36 rounded-full opacity-[0.07] blur-3xl"
        style={{ backgroundColor: PRIMARY_COLOR }}
      />

      <div className="relative z-10 pl-1 space-y-2">
        {breadcrumbs.length > 0 && (
          <nav aria-label="Breadcrumb">
            <ol className="flex flex-wrap items-center gap-0.5 text-[10px] font-semibold uppercase tracking-widest text-slate-400">
              {breadcrumbs.map((crumb, index) => {
                const isLast = index === breadcrumbs.length - 1;
                return (
                  <li key={`${crumb.label}-${index}`} className="flex items-center gap-0.5">
                    {crumb.href && !isLast ? (
                      <Link
                        href={crumb.href}
                        className="transition-colors duration-150 hover:text-[#428B4D]"
                      >
                        {crumb.label}
                      </Link>
                    ) : (
                      <span style={isLast ? { color: PRIMARY_COLOR } : undefined}>
                        {crumb.label}
                      </span>
                    )}
                    {!isLast && (
                      <ChevronRight className="h-3 w-3 text-slate-300" />
                    )}
                  </li>
                );
              })}
            </ol>
          </nav>
        )}

        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
          <div>
            <h1 className="text-lg font-bold tracking-tight text-slate-800 md:text-xl">
              {title}
            </h1>
            {description && (
              <p className="mt-0.5 text-xs text-slate-500 leading-relaxed">{description}</p>
            )}
          </div>

          {actions && (
            <div className="flex flex-wrap items-center gap-2">
              {actions}
            </div>
          )}
        </div>
      </div>
    </header>
  );
}