"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import { useState } from "react";
import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/pagination";
import DynamicButton from "@/components/button";
import { useTranslations } from "next-intl";

interface Banner {
  title: string;
  body: string;
  color?: string;
  button_name?: string;
  button_link?: string;
  media_files?: {
    mobile?: { id?: number | null; url?: string } | null;
    web?: { id?: number | null; url?: string } | null;
  } | null;
}

function openBannerLink(url?: string | null) {
  if (!url || typeof url !== "string" || !url.trim()) return;
  window.open(url.trim(), "_blank");
}

export default function HeroSlider({ banners }: { banners: Banner[] }) {
  const [currentSlide, setCurrentSlide] = useState(1);
  const tFallback = useTranslations("BANNER_FALLBACK");
  const slides = banners?.length
    ? banners
    : [
        {
          title: `<h2>${tFallback("title")}</h2>`,
          body: `<p>${tFallback("body")}</p>`,
          color: "#0F5132",
        },
      ];

  const DEFAULT_IMAGE_URL =
    "https://dev-endpoint.ataya.sa/storage/images/default/default.webp";

  const isRealImage = (url?: string | null) =>
    !!url && url !== DEFAULT_IMAGE_URL;

  const hasSlideImage = (slide: Banner) =>
    isRealImage(slide?.media_files?.web?.url) ||
    isRealImage(slide?.media_files?.mobile?.url);

  return (
    <section className="relative w-full">
      <div
        className="relative w-full max-sm:h-[195px] md:h-[45vh]"
        style={
          {
            /*           background: "linear-gradient(135deg, #0F5132, #1B7A50)",
             */
          }
        }
      >
        <Swiper
          modules={[Pagination, Autoplay]}
          pagination={
            slides.length > 1
              ? { clickable: true, el: ".custom-pagination" }
              : false
          }
          autoplay={
            slides.length >= 1
              ? { delay: 5000, disableOnInteraction: false }
              : false
          }
          loop={slides.length >= 1}
          slidesPerView={1}
          centeredSlides={false}
          spaceBetween={0}
          speed={450}
          watchSlidesProgress
          loopAdditionalSlides={slides.length > 1 ? 1 : 0}
          onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
          className="w-full h-full object-center"
        >
          {slides.map((slide, i) => {
            const hasImage = hasSlideImage(slide);
            return (
              <SwiperSlide key={i}>
                <div className="relative w-full h-full">
                  {hasImage ? (
                    <>
                      {/* Mobile: main image */}
                      <div className="sm:hidden flex h-full items-center justify-center px-4">
                        <img
                          src={
                            (isRealImage(
                              (slide as any)?.media_files?.mobile?.url,
                            )
                              ? (slide as any)?.media_files?.mobile?.url
                              : null) ||
                            (isRealImage((slide as any)?.media_files?.web?.url)
                              ? (slide as any)?.media_files?.web?.url
                              : "")
                          }
                          alt=""
                          className="w-full h-full max-h-[172px] rounded-xl object-cover shadow-md"
                          loading={i === 0 ? "eager" : "lazy"}
                        />
                      </div>

                      {/* Desktop / tablet: full background image */}
                      <img
                        src={
                          (isRealImage((slide as any)?.media_files?.web?.url)
                            ? (slide as any)?.media_files?.web?.url
                            : null) ||
                          (isRealImage((slide as any)?.media_files?.mobile?.url)
                            ? (slide as any)?.media_files?.mobile?.url
                            : "")
                        }
                        alt=""
                        className="absolute inset-0 w-full h-full hidden sm:block object-cover"
                        loading={i === 0 ? "eager" : "lazy"}
                      />
                    </>
                  ) : (
                    <>
                      {/* Mobile: colored card with same size as image */}
                      <div className="sm:hidden flex h-full items-center justify-center px-4">
                        <div
                          className="w-full h-full max-h-[172px] rounded-xl shadow-md"
                          style={{
                            background:
                              (slide as any)?.color ||
                              "linear-gradient(135deg, #0F5132, #1B7A50)",
                          }}
                        />
                      </div>

                      {/* Desktop: full background color */}
                      <div
                        className="absolute inset-0 w-full h-full hidden sm:block"
                        style={{
                          background:
                            (slide as any)?.color ||
                            "linear-gradient(135deg, #0F5132, #1B7A50)",
                        }}
                      />
                    </>
                  )}

                  {/* Desktop text overlay */}
                  <motion.div
                    key={currentSlide}
                    className="hidden sm:block absolute top-[22%] mx-[6%] text-white px-6 max-w-3xl will-change-transform"
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, ease: "easeOut" }}
                  >
                    <motion.div
                      className="text-3xl md:text-5xl font-extrabold drop-shadow-lg will-change-transform"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.5, delay: 0.1 }}
                      dangerouslySetInnerHTML={{ __html: slide.title }}
                    />
                    <motion.div
                      className="mt-3 text-lg md:text-xl will-change-transform"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.4, delay: 0.15 }}
                      dangerouslySetInnerHTML={{ __html: slide.body }}
                    />
                  </motion.div>

                  {/* Mobile overlay: title + body + primary button (aligned with card edges) */}
                  <div className="sm:hidden absolute inset-x-4 bottom-16 text-white p-3">
                    {slide.title && (
                      <div
                        className="text-base font-extrabold drop-shadow-md line-clamp-2"
                        dangerouslySetInnerHTML={{ __html: slide.title }}
                      />
                    )}
                    {slide.body && (
                      <div
                        className="mt-1 text-xs text-white/90 drop-shadow-sm line-clamp-2"
                        dangerouslySetInnerHTML={{ __html: slide.body }}
                      />
                    )}
                    {slides[currentSlide - 1]?.button_name && (
                      <div className="mt-3 flex">
                        <DynamicButton
                          onClick={() =>
                            openBannerLink(
                              slides[currentSlide - 1]?.button_link,
                            )
                          }
                          className="flex-1 justify-center rounded-xl px-4 py-2 text-sm font-semibold bg-white text-primary shadow-md"
                        >
                          {slides[currentSlide - 1]?.button_name}
                        </DynamicButton>
                      </div>
                    )}
                  </div>
                </div>
              </SwiperSlide>
            );
          })}
        </Swiper>
      </div>

      <div className="absolute bottom-[10%] md:bottom-[20%] mx-[7%] flex flex-col gap-4 items-start">
        {/* Desktop-only CTA buttons; hidden on mobile */}
        <div className="hidden md:flex flex-row items-center justify-center gap-2 md:gap-4 z-10">
          {slides[currentSlide - 1]?.button_name && (
            <DynamicButton
              onClick={() =>
                openBannerLink(slides[currentSlide - 1]?.button_link)
              }
              className="inline-flex items-center justify-center rounded-xl px-6 py-3 md:font-semibold bg-white text-(--g1) transition"
            >
              {slides[currentSlide - 1]?.button_name}
            </DynamicButton>
          )}
        </div>

        {/* Desktop: pagination + numeric counter (kept closest to bottom) */}
        <div className="flex flex-row gap-3 items-center">
          <div className="custom-pagination z-10"></div>
          <div className="text-white font-bold text-sm md:text-lg border rounded-lg py-0.5 md:py-1 px-2 z-10 bg-black/20 backdrop-blur-sm">
            {currentSlide}/{slides.length}
          </div>
        </div>
      </div>
    </section>
  );
}