"use client";

import { cn } from "@/lib/utils";
import {
  ReactElement,
  ReactNode,
  cloneElement,
  isValidElement,
} from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft, ChevronRight } from "lucide-react";
import Link from "next/link";
import { PRIMARY_COLOR } from "@/lib/common";

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

interface FormSectionHeadingProps {
  title: string;
  icon?: ReactNode;
  eyebrow?: string;
  description?: string;
  breadcrumbs?: BreadcrumbItem[];
  showBackButton?: boolean;
  className?: string;
}

export function FormSectionHeading({
  title,
  icon,
  eyebrow,
  description,
  breadcrumbs = [],
  showBackButton = false,
  className,
}: FormSectionHeadingProps) {
  let renderedIcon: ReactNode = null;
  const router = useRouter();

  if (icon) {
    if (isValidElement(icon)) {
      const iconElement = icon as ReactElement<{ className?: string }>;
      renderedIcon = cloneElement(iconElement, {
        className: cn("text-2xl text-current", iconElement.props.className ?? ""),
      });
    } else {
      renderedIcon = icon;
    }
  }

  return (
    <div
      className={cn(
        "relative 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 items-center gap-3">
          {showBackButton && (
            <button
              type="button"
              onClick={() => router.back()}
              className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border transition-all duration-150"
              style={{
                borderColor: `${PRIMARY_COLOR}4D`,
                color: PRIMARY_COLOR,
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = PRIMARY_COLOR;
                e.currentTarget.style.backgroundColor = PRIMARY_COLOR;
                e.currentTarget.style.color = "white";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = `${PRIMARY_COLOR}4D`;
                e.currentTarget.style.backgroundColor = "";
                e.currentTarget.style.color = PRIMARY_COLOR;
              }}
              aria-label="Go back"
            >
              <ArrowLeft className="h-4 w-4" />
            </button>
          )}

          {renderedIcon && (
            <span
              className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl"
              style={{
                backgroundColor: `${PRIMARY_COLOR}15`,
                color: PRIMARY_COLOR,
              }}
            >
              {renderedIcon}
            </span>
          )}

          <div>
            {eyebrow && (
              <p
                className="text-[10px] font-semibold uppercase tracking-widest"
                style={{ color: `${PRIMARY_COLOR}B3` }}
              >
                {eyebrow}
              </p>
            )}
            <h2 className="text-lg font-bold tracking-tight text-slate-800">
              {title}
            </h2>
            {description && (
              <p className="mt-0.5 text-xs text-slate-500 leading-relaxed">{description}</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}