"use client";

import { useEffect, useRef, useState, type ComponentType, type PointerEvent as ReactPointerEvent } from "react";
import { StatCard } from "@/components/app/StatCard";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";

const AUTOPLAY_MS = 5000;
const SWIPE_THRESHOLD_PX = 40;

export interface DashboardStatSlide {
  key: string;
  icon: ComponentType<{ className?: string }>;
  label: string;
  value: string;
  trend?: { value: string; direction: "up" | "down" | "flat" };
  accent?: "brand" | "accent" | "emerald" | "amber" | "slate";
}

/** Swipeable single-card slider for compact stats — pattern shared with CouponSlider. */
export function DashboardStatCarousel({ slides }: { slides: DashboardStatSlide[] }) {
  const { dir, t } = useTranslation();
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const [dragging, setDragging] = useState(false);
  const dragStartX = useRef(0);
  const dragDeltaX = useRef(0);

  const canDrag = slides.length > 1;

  useEffect(() => {
    if (paused || dragging || slides.length < 2) return;
    const id = setInterval(() => {
      setIndex((i) => (i + 1) % slides.length);
    }, AUTOPLAY_MS);
    return () => clearInterval(id);
  }, [paused, dragging, slides.length]);

  if (slides.length === 0) return null;

  const slide = slides[index];

  function goTo(next: number) {
    setIndex(((next % slides.length) + slides.length) % slides.length);
  }

  function handlePointerDown(e: ReactPointerEvent<HTMLDivElement>) {
    if (!canDrag) return;
    setDragging(true);
    dragStartX.current = e.clientX;
    dragDeltaX.current = 0;
    e.currentTarget.setPointerCapture(e.pointerId);
  }

  function handlePointerMove(e: ReactPointerEvent<HTMLDivElement>) {
    if (!dragging) return;
    dragDeltaX.current = e.clientX - dragStartX.current;
  }

  function handlePointerUp() {
    if (!dragging) return;
    setDragging(false);
    const delta = dragDeltaX.current;
    dragDeltaX.current = 0;
    if (Math.abs(delta) < SWIPE_THRESHOLD_PX) return;
    const swipedForward = dir === "rtl" ? delta > 0 : delta < 0;
    goTo(index + (swipedForward ? 1 : -1));
  }

  return (
    <div
      className="flex h-full flex-col"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
    >
      <div
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerCancel={handlePointerUp}
        className={cn("flex-1 touch-pan-y select-none", canDrag && "cursor-grab active:cursor-grabbing")}
      >
        <div key={slide.key} className="h-full motion-safe:animate-fade-in">
          <StatCard icon={slide.icon} label={slide.label} value={slide.value} trend={slide.trend} accent={slide.accent} className="h-full" />
        </div>
      </div>

      {slides.length > 1 && (
        <div className="mt-3 flex shrink-0 items-center justify-center gap-2">
          {slides.map((s, i) => (
            <button
              key={s.key}
              type="button"
              onClick={() => goTo(i)}
              aria-label={t("app.dashboard.statSlideAria")
                .replace("{n}", String(i + 1))
                .replace("{total}", String(slides.length))}
              aria-current={i === index}
              className="grid h-4 w-4 place-items-center"
            >
              <span
                className={cn(
                  "h-1.5 rounded-full bg-slate-400/50 transition-all duration-300 dark:bg-slate-500/50",
                  i === index ? "w-3 bg-brand-600 opacity-100 dark:bg-brand-400" : "w-1.5 opacity-40",
                )}
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}