/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useSyncExternalStore } from "react";
import { MessageCircle, ShoppingBag } from "lucide-react";
import { Button } from "../../ui/button";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, EffectFade, Pagination } from "swiper/modules";
import Image from "next/image";
import { useSiteConfig } from "@/context/SiteConfigContext";

// Swiper styles
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/pagination";

interface HeroProps {
  activeHero: any;
}

const emptySubscribe = () => () => {};

export default function Hero({ activeHero }: HeroProps) {
  const mounted = useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false
  );

  const title = activeHero?.title || "WELCOME TO THE ELECTRONICS STORE";
  const subtitle = activeHero?.subtitle || "The Best Deals in Town";
  const ctaText = activeHero?.cta_text || "ORDER NOW";
  const ctaLink = activeHero?.cta_link || "#products";

  // Extract active image assets
  const activeMedia = activeHero?.media
    ? activeHero.media
      .filter((m: any) => m.is_active && m.media_type === "image")
      .sort((a: any, b: any) => a.sort_order - b.sort_order)
    : [];

  const images = activeMedia.length > 0
    ? activeMedia.map((m: any) => m.media_url)
    : ["https://placehold.co/1200x500/e8512a/white?text=Electronics+Banner"];

  const siteConfig = useSiteConfig();
  const whatsappNum = siteConfig.whatsapp_number || "8801639768727";
  const whatsappHref = `https://wa.me/${whatsappNum}`;

  return (
    <section
      id="home"
      className="relative w-full h-[70vh] sm:h-[80vh] md:h-[85vh] lg:h-screen bg-zinc-950 overflow-hidden select-none [&_.swiper-pagination]:!bottom-6 [&_.swiper-pagination]:!text-center [&_.swiper-pagination]:!w-full"
    >
      {/* Immersive Background Slider - 100% Crisp Image Clarity */}
      <div className="absolute inset-0 z-0">
        {!mounted ? (
          <Image
            src={images[0]}
            alt={`${title} slide 1`}
            fill
            priority
            fetchPriority="high"
            sizes="100vw"
            className="object-cover"
          />
        ) : (
          <Swiper
            modules={[EffectFade, Autoplay, Pagination]}
            effect="fade"
            fadeEffect={{ crossFade: true }}
            loop={true}
            speed={1500}
            slidesPerView={1}
            centeredSlides={true}
            allowTouchMove={true}
            autoplay={{
              delay: 4500,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
              bulletActiveClass: "!bg-white !w-8",
              bulletClass: "swiper-pagination-bullet !bg-white/40 !w-2.5 !h-2.5 !rounded-full !mx-1 transition-all duration-300",
            }}
            className="h-full w-full"
          >
            {images.map((imgUrl: string, i: number) => (
              <SwiperSlide key={i} className="h-full w-full relative">
                <Image
                  src={imgUrl}
                  alt={`${title} slide ${i + 1}`}
                  fill
                  priority={i === 0}
                  fetchPriority={i === 0 ? "high" : "low"}
                  sizes="100vw"
                  className="object-cover"
                />
              </SwiperSlide>
            ))}
          </Swiper>
        )}
        {/* Soft dark overlay for maximum contrast and high-end cinematic feel */}
        <div className="absolute inset-0 bg-black/40 z-10 pointer-events-none" />
      </div>

      {/* Majestic Centered Hero Content Overlay */}
      <div className="absolute inset-0 z-20 flex items-center justify-center pt-16 md:pt-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-6xl mx-auto space-y-6 sm:space-y-8 text-center flex flex-col items-center justify-center">
            {/* Dynamic Centered Heading in Amber-200 (Matches Product Card glowing text color) - Always Stay */}
            <h1 className="text-3xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-amber-200 uppercase tracking-wider drop-shadow-[0_4px_12px_rgba(0,0,0,0.6)] leading-tight max-w-6xl">
              {title}
            </h1>

            {/* Dynamic Subtitle / Description */}
            {subtitle && (
              <p className="text-zinc-200 text-xs sm:text-base lg:text-lg font-light max-w-2xl leading-relaxed drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">
                {subtitle}
              </p>
            )}

            {/* CTA Buttons side-by-side (Synced exactly with ProductCard buttons color accent) */}
            <div className="flex flex-row items-center justify-center gap-3 sm:gap-4 pt-2">
              {/* Primary Shop Button - Matches ProductCard's bg-white hover:bg-amber-100 exactly */}
              {ctaText && (
                <Button
                  size="lg"
                  className="h-11 sm:h-13 px-6 sm:px-8 rounded-md bg-brand-accent text-white hover:bg-brand-accent-hover hover:font-black transition-all duration-300 ease-out text-xs sm:text-sm font-extrabold uppercase tracking-widest flex items-center justify-center gap-2 border-none shadow-2xl hover:shadow-[0_10px_25px_rgba(245,158,11,0.35)] cursor-pointer"
                  onClick={() => (window.location.href = ctaLink)}
                >
                  <ShoppingBag size={15} className="text-white" />
                  <span>{ctaText}</span>
                </Button>
              )}

              {/* WhatsApp Contact Button - Matches ProductCard's glassmorphic background & glowing amber text exactly */}
              <Button
                size="lg"
                className="h-11 sm:h-13 px-6 sm:px-8 rounded-md bg-white/10 border border-white/10 hover:bg-white/20 hover:border-white/20 text-white hover:font-black transition-all duration-300 ease-out text-xs sm:text-sm font-extrabold uppercase tracking-widest flex items-center justify-center gap-2 shadow-2xl backdrop-blur-md hover:shadow-[0_10px_25px_rgba(255,255,255,0.05)] cursor-pointer"
                onClick={() => window.open(whatsappHref, "_blank")}
              >
                <MessageCircle size={15} className="text-white" />
                <span>Contact Us</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}