"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Keyboard, Mousewheel, A11y } from "swiper/modules";

import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";

import "swiper/css";
import "swiper/css/navigation";

function NavButton({ side, onClick, hidden, ariaLabel, children }) {
  const posClass = side === "start" ? "start-2" : "end-2";
  return (
    <div
      className={`absolute top-1/2 -translate-y-1/2 z-20 hidden md:block ${posClass} ${
        hidden ? "md:invisible" : "md:visible"
      }`}
      aria-hidden={hidden}
    >
      <button
        type="button"
        onClick={onClick}
        aria-label={ariaLabel}
        className="w-11 h-11 rounded-full bg-white/90 backdrop-blur border border-gray-200 shadow-lg grid place-items-center hover:bg-white transition
                   outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-brand/40
                   focus-visible:ring-offset-2 focus-visible:ring-offset-white"
      >
        {children}
      </button>
    </div>
  );
}

const PRESETS = {
  chips: {
    slidesPerView: 9,
    spaceBetween: 8,
    breakpoints: {
      0: { slidesPerView: 3.4, spaceBetween: 10 },
      480: { slidesPerView: 4.6, spaceBetween: 10 },
      640: { slidesPerView: 5.2, spaceBetween: 12 },
      768: { slidesPerView: 6.2, spaceBetween: 14 },
      1024: { slidesPerView: 7.2, spaceBetween: 15 },
      1280: { slidesPerView: 7.2, spaceBetween: 15 },
      1320: { slidesPerView: 7.2, spaceBetween: 15 },
    },
    slideClassName: "py-2 !h-auto !overflow-visible",
  },

  cards: {
    slidesPerView: "auto",
    spaceBetween: 14,
    breakpoints: {
      0: { slidesPerView: 1.2, spaceBetween: 8 },
      480: { slidesPerView: 1.5, spaceBetween: 10 },
      640: { slidesPerView: 2, spaceBetween: 15 },
      768: { slidesPerView: 2, spaceBetween: 15 },
      1024: { slidesPerView: 3, spaceBetween: 15 },
      1280: { slidesPerView: 3, spaceBetween: 15 },
      1320: { slidesPerView: 3, spaceBetween: 15 },
    },
    slideClassName: "py-3 !w-auto !h-auto !overflow-visible flex",
  },
};

export default function HorizontalSwiperSection({
  title,
  subtitle,
  items = [],
  renderItem,
  className = "",
  variant = "cards", // "cards" | "chips"
  slideClassName = "",
  compact = false,
  //disableAutoWidth = false
}) {
  const { i18n, t } = useTranslation();
  const dir = i18n.dir(); // "rtl" | "ltr"
  const isRTL = dir === "rtl";

  const swiperRef = useRef(null);
  const [showPrev, setShowPrev] = useState(false);
  const [showNext, setShowNext] = useState(true);

  const a11y = useMemo(
    () => ({
      enabled: true,
      prevSlideMessage: t("common.prev", "Previous"),
      nextSlideMessage: t("common.next", "Next"),
    }),
    [t]
  );

  const safeItems = Array.isArray(items) ? items : [];
  const preset = PRESETS[variant] || PRESETS.cards;

  const getCanPrevNext = (swiper) => {
    if (!swiper) return { canPrev: false, canNext: false };
    // Swiper already handles RTL when we call changeLanguageDirection(dir)
    // so we can rely on isBeginning / isEnd normally.
    const canPrev = !swiper.isBeginning;
    const canNext = !swiper.isEnd;
    return { canPrev, canNext };
  };

  const syncNav = (swiper) => {
    const { canPrev, canNext } = getCanPrevNext(swiper);
    setShowPrev(canPrev);
    setShowNext(canNext);
  };

  // ✅ أهم حل: حدّث اتجاه Swiper عند تغيير اللغة (RTL/LTR)
  useEffect(() => {
    const swiper = swiperRef.current;
    if (!swiper) return;

    swiper.changeLanguageDirection(dir);
    swiper.update();
    syncNav(swiper);
  }, [dir]); // eslint-disable-line react-hooks/exhaustive-deps

 

  return (
    <section
      className={`${compact ? "py-4 sm:py-5" : "py-6 sm:py-8"} ${className}`}
      dir={dir}
    >
      <div className="custom-container">
        {(title || subtitle) && (
          <div className={`${compact ? "mb-4" : "mb-5 sm:mb-7"} px-4 sm:px-0`}>
            {title && (
              <h2 className="text-2xl sm:text-3xl font-bold text-gray-900">
                {title}
              </h2>
            )}
            {subtitle && (
              <p className="mt-2 text-gray-600 text-sm sm:text-base">
                {subtitle}
              </p>
            )}
          </div>
        )}

        <div className="relative -mx-4 sm:mx-0 px-4 sm:px-0">
          {/* Swiper handles RTL internally; we only swap the arrow icons for UX */}
          <NavButton
            side="start"
            hidden={!showPrev}
            onClick={() => swiperRef.current?.slidePrev()}
            ariaLabel={t("common.prev", "Previous")}
          >
            {isRTL ? (
              <ChevronRightIcon className="text-gray-800" />
            ) : (
              <ChevronLeftIcon className="text-gray-800" />
            )}
          </NavButton>

          <NavButton
            side="end"
            hidden={!showNext}
            onClick={() => swiperRef.current?.slideNext()}
            ariaLabel={t("common.next", "Next")}
          >
            {isRTL ? (
              <ChevronLeftIcon className="text-gray-800" />
            ) : (
              <ChevronRightIcon className="text-gray-800" />
            )}
          </NavButton>

          <Swiper
            modules={[Navigation, Keyboard, Mousewheel, A11y]}
            a11y={a11y}
            keyboard={{
              enabled: true,
              onlyInViewport: true,
              ...(isRTL ? { invert: true } : {}),
            }}
            mousewheel={{
              forceToAxis: true,
              sensitivity: 0.6,
              ...(isRTL ? { invert: true } : {}),
            }}
            watchOverflow
            grabCursor
            autoHeight={false}
            className="w-full max-w-full !overflow-hidden"
            style={{ paddingBottom: 0, marginBottom: 0 }}
            slidesPerView={preset.slidesPerView}
            spaceBetween={preset.spaceBetween}
            breakpoints={preset.breakpoints}
            onSwiper={(swiper) => {
              swiperRef.current = swiper;

              // ✅ اضبط الاتجاه فور init (لو الصفحة فتحت وهي RTL)
              swiper.changeLanguageDirection(dir);
              swiper.update();

              syncNav(swiper);
            }}
            onSlideChange={(swiper) => {
              syncNav(swiper);
            }}
          >
            {safeItems.map((item, idx) => (
              <SwiperSlide
                key={item.id ?? item.key ?? idx}
                className={`${preset.slideClassName} ${slideClassName}`}
              >
                <div className="h-full flex">{renderItem?.(item)}</div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}