"use client";
import * as React2 from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Flashcard({
  front,
  back,
  defaultFlipped = false,
  flipped: flippedProp,
  onFlipChange,
  width = 360,
  height = 240,
  flipDurationMs = 500,
  className,
  ...rest
}) {
  const [internalFlipped, setInternalFlipped] = React2.useState(defaultFlipped);
  const isControlled = flippedProp !== void 0;
  const flipped = isControlled ? flippedProp : internalFlipped;
  const toggle = React2.useCallback(() => {
    const next = !flipped;
    if (!isControlled) setInternalFlipped(next);
    onFlipChange?.(next);
  }, [flipped, isControlled, onFlipChange]);
  const handleKey = React2.useCallback(
    (e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        toggle();
      }
    },
    [toggle]
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...rest,
      "data-hex-flashcard": true,
      "data-flipped": flipped,
      role: "button",
      tabIndex: 0,
      "aria-pressed": flipped,
      "aria-label": flipped ? "Flashcard, back side. Activate to flip to front." : "Flashcard, front side. Activate to reveal back.",
      onClick: toggle,
      onKeyDown: handleKey,
      className: cn(
        "relative inline-block cursor-pointer select-none transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        className
      ),
      style: {
        width,
        height,
        perspective: 1e3
      },
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          "data-hex-flashcard-inner": true,
          className: "relative h-full w-full transition-transform",
          style: {
            transformStyle: "preserve-3d",
            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
            transitionDuration: `${flipDurationMs}ms`
          },
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                "data-hex-flashcard-face": true,
                "data-side": "front",
                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
                style: {
                  backfaceVisibility: "hidden",
                  WebkitBackfaceVisibility: "hidden"
                },
                children: front
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                "data-hex-flashcard-face": true,
                "data-side": "back",
                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
                style: {
                  backfaceVisibility: "hidden",
                  WebkitBackfaceVisibility: "hidden",
                  transform: "rotateY(180deg)"
                },
                children: back
              }
            )
          ]
        }
      )
    }
  );
}
function shuffleArray(arr) {
  const out = arr.slice();
  for (let i = out.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [out[i], out[j]] = [out[j], out[i]];
  }
  return out;
}
function Deck({
  cards,
  shuffle = false,
  ratingSlot,
  onCardChange,
  cardWidth = 360,
  cardHeight = 240,
  className,
  ...rest
}) {
  const order = React2.useMemo(() => shuffle ? shuffleArray(cards) : cards.slice(), [cards, shuffle]);
  const [index, setIndex] = React2.useState(0);
  const [flipped, setFlipped] = React2.useState(false);
  const onCardChangeRef = React2.useRef(onCardChange);
  onCardChangeRef.current = onCardChange;
  React2.useEffect(() => {
    setIndex(0);
    setFlipped(false);
  }, [order]);
  const total = order.length;
  const currentCard = order[index];
  const goPrev = React2.useCallback(() => {
    if (index === 0) return;
    const next = index - 1;
    setIndex(next);
    setFlipped(false);
    const card = order[next];
    if (card) onCardChangeRef.current?.(next, card);
  }, [index, order]);
  const goNext = React2.useCallback(() => {
    if (index >= total - 1) return;
    const next = index + 1;
    setIndex(next);
    setFlipped(false);
    const card = order[next];
    if (card) onCardChangeRef.current?.(next, card);
  }, [index, order, total]);
  if (total === 0) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ...rest,
        "data-hex-deck": true,
        "data-empty": "true",
        className: cn("rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", className),
        children: "No cards in this deck."
      }
    );
  }
  const progressPercent = total > 0 ? (index + 1) / total * 100 : 0;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...rest,
      "data-hex-deck": true,
      "data-index": index,
      "data-total": total,
      className: cn("inline-flex flex-col items-center gap-4", className),
      children: [
        currentCard ? /* @__PURE__ */ jsx(
          Flashcard,
          {
            front: currentCard.front,
            back: currentCard.back,
            flipped,
            onFlipChange: setFlipped,
            width: cardWidth,
            height: cardHeight
          },
          currentCard.id
        ) : null,
        /* @__PURE__ */ jsxs("div", { "data-hex-deck-controls": true, className: "flex w-full items-center gap-3", style: { width: cardWidth }, children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              "data-hex-deck-prev": true,
              disabled: index === 0,
              onClick: goPrev,
              "aria-label": `Previous card. Currently ${index + 1} of ${total}.`,
              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] hover:bg-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
              children: "Prev"
            }
          ),
          /* @__PURE__ */ jsxs("div", { "data-hex-deck-progress": true, className: "flex-1", "aria-hidden": "true", children: [
            /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
              "div",
              {
                className: "h-full bg-primary transition-all",
                style: { width: `${progressPercent}%` }
              }
            ) }),
            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-center text-xs text-muted-foreground", children: [
              index + 1,
              " / ",
              total
            ] })
          ] }),
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              "data-hex-deck-next": true,
              disabled: index >= total - 1,
              onClick: goNext,
              "aria-label": `Next card. Currently ${index + 1} of ${total}.`,
              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-all duration-[var(--duration-normal,200ms)] ease-out active:scale-[0.98] hover:bg-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
              children: "Next"
            }
          )
        ] }),
        ratingSlot && currentCard ? /* @__PURE__ */ jsx("div", { "data-hex-deck-rating-slot": true, className: "w-full", style: { width: cardWidth }, children: ratingSlot(currentCard) }) : null
      ]
    }
  );
}

export { Deck };
//# sourceMappingURL=deck.js.map
//# sourceMappingURL=deck.js.map