"use client";

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ChevronLeft, ChevronRight, ArrowRight, Sparkles } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import { getStorageUrl } from "@/lib/utils";
import {
  getBannersAction,
  type Banner,
  type GetBannersResult,
} from "@/features/banners/api";

export type { Banner };

/** Dedupe banners fetch when effect runs twice (e.g. React Strict Mode) */
let bannersFetchPromise: Promise<GetBannersResult> | null = null;

/** Breakpoints (px) for responsive banner images */
const TABLET_BREAKPOINT = 768;
const DESKTOP_BREAKPOINT = 1024;

/** Fallback when API fails or returns no banners */
const DEFAULT_FALLBACK_BANNER: Banner = {
  id: 0,
  title: "Discover Sacred India",
  subtitle: "Spiritual Journeys",
  description:
    "Experience divine blessings at India's most sacred destinations. From Varanasi to Rishikesh, embark on a spiritual awakening.",
  desktop_image: "/hero-sacred-india-varanasi-ganga-aarti-spiritual.jpg",
  tablet_image: "/hero-sacred-india-varanasi-ganga-aarti-spiritual.jpg",
  mobile_image: "/hero-sacred-india-varanasi-ganga-aarti-spiritual.jpg",
  primary_button_text: "Explore Packages",
  primary_button_url: "/spiritual-packages",
  secondary_button_text: "Get Started Free",
  secondary_button_url: "/create-account",
  sort_order: 1,
  status: "active",
  created_by: null,
  updated_by: null,
  deleted_at: null,
  created_at: "",
  updated_at: "",
};

function getImageUrlByViewport(
  banner: Banner,
  viewport: "desktop" | "tablet" | "mobile"
): string {
  const path =
    viewport === "desktop"
      ? banner.desktop_image
      : viewport === "tablet"
        ? banner.tablet_image
        : banner.mobile_image;
  if (!path) return getStorageUrl(banner.desktop_image) || "/placeholder.png";
  // Local public path or full URL: use as-is
  if (path.startsWith("/") || path.startsWith("http")) return path;
  return getStorageUrl(path) || "/placeholder.png";
}

export function HeroSlider() {
  const [slides, setSlides] = useState<Banner[]>([]);
  const [loading, setLoading] = useState(true);
  const [viewport, setViewport] = useState<"desktop" | "tablet" | "mobile">(
    "desktop"
  );
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = useState(true);

  useEffect(() => {
    async function fetchBanners() {
      if (!bannersFetchPromise) {
        bannersFetchPromise = getBannersAction();
      }
      const result = await bannersFetchPromise;
      if (
        result.success &&
        Array.isArray(result.data) &&
        result.data.length > 0
      ) {
        setSlides(result.data);
      } else {
        setSlides([DEFAULT_FALLBACK_BANNER]);
      }
      setLoading(false);
    }
    fetchBanners();
  }, []);

  useEffect(() => {
    function updateViewport() {
      const w = typeof window !== "undefined" ? window.innerWidth : 1024;
      if (w < TABLET_BREAKPOINT) setViewport("mobile");
      else if (w < DESKTOP_BREAKPOINT) setViewport("tablet");
      else setViewport("desktop");
    }
    updateViewport();
    window.addEventListener("resize", updateViewport);
    return () => window.removeEventListener("resize", updateViewport);
  }, []);

  const nextSlide = useCallback(() => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  }, [slides.length]);

  const prevSlide = useCallback(() => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  }, [slides.length]);

  const goToSlide = useCallback((index: number) => {
    setCurrentSlide(index);
    setIsAutoPlaying(false);
    setTimeout(() => setIsAutoPlaying(true), 5000);
  }, []);

  useEffect(() => {
    if (!isAutoPlaying || slides.length === 0) return;
    const interval = setInterval(nextSlide, 7000);
    return () => clearInterval(interval);
  }, [isAutoPlaying, nextSlide, slides.length]);

  if (loading) {
    return (
      <section className="relative h-[100vh] w-full overflow-hidden bg-muted animate-pulse" />
    );
  }

  const slide = slides[currentSlide];
  const imageSrc = getImageUrlByViewport(slide, viewport);

  return (
    <section className="relative h-[100vh] w-full overflow-hidden">
      {/* Slides */}
      <AnimatePresence mode="wait">
        <motion.div
          key={currentSlide}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1, ease: "easeInOut" }}
          className="absolute inset-0"
        >
          <Image
            src={imageSrc}
            alt={slide.title}
            fill
            className="object-cover scale-110" // Initial scale for ken burns effect
            priority
            quality={90}
            sizes="100vw"
          />
          <motion.div
            initial={{ scale: 1.1 }}
            animate={{ scale: 1 }}
            transition={{ duration: 10, ease: "linear" }}
            className="absolute inset-0"
          />

          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent" />
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />

          {/* Content - left-aligned, similar to reference: tag → title → description → buttons */}
          <div className="relative h-full flex items-center">
            <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8 w-full">
              <div className="max-w-2xl space-y-5">
                {slide.subtitle && (
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.2 }}
                  >
                    <Badge className="rounded-lg bg-white/15 text-white border border-white/25 backdrop-blur-md px-4 py-2 font-medium text-xs uppercase tracking-wider hover:bg-white/20 transition-colors">
                      <Sparkles className="h-3.5 w-3.5 mr-2 opacity-90" />
                      {slide.subtitle}
                    </Badge>
                  </motion.div>
                )}

                <motion.h1
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{
                    duration: 0.8,
                    delay: 0.3,
                    ease: [0.22, 1, 0.36, 1],
                  }}
                  className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-[1.15] text-balance drop-shadow-2xl"
                >
                  {slide.title}
                </motion.h1>

                {slide.description && (
                  <motion.p
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.4 }}
                    className="text-base md:text-lg lg:text-xl text-white/90 max-w-xl leading-relaxed"
                  >
                    {slide.description}
                  </motion.p>
                )}

                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.5 }}
                  className="flex flex-wrap gap-3 pt-2"
                >
                  {slide.primary_button_text && slide.primary_button_url && (
                    <Button
                      size="lg"
                      asChild
                      className="rounded-xl px-8 h-12 text-base font-semibold frontend-gradient-primary shadow-xl hover:brightness-110 transition-all hover:scale-[1.02] active:scale-95 border-none"
                    >
                      <Link href={slide.primary_button_url}>
                        {slide.primary_button_text}
                        <ArrowRight className="ml-2 h-5 w-5" />
                      </Link>
                    </Button>
                  )}
                  {slide.secondary_button_text &&
                    slide.secondary_button_url && (
                      <Button
                        size="lg"
                        variant="outline"
                        asChild
                        className="rounded-xl px-8 h-12 text-base font-semibold bg-white/10 border-white/30 text-white hover:bg-white/20 transition-all backdrop-blur-md active:scale-95"
                      >
                        <Link href={slide.secondary_button_url}>
                          {slide.secondary_button_text}
                        </Link>
                      </Button>
                    )}
                </motion.div>
              </div>
            </div>
          </div>
        </motion.div>
      </AnimatePresence>

      {/* Navigation Arrows */}
      <button
        onClick={prevSlide}
        className="absolute left-6 md:left-10 top-1/2 -translate-y-1/2 h-14 w-14 rounded-full bg-black/20 backdrop-blur-md border border-white/20 flex items-center justify-center text-white hover:bg-white/20 transition-all hover:scale-110 active:scale-90 z-20 group"
        aria-label="Previous slide"
      >
        <ChevronLeft className="h-8 w-8 group-hover:-translate-x-0.5 transition-transform" />
      </button>
      <button
        onClick={nextSlide}
        className="absolute right-6 md:right-10 top-1/2 -translate-y-1/2 h-14 w-14 rounded-full bg-black/20 backdrop-blur-md border border-white/20 flex items-center justify-center text-white hover:bg-white/20 transition-all hover:scale-110 active:scale-90 z-20 group"
        aria-label="Next slide"
      >
        <ChevronRight className="h-8 w-8 group-hover:translate-x-0.5 transition-transform" />
      </button>

      {/* Slide Indicators */}
      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex items-center gap-4 z-20">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={cn(
              "h-2.5 rounded-full transition-all duration-500",
              index === currentSlide
                ? "w-12 bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)]"
                : "w-2.5 bg-white/40 hover:bg-white/60"
            )}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>

      {/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1 }}
        className="absolute bottom-12 right-12 hidden md:flex items-center gap-3 text-white/80 text-sm z-20 font-medium tracking-wide"
      >
        <span>SCROLL TO EXPLORE</span>
        <div className="w-7 h-11 rounded-full border-2 border-white/30 flex justify-center pt-2 backdrop-blur-sm">
          <motion.div
            animate={{
              y: [0, 14, 0],
              opacity: [1, 0, 1],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut",
            }}
            className="w-1.5 h-1.5 bg-white rounded-full"
          />
        </div>
      </motion.div>
    </section>
  );
}