import React, { useEffect, useState } from "react";

interface BannerHeaderProps {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  badgeLabel?: string;
  backgroundUrl?: string;
  overlayGradient?: string;
  meta?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
  showSearch?: boolean;
  searchPlaceholder?: string;
  onSearch?: (value: string) => void;
  heightClass?: string;
  badgeClass?: string; // nueva prop para personalizar el badge (tema)
  accentColor?: string; // nuevo: color hex para acentos y sombra del buscador
}

export default function BannerHeader({
  title,
  subtitle,
  badgeLabel,
  backgroundUrl,
  overlayGradient = "bg-[radial-gradient(circle_at_top,_rgba(244,168,37,0.12),transparent_45%)]",
  meta,
  className = "",
  children,
  showSearch = false,
  searchPlaceholder = "Buscar...",
  onSearch,
  heightClass = "h-[320px] md:h-[400px]",
  badgeClass,
  accentColor = "#f4a825",
}: BannerHeaderProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [isFocused, setIsFocused] = useState(false);

  useEffect(() => {
    onSearch?.(searchTerm);
  }, [searchTerm, onSearch]);

  return (
    <section className={`relative w-full bg-[#231f1a] overflow-hidden ${className}`}>
      {/* Fondo difuminado usando la imagen recibida por props */}
      {backgroundUrl && (
        <div
          className={`absolute inset-0 w-full ${heightClass} bg-cover bg-center bg-no-repeat`}
          style={{
            backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(24,19,17,1) 100%), url(${backgroundUrl})`,
          }}
        >
          <div className="absolute inset-0 bg-gradient-to-t from-[#181311] via-transparent to-transparent opacity-90" />
        </div>
      )}

      <div className="container mx-auto px-4 md:px-6 text-center relative z-10">
        <div className={`${heightClass} flex flex-col items-center justify-center`}>
          {badgeLabel && (
            <div
              // use badgeClass if provided, otherwise fallback al estilo amarillo por defecto
              className={`inline-flex items-center gap-2 py-1 px-4 rounded-full text-xs font-bold mb-4 tracking-wide uppercase ${badgeClass ?? "bg-[#f4a825]/10 text-[#f4a825] border border-[#f4a825]/20"}`}
            >
              <span className="size-2 rounded-full" style={{ backgroundColor: accentColor }} />
              {badgeLabel}
            </div>
          )}

          {meta && (
            <div className="flex items-center gap-2 mb-2 text-[#f4a825] font-semibold tracking-wider text-xs uppercase justify-center">
              {meta}
            </div>
          )}

          {/* Título con mayor jerarquía y sombra para mejor legibilidad */}
          <h1 className="text-3xl md:text-5xl font-extrabold text-white mb-2 tracking-tight leading-tight drop-shadow-[0_6px_22px_rgba(0,0,0,0.6)] transition-all">
            {title}
          </h1>

          {/* Barra decorativa acentuada */}
          <div className="h-1 w-24 rounded-full mb-4" style={{ background: `linear-gradient(90deg, ${accentColor}, ${accentColor}77)` }} />

          {subtitle && (
            <p className="mt-2 max-w-2xl text-center text-sm md:text-base text-gray-300 opacity-95">
              {subtitle}
            </p>
          )}

          {/* Buscador dentro del banner con efecto glass y sombra al enfocar */}
          {showSearch && (
            <div className="mt-8 w-full max-w-md px-4">
              <div className="relative">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <svg className="h-5 w-5 text-zinc-400" viewBox="0 0 24 24" fill="none" aria-hidden>
                    <path d="M21 21l-4.35-4.35" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
                    <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></circle>
                  </svg>
                </div>
                <input
                  aria-label="Buscar eventos"
                  type="text"
                  placeholder={searchPlaceholder}
                  className="w-full rounded-full border border-transparent bg-white/5 backdrop-blur-sm py-2 pr-4 pl-10 text-white placeholder:text-zinc-400 transition-all duration-200"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onFocus={() => setIsFocused(true)}
                  onBlur={() => setIsFocused(false)}
                  style={
                    isFocused
                      ? {
                          boxShadow: `0 10px 30px ${accentColor}22, inset 0 1px 0 rgba(255,255,255,0.02)`,
                          borderColor: `${accentColor}55`,
                        }
                      : { boxShadow: "0 6px 18px rgba(0,0,0,0.35)" }
                  }
                />
              </div>
            </div>
          )}

          {children && <div className="mt-6">{children}</div>}
        </div>
      </div>
    </section>
  );
}