const { useState, useEffect, useCallback } = React;
const { motion, AnimatePresence, useReducedMotion } = window.Motion;

function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}

function wrapIndex(n, len) {
  if (len <= 0) return 0;
  return ((n % len) + len) % len;
}

function signedOffset(i, active, len, loop) {
  const raw = i - active;
  if (!loop || len <= 1) return raw;

  const alt = raw > 0 ? raw - len : raw + len;
  return Math.abs(alt) < Math.abs(raw) ? alt : raw;
}

const SquareArrowOutUpRight = ({ className }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
    <path d="m21 3-9 9" />
    <path d="M15 3h6v6" />
  </svg>
);

function CardStack({
  items,
  initialIndex = 0,
  maxVisible = 7,
  cardWidth = 520,
  cardHeight = 320,
  overlap = 0.48,
  spreadDeg = 48,
  perspectivePx = 1100,
  depthPx = 140,
  tiltXDeg = 12,
  activeLiftPx = 22,
  activeScale = 1.03,
  inactiveScale = 0.94,
  springStiffness = 280,
  springDamping = 28,
  loop = true,
  autoAdvance = false,
  intervalMs = 2800,
  pauseOnHover = true,
  showDots = true,
  className,
  onChangeIndex,
  renderCard,
}) {
  const reduceMotion = useReducedMotion ? useReducedMotion() : false;
  const len = items.length;

  const [active, setActive] = useState(() => wrapIndex(initialIndex, len));
  const [hovering, setHovering] = useState(false);

  useEffect(() => {
    setActive((a) => wrapIndex(a, len));
  }, [len]);

  useEffect(() => {
    if (!len) return;
    onChangeIndex?.(active, items[active]);
  }, [active]);

  const maxOffset = Math.max(0, Math.floor(maxVisible / 2));
  const cardSpacing = Math.max(10, Math.round(cardWidth * (1 - overlap)));
  const stepDeg = maxOffset > 0 ? spreadDeg / maxOffset : 0;

  const canGoPrev = loop || active > 0;
  const canGoNext = loop || active < len - 1;

  const prev = useCallback(() => {
    if (!len || !canGoPrev) return;
    setActive((a) => wrapIndex(a - 1, len));
  }, [canGoPrev, len]);

  const next = useCallback(() => {
    if (!len || !canGoNext) return;
    setActive((a) => wrapIndex(a + 1, len));
  }, [canGoNext, len]);

  const onKeyDown = (e) => {
    if (e.key === "ArrowLeft") prev();
    if (e.key === "ArrowRight") next();
  };

  useEffect(() => {
    if (!autoAdvance) return;
    if (reduceMotion) return;
    if (!len) return;
    if (pauseOnHover && hovering) return;

    const id = window.setInterval(
      () => {
        if (loop || active < len - 1) next();
      },
      Math.max(700, intervalMs),
    );

    return () => window.clearInterval(id);
  }, [
    autoAdvance,
    intervalMs,
    hovering,
    pauseOnHover,
    reduceMotion,
    len,
    loop,
    active,
    next,
  ]);

  if (!len) return null;

  const activeItem = items[active];

  return (
    <div
      className={cn("tw-w-full tw-max-w-5xl tw-mx-auto", className)}
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
    >
      <div
        className="tw-relative tw-w-full tw-overflow-visible"
        style={{ height: Math.max(380, cardHeight + 80) }}
        tabIndex={0}
        onKeyDown={onKeyDown}
      >
        <div
          className="tw-pointer-events-none tw-absolute tw-inset-x-0 tw-top-6 tw-mx-auto tw-h-48 tw-w-[70%] tw-rounded-full tw-bg-black/5 tw-blur-3xl"
          aria-hidden="true"
        />
        <div
          className="tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-mx-auto tw-h-40 tw-w-[76%] tw-rounded-full tw-bg-black/10 tw-blur-3xl"
          aria-hidden="true"
        />

        <div
          className="tw-absolute tw-inset-0 tw-flex tw-items-end tw-justify-center tw-overflow-visible"
          style={{ perspective: `${perspectivePx}px` }}
        >
          <AnimatePresence initial={false}>
            {items.map((item, i) => {
              const off = signedOffset(i, active, len, loop);
              const abs = Math.abs(off);
              const visible = abs <= maxOffset;

              if (!visible) return null;

              const rotateZ = off * stepDeg;
              const x = off * cardSpacing;
              const y = abs * 10; 
              const z = -abs * depthPx;

              const isActive = off === 0;
              const scale = isActive ? activeScale : inactiveScale;
              const lift = isActive ? -activeLiftPx : 0;
              const rotateX = isActive ? 0 : tiltXDeg;
              const zIndex = 100 - abs;

              const dragProps = isActive
                ? {
                    drag: "x",
                    dragConstraints: { left: 0, right: 0 },
                    dragElastic: 0.18,
                    onDragEnd: (_e, info) => {
                      if (reduceMotion) return;
                      const travel = info.offset.x;
                      const v = info.velocity.x;
                      const threshold = Math.min(160, cardWidth * 0.22);

                      if (travel > threshold || v > 650) prev();
                      else if (travel < -threshold || v < -650) next();
                    },
                  }
                : {};

              return (
                <motion.div
                  key={item.id}
                  className={cn(
                    "tw-absolute tw-bottom-0 tw-rounded-2xl tw-border-4 tw-border-black/10 tw-overflow-hidden tw-shadow-xl",
                    "tw-will-change-transform tw-select-none",
                    isActive
                      ? "tw-cursor-grab active:tw-cursor-grabbing"
                      : "tw-cursor-pointer"
                  )}
                  style={{
                    width: cardWidth,
                    height: cardHeight,
                    zIndex,
                    transformStyle: "preserve-3d",
                  }}
                  initial={
                    reduceMotion
                      ? false
                      : { opacity: 0, y: y + 40, x, rotateZ, rotateX, scale }
                  }
                  animate={{
                    opacity: 1,
                    x,
                    y: y + lift,
                    rotateZ,
                    rotateX,
                    scale,
                  }}
                  transition={{
                    type: "spring",
                    stiffness: springStiffness,
                    damping: springDamping,
                  }}
                  onClick={() => setActive(i)}
                  {...dragProps}
                >
                  <div
                    className="tw-h-full tw-w-full"
                    style={{
                      transform: `translateZ(${z}px)`,
                      transformStyle: "preserve-3d",
                    }}
                  >
                    {renderCard ? renderCard(item, { active: isActive }) : <DefaultFanCard item={item} active={isActive} />}
                  </div>
                </motion.div>
              );
            })}
          </AnimatePresence>
        </div>
      </div>

      {showDots ? (
        <div className="tw-mt-10 tw-flex tw-items-center tw-justify-center tw-gap-3 tw-relative tw-z-20">
          <div className="tw-flex tw-items-center tw-gap-2">
            {items.map((it, idx) => {
              const on = idx === active;
              return (
                <button
                  key={it.id}
                  onClick={() => setActive(idx)}
                  className={cn(
                    "tw-h-2 tw-w-2 tw-rounded-full tw-transition",
                    on ? "tw-bg-[#c6a87c]" : "tw-bg-[#c6a87c]/40 hover:tw-bg-[#c6a87c]/70"
                  )}
                  aria-label={`Go to ${it.title}`}
                />
              );
            })}
          </div>
          {activeItem.href ? (
            <a
              href={activeItem.href}
              target="_blank"
              rel="noreferrer"
              className="tw-text-[#c6a87c] hover:tw-text-white tw-transition"
              aria-label="Open link"
            >
              <SquareArrowOutUpRight className="tw-h-4 tw-w-4" />
            </a>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function DefaultFanCard({ item, active }) {
  return (
    <div className="tw-relative tw-h-full tw-w-full tw-bg-gray-900">
      <div className="tw-absolute tw-inset-0">
        {item.imageSrc ? (
          <img
            src={item.imageSrc}
            alt={item.title}
            className="tw-h-full tw-w-full tw-object-cover"
            draggable={false}
            loading="lazy"
          />
        ) : (
          <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-gray-800 tw-text-sm tw-text-gray-400">
            No image
          </div>
        )}
      </div>

      <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/80 tw-via-black/20 tw-to-transparent" />

      <div className="tw-relative tw-z-10 tw-flex tw-h-full tw-flex-col tw-justify-end tw-p-6">
        {item.tag && (
            <span className="tw-text-[#c6a87c] tw-text-sm tw-font-semibold tw-tracking-wide tw-uppercase tw-mb-1">{item.tag}</span>
        )}
        <div className="tw-truncate tw-text-2xl tw-font-bold tw-text-white tw-mb-2" style={{ fontFamily: "'Playfair Display', serif" }}>
          {item.title}
        </div>
        {item.description ? (
          <div className="tw-line-clamp-2 tw-text-sm tw-text-gray-200" style={{ fontFamily: "'Inter', sans-serif" }}>
            {item.description}
          </div>
        ) : null}
      </div>
    </div>
  );
}

function CardStackDemo() {
  const items = (window.prestasiData || []).map(p => ({
    id: p.id,
    title: p.title,
    description: p.desc,
    imageSrc: p.photo,
    tag: p.tag,
    href: null
  }));

  if (items.length === 0) {
    items.push(
      {
        id: 1,
        title: "Juara Harapan 1 Turnamen Futsal",
        description: "Tim futsal sekolah sukses menembus babak semifinal dan meraih juara harapan 1.",
        imageSrc: "img/futsal.jpg",
        tag: "Olahraga"
      }
    );
  }

  const isMobile = window.innerWidth < 640;
  const cardWidth = isMobile ? 300 : 420;
  const cardHeight = isMobile ? 400 : 480;
  const overlap = isMobile ? 0.35 : 0.45;

  return (
    <div className="tw-w-full">
      <div className="tw-mx-auto tw-w-full tw-p-4 md:tw-p-8">
        <CardStack
          items={items}
          initialIndex={0}
          autoAdvance={true}
          intervalMs={3000}
          pauseOnHover={true}
          showDots={true}
          cardWidth={cardWidth}
          cardHeight={cardHeight}
          overlap={overlap}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("react-prestasi-root");
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<CardStackDemo />);
}