"use client";

import type { MotionValue } from "framer-motion";
import {
  motion,
  useAnimationControls,
  useScroll,
  useTransform,
} from "framer-motion";
import { Pause, Play, RotateCcw } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";

import { cn } from "@/lib/utils";

const getTextPositionClassName = (
  textPosition: "left" | "right" | "top" | "bottom",
) => {
  let textPositionClassName = "";

  switch (textPosition) {
    case "left":
      textPositionClassName = "md:left-10 md:top-1/3 md:-translate-y-1/3";
      break;
    case "right":
      textPositionClassName = "md:right-10 md:top-1/2 md:-translate-y-1/2";
      break;
    case "top":
      textPositionClassName = "md:top-10 md:left-1/2 md:-translate-x-1/2";
      break;
    case "bottom":
      textPositionClassName = "md:bottom-10 md:left-1/2 md:-translate-x-1/2";
      break;
    default:
      textPositionClassName = "md:left-10 md:top-1/2 md:-translate-y-1/2";
      break;
  }

  return textPositionClassName;
};

const getCardPositions = (total: number, index: number) => {
  if (total <= 1) {
    return [0, 0, 0, 1, 1];
  }

  const step = 1 / total;
  const center = step * index + step / 2;

  const range = [
    0,
    Math.max(0, center - step),
    center,
    Math.min(1, center + step),
    1,
  ];

  for (let i = 1; i < range.length; i++) {
    range[i] = Math.max(range[i], range[i - 1]);
  }

  return range;
};

interface Visual {
  text: string;
  className: string;
  image: string;
  textPosition: "left" | "right" | "top" | "bottom";
}

interface VisualCardProps {
  visual: Visual;
  index: number;
  total: number;
  scrollXProgress: MotionValue<number>;
}

const VisualCard = ({
  visual,
  index,
  total,
  scrollXProgress,
}: VisualCardProps) => {
  const textPositionClassName = getTextPositionClassName(visual.textPosition);

  const range = getCardPositions(total, index);

  const opacity = useTransform(scrollXProgress, range, [0, 0, 1, 0, 0]);
  const x = useTransform(scrollXProgress, range, [
    "100%",
    "100%",
    "0%",
    "-100%",
    "-100%",
  ]);

  return (
    <motion.div
      className={cn(
        "relative h-[75vh] w-[70vw] shrink-0 snap-center overflow-hidden rounded-3xl",
        visual.className,
      )}
      id={`visual-${index}`}
    >
      <img
        src={visual.image}
        alt={visual.text}
        className={cn("absolute inset-0 z-0 h-full w-full object-cover")}
      />

      <span className="absolute inset-0 z-10 bg-black/5" />

      <motion.p
        style={{
          opacity,
          x,
        }}
        dir="rtl"
        className={cn(
          "absolute z-20 hidden text-right text-xl font-semibold leading-relaxed md:block md:max-w-sm lg:text-xl",
          textPositionClassName,
        )}
      >
        {visual.text}
      </motion.p>
      <motion.p
        style={{
          opacity,
          x,
        }}
        dir="rtl"
        className={cn(
          "absolute z-20 text-right text-xl font-semibold leading-relaxed md:hidden md:max-w-sm lg:text-xl",
          "top-10 left-1/2 -translate-x-1/2 px-4",
        )}
      >
        {visual.text}
      </motion.p>
    </motion.div>
  );
};

const GalleryPaginationDot = ({
  index,
  scrollXProgress,
  total,
  isPlaying,
  currentVisualIndex,
}: {
  index: number;
  scrollXProgress: MotionValue<number>;
  total: number;
  isPlaying: boolean;
  currentVisualIndex: number;
}) => {
  const range = getCardPositions(total, index);

  const controls = useAnimationControls();

  const width = useTransform(scrollXProgress, range, [8, 8, 50, 8, 8]);

  useEffect(() => {
    if (isPlaying && currentVisualIndex === index) {
      controls.set({
        width: 0,
      });
      controls.start({
        width: "100%",
      });
    }
  }, [currentVisualIndex, isPlaying, index, controls]);

  const handleClick = (index: number) => {
    document.getElementById(`visual-${index}`)?.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  };
  return (
    <motion.button
      type="button"
      style={{
        width,
      }}
      onClick={() => handleClick(index)}
      aria-label={`رفتن به اسلاید ${new Intl.NumberFormat("fa-IR").format(index + 1)}`}
      className="relative inline-block h-2 rounded-full bg-foreground/50 hover:bg-foreground/70"
    >
      {isPlaying && currentVisualIndex === index && (
        <motion.span
          animate={controls}
          transition={{ duration: 2, ease: "linear" }}
          className="absolute top-0 start-0 z-10 h-full rounded-full bg-foreground"
        />
      )}
    </motion.button>
  );
};

interface Gallery35Props {
  heading?: string;
  visuals?: Visual[];
  className?: string;
}

const defaultVisuals: Visual[] = [
  {
    text: "اصول طراحی مدرن رابط‌هایی شهودی می‌سازد که کاربران به آن اعتماد و علاقه دارند.",
    className: "bg-blue-100 dark:bg-blue-900",
    image: "/block-media/shadcnblocks/block/guri4/img11.png",
    textPosition: "left",
  },
  {
    text: "فرایند خلاق نوآوری را با طراحی تکراری و بازخورد کاربر پیش می‌برد.",
    className: "bg-green-100 dark:bg-green-900",
    image: "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    textPosition: "top",
  },
  {
    text: "تحلیل بصری داده‌های پیچیده را به داشبوردهای واضح و قابل‌اقدام تبدیل می‌کند.",
    className: "bg-purple-100 dark:bg-purple-900",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
    textPosition: "bottom",
  },
  {
    text: "هنر دیجیتال زیبایی‌شناسی کلاسیک را با قابلیت‌های تعاملی مدرن ترکیب می‌کند.",
    className: "bg-pink-100 dark:bg-pink-900",
    image: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
    textPosition: "top",
  },
  {
    text: "مرکز نوآوری فناوری پیشرفته را با طراحی انسان‌محور در کنار هم قرار می‌دهد.",
    className: "bg-orange-100 dark:bg-orange-900",
    image: "/block-media/shadcnblocks/block/guri3/img23.jpeg",
    textPosition: "left",
  },
  {
    text: "تحلیل تصویری داده‌ها، مسیر مشتری را از آگاهی تا تبدیل در یک نمای بصری نمایش می‌دهد.",
    className: "bg-indigo-100 dark:bg-indigo-900",
    image: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    textPosition: "top",
  },
];

const Gallery35 = ({
  className,
  heading = "گالری محصول",
  visuals = defaultVisuals,
}: Gallery35Props) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentVisualIndex, setCurrentVisualIndex] = useState(0);

  const { scrollXProgress } = useScroll({
    container: containerRef,
  });

  useEffect(() => {
    const unsubscribe = scrollXProgress.on("change", (progress) => {
      if (isPlaying) return;

      let closestIndex = 0;
      let minDistance = Infinity;

      visuals.forEach((_, index) => {
        const range = getCardPositions(visuals.length, index);
        const visualPosition = range[2];
        const distance = Math.abs(progress - visualPosition);

        if (distance < minDistance) {
          minDistance = distance;
          closestIndex = index;
        }
      });

      setCurrentVisualIndex(closestIndex);
    });

    return () => unsubscribe();
  }, [scrollXProgress, visuals.length, isPlaying, visuals]);

  useEffect(() => {
    if (!isPlaying) return;

    const intervalId = setInterval(() => {
      if (currentVisualIndex === visuals.length - 1) {
        setIsPlaying(false);
        return currentVisualIndex;
      }

      const nextIndex = currentVisualIndex + 1;

      document.getElementById(`visual-${nextIndex}`)?.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center",
      });

      setCurrentVisualIndex(nextIndex);
    }, 2000);

    return () => clearInterval(intervalId);
  }, [isPlaying, visuals.length, currentVisualIndex]);

  const restartAnimation = () => {
    setCurrentVisualIndex(0);
    document.getElementById(`visual-0`)?.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
    setIsPlaying(true);
  };

  const isLastSlide =
    currentVisualIndex === visuals.length - 1 && !isPlaying;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container overflow-visible">
        <div className="flex flex-col gap-14">
          <h3 className="text-right text-3xl font-semibold tracking-tight md:text-xl lg:text-2xll">
            {heading}
          </h3>

          <div className="relative space-y-10">
            <div
              ref={containerRef}
              dir="rtl"
              className="hide-scrollbar flex snap-x snap-mandatory flex-nowrap items-center gap-10 overflow-x-auto scroll-smooth"
              style={{
                scrollSnapType: "x mandatory",
                scrollBehavior: "smooth",
                WebkitOverflowScrolling: "touch",
              }}
            >
              {visuals.map((visual, index) => {
                return (
                  <VisualCard
                    key={`visual-${index}`}
                    visual={visual}
                    index={index}
                    total={visuals.length}
                    scrollXProgress={scrollXProgress}
                  />
                );
              })}
            </div>
            <div className="sticky bottom-20 z-20 flex justify-center">
              <div className="flex h-14 items-center gap-2 overflow-hidden">
                <div className="flex h-full items-center gap-3 rounded-full bg-muted/50 px-6 backdrop-blur-xl">
                  {visuals.map((_, index) => {
                    return (
                      <GalleryPaginationDot
                        key={`visual-${index}`}
                        index={index}
                        scrollXProgress={scrollXProgress}
                        total={visuals.length}
                        isPlaying={isPlaying}
                        currentVisualIndex={currentVisualIndex}
                      />
                    );
                  })}
                </div>

                <button
                  type="button"
                  onClick={
                    isLastSlide ? restartAnimation : () => setIsPlaying(!isPlaying)
                  }
                  aria-label={
                    isLastSlide
                      ? "شروع دوباره گالری"
                      : isPlaying
                        ? "توقف پخش خودکار"
                        : "پخش خودکار گالری"
                  }
                  className="flex h-full items-center justify-center rounded-full bg-muted/50 px-6 backdrop-blur-xl [&>svg]:fill-foreground/50 [&>svg]:stroke-foreground/10"
                >
                  {isLastSlide ? (
                    <RotateCcw
                      strokeWidth={2.2}
                      className="fill-none! stroke-foreground/50!"
                    />
                  ) : isPlaying ? (
                    <Pause />
                  ) : (
                    <Play />
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Gallery35 };