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-lg border bg-gradient-to-r from-white via-opacity-5 to-white px-5 py-4 shadow-sm",
        "before:absolute before:inset-y-0 before:left-0 before:w-1",
        "after:pointer-events-none after:absolute after:-right-16 after:-top-8 after:h-40 after:w-40 after:rounded-lg after:opacity-10 after:blur-3xl",
        className
      )}
      style={{
        borderColor: `${PRIMARY_COLOR}33`,
        background: `linear-gradient(to right, white, ${PRIMARY_COLOR}0D, white)`,
      }}
      // Use ref to set pseudo-element styles
      ref={(el: HTMLDivElement | null) => {
        if (el && typeof document !== 'undefined') {
          const id = `page-header-${Math.random().toString(36).substr(2, 9)}`;
          el.setAttribute('data-header-id', id);
          const style = document.createElement('style');
          style.textContent = `
            [data-header-id="${id}"]::before { background-color: ${PRIMARY_COLOR} !important; }
            [data-header-id="${id}"]::after { background-color: ${PRIMARY_COLOR} !important; }
          `;
          if (!document.head.querySelector(`[data-header-style="${id}"]`)) {
            style.setAttribute('data-header-style', id);
            document.head.appendChild(style);
          }
        }
      }}
    >
      <div className="relative z-10 space-y-2.5">
        {breadcrumbs.length > 0 && (
          <nav aria-label="Breadcrumb">
            <ol className="flex flex-wrap items-center gap-1 text-[11px] font-medium uppercase tracking-[0.25em] text-slate-500">
              {breadcrumbs.map((crumb, index) => {
                const isLast = index === breadcrumbs.length - 1;
                const item = (
                  <span
                    key={crumb.label}
                    className={cn(
                      "transition-colors",
                      isLast ? "" : "text-slate-500"
                    )}
                    style={{ color: isLast ? PRIMARY_COLOR : undefined }}
                    onMouseEnter={(e) => {
                      if (!isLast) {
                        e.currentTarget.style.color = PRIMARY_COLOR;
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (!isLast) {
                        e.currentTarget.style.color = "";
                      }
                    }}
                  >
                    {crumb.href && !isLast ? (
                      <Link href={crumb.href}>{crumb.label}</Link>
                    ) : (
                      crumb.label
                    )}
                  </span>
                );

                return (
                  <li key={`${crumb.label}-${index}`} className="flex items-center gap-1">
                    {item}
                    {!isLast && (
                      <span className="text-slate-400">/</span>
                    )}
                  </li>
                );
              })}
            </ol>
          </nav>
        )}

        <div className="flex flex-col gap-2.5 md:flex-row md:items-center md:justify-between">
          <div>
            <h1 className="text-lg font-semibold text-slate-800 tracking-wide md:text-xl">
              {title}
            </h1>
            {description && (
              <p className="mt-1 text-sm text-slate-500">{description}</p>
            )}
          </div>

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