"use client";
import { products } from "@/interfaces/types";
import ProductCard from "@/shared/card/ProductCard";
import LocalePath from "@/shared/LocalePath";
import AppSwiper from "@/shared/Swiper/AppSwiper";
import { useTranslations } from "next-intl";
import { useState, useRef, useEffect } from "react";
import { Swiper as SwiperType } from "swiper/types";

type Props = {
  recently_added_products: products[];
};

export default function NewProducts({ recently_added_products }: Props) {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [swiper, setSwiper] = useState<SwiperType | null>(null);
  const progressRef = useRef<HTMLDivElement>(null);
  const isDragging = useRef(false);

  const handleProgressClick = (e: MouseEvent | React.MouseEvent) => {
    try {
      if (!swiper || !progressRef.current) return;
      const rect = progressRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const width = rect.width;
      const percentage = Math.max(0, Math.min(1, x / width));
      const targetIndex = Math.round(
        percentage * recently_added_products.length - 4,
      );
      swiper.slideTo(Math.max(0, targetIndex));
      // const targetIndex = Math.round(percentage * (recently_added_products.length - 1));
      // swiper.slideTo(targetIndex);
    } catch (error) {
      console.log("🚀 ~ handleProgressClick ~ error:", error);
    }
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    isDragging.current = true;
    handleProgressClick(e);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging.current) handleProgressClick(e);
  };

  const handleMouseUp = () => {
    isDragging.current = false;
  };

  useEffect(() => {
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [swiper]);

  const t = useTranslations();
  return (
    <section className="relative overflow-hidden py-12">
      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/5 to-transparent rounded-full blur-3xl pointer-events-none"></div>
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-accent/10 to-transparent rounded-full blur-3xl pointer-events-none"></div>
      <div className="container relative">
        <div className="flex items-center justify-between mb-12">
          <div className="flex items-center gap-6">
            <div className="relative">
              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-accent/10 px-4 py-2 rounded-full mb-4 border border-primary/20 hover:border-primary/40 transition-all duration-300 cursor-pointer group/badge">
                <div className="relative">
                  <div
                    className="absolute inset-0 blur-lg opacity-0 group-hover/badge:opacity-100"
                    style={{ transform: "scale(1.01545)" }}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="lucide lucide-sparkles *:stroke-primary"
                    >
                      <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
                      <path d="M20 3v4"></path>
                      <path d="M22 5h-4"></path>
                      <path d="M4 17v2"></path>
                      <path d="M5 18H3"></path>
                    </svg>
                  </div>
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="lucide lucide-sparkles text-primary relative z-10 drop-shadow-lg group-hover/badge:drop-shadow-xl"
                    >
                      <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
                      <path d="M20 3v4"></path>
                      <path d="M22 5h-4"></path>
                      <path d="M4 17v2"></path>
                      <path d="M5 18H3"></path>
                    </svg>
                  </div>
                </div>
                <span className="text-sm text-primary group-hover/badge:font-medium transition-all">
                  {t("Text.new")}
                </span>
                <span className="text-base">🌸</span>
              </div>
              <h2 className="text-3xl md:text-4xl mb-2 bg-gradient-to-r from-text-primary to-secondary bg-clip-text">
                {t("Text.new_products")}
              </h2>
              <p className="text-text-secondary">
                {t("Text.new_products_description")}
              </p>
            </div>
          </div>
          <LocalePath
            href="/products?sort=new"
            className="hidden md:flex bg-transparent border border-gray-200 text-text-primary text-base px-8 py-3.5 rounded-lg font-medium shadow-sm  duration-300 group items-center gap-2 group relative overflow-hidden active:bg-primary active:text-white active:border-primary transition-colors"
          >
            <span className="relative z-10">{t("Text.see_all")}</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-arrow-right relative z-10 group-hover:translate-x-1 transition-transform duration-300"
            >
              <path d="M5 12h14"></path>
              <path d="m12 5 7 7-7 7"></path>
            </svg>
            <div
              className="absolute inset-0 bg-gradient-to-r from-primary/10 to-accent/10"
              style={{ transform: "translateX(-100%)" }}
            ></div>
          </LocalePath>
        </div>
        <div className="relative">
          <AppSwiper
            setSwiper={setSwiper}
            spaceBetween={8}
            slideClass="!w-full lg:!w-1/4 md:!w-1/3 sm:!w-1/2 my-4 pe-2 sm:pe-6"
            extraSettings={{
              centeredSlides: false,
              loop: false,
            }}
            showCustomArrows
            onSwiperSlideChange={(activeIndex) => {
              setCurrentSlide(activeIndex);
            }}
          >
            {recently_added_products.map((product) => (
              <div key={product.id}>
                <ProductCard product={product} />
              </div>
            ))}
          </AppSwiper>
        </div>

        <div className="mt-6 w-full max-w-md mx-auto lg:block hidden">
          <div className="relative">
            <div
              className="relative h-2.5 bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 rounded-full overflow-hidden cursor-pointer group backdrop-blur-sm"
              ref={progressRef}
              onMouseDown={handleMouseDown}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-primary/30 to-secondary/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              <div
                className="transition-all duration-300 absolute top-0 left-0 h-full bg-gradient-to-r from-primary via-secondary to-primary rounded-full shadow-lg shadow-primary/40"
                style={{
                  width: `${((currentSlide + 4) / recently_added_products.length) * 100}%`,
                }}
              >
                <div
                  className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent rounded-full"
                  style={{ transform: "translateX(63.08%)" }}
                ></div>
              </div>
            </div>
            <div className="mt-3 text-center text-sm text-text-secondary flex items-center justify-center gap-2">
              <span>{t("Text.scroll_to_see_more")}</span>
              <span
                className="text-lg"
                style={{ transform: "translateX(0.286867px)" }}
              >
                ←
              </span>
            </div>
          </div>
        </div>

        <div className="mt-10 text-center md:hidden">
          <LocalePath
            href="/products?sort=new"
            className="btn-primary relative overflow-hidden group px-8 py-3.5 rounded-2xl shadow-lg shadow-primary/30"
          >
            <span className="relative z-10">{t("Text.see_all")}</span>
            <div
              className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/30 to-white/0"
              style={{ transform: "translateX(103.85%)" }}
            ></div>
          </LocalePath>
        </div>
      </div>
    </section>
  );
}