"use client";

import { ReactNode, useEffect, useRef, useState } from "react";

export interface HeroSlide {
  img: string;
  content: ReactNode;
}

interface HeroSliderProps {
  slides: HeroSlide[];
  id?: string;
  className?: string;
  autoplay?: number;
}

function getSliderHeight(w: number): number {
  if (w < 480) return Math.round((400 * w) / 480);
  if (w < 778) return 400;
  if (w < 1040) return 500;
  if (w < 1200) return 700;
  return 825;
}

const LEVEL_WIDTHS = [800, 800, 500, 400];

function getContentWidth(w: number): number {
  if (w >= 1200) return LEVEL_WIDTHS[0];
  if (w >= 1040) return LEVEL_WIDTHS[1];
  if (w >= 778) return LEVEL_WIDTHS[2];
  return LEVEL_WIDTHS[3];
}

function getContentLeft(w: number): number {
  if (w >= 1200) return Math.round((w - 1200) / 2) + 15;
  return 15;
}

export default function HeroSlider({
  slides,
  id = "rev_slider_one_wrapper",
  className = "style3",
  autoplay = 5000,
}: HeroSliderProps) {
  const [current, setCurrent] = useState(0);
  const [height, setHeight] = useState(825);
  const [wrapperWidth, setWrapperWidth] = useState(1920);
  const wrapperRef = useRef<HTMLDivElement>(null);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const touchX = useRef<number | null>(null);

  useEffect(() => {
    const measure = () => {
      if (wrapperRef.current) {
        setHeight(getSliderHeight(wrapperRef.current.clientWidth));
        setWrapperWidth(wrapperRef.current.clientWidth);
      }
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);

  useEffect(() => {
    if (autoplay <= 0) return;
    timerRef.current = setInterval(() => {
      setCurrent((c) => (c + 1) % slides.length);
    }, autoplay);
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, [autoplay, slides.length]);

  const go = (dir: number) => {
    setCurrent((c) => (c + dir + slides.length) % slides.length);
  };

  return (
    <section className={`main-slider ${className}`}>
      <div
        className="rev_slider_wrapper fullwidthbanner-container"
        id={id}
        data-source="gallery"
        ref={wrapperRef}
      >
        <div
          className="rev_slider fullwidthabanner"
          id="rev_slider_three"
          data-version="5.4.1"
          style={{ height, overflow: "hidden", position: "relative" }}
          onTouchStart={(e) => {
            touchX.current = e.touches[0].clientX;
          }}
          onTouchEnd={(e) => {
            if (touchX.current === null) return;
            const delta = e.changedTouches[0].clientX - touchX.current;
            if (Math.abs(delta) > 75) go(delta < 0 ? 1 : -1);
            touchX.current = null;
          }}
        >
          {slides.map((slide, i) => (
            <div
              key={i}
              className={`rev-slide ${i === current ? "active" : ""}`}
              style={{
                position: "absolute",
                inset: 0,
                opacity: i === current ? 1 : 0,
                transition: "opacity 1500ms ease",
                pointerEvents: i === current ? "auto" : "none",
              }}
            >
              <img
                loading="lazy"
                alt=""
                className="rev-slidebg"
                src={slide.img}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
              <div
                className="tp-caption"
                style={{
                  position: "absolute",
                  left: getContentLeft(wrapperWidth),
                  top: 95,
                  width: getContentWidth(wrapperWidth),
                  zIndex: 7,
                  visibility: "visible",
                  whiteSpace: "normal",
                }}
              >
                <div className="slide-content left-slide">{slide.content}</div>
              </div>
            </div>
          ))}
          <div
            className="rev-arrows-overlay"
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
              zIndex: 8,
              pointerEvents: "none",
            }}
          >
            <span
              className="custom-arrow custom-arrow-left"
              style={{ pointerEvents: "auto" }}
              onClick={() => go(-1)}
            >
              <i className="revicon-angle-left" />
            </span>
            <span
              className="custom-arrow custom-arrow-right"
              style={{ pointerEvents: "auto" }}
              onClick={() => go(1)}
            >
              <i className="revicon-angle-right" />
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}