import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { useRef as S, useState as d, useEffect as R, useCallback as y } from "react";
import { motion as h, AnimatePresence as A } from "framer-motion";
import { Repeat as _, SkipBack as z, Pause as B, Play as q, SkipForward as U, VolumeX as X, Volume1 as J, Volume2 as K } from "lucide-react";
import { u as Q } from "./index-Bk6WqXgW.mjs";
function Y({
  url: l
}) {
  const o = S(null), [i, c] = d(!1), [s, p] = d(!0), [w, g] = d(0), [f, u] = d(0), [m, N] = d(1), [k, x] = d(!1), [b, L] = d(!1), [C, v] = d(null);
  R(() => {
    const r = o.current;
    if (!r) return;
    p(!0), v(null);
    const a = () => {
      isNaN(r.currentTime) || g(r.currentTime);
    }, n = () => {
      !isNaN(r.duration) && isFinite(r.duration) && u(r.duration);
    }, V = () => {
      p(!1), n();
    }, F = () => p(!0), W = () => {
      p(!1), c(!0);
    }, $ = () => c(!0), O = () => c(!1), D = () => c(!1), H = () => {
      v("音频加载失败"), p(!1);
    };
    return r.addEventListener("timeupdate", a), r.addEventListener("loadedmetadata", n), r.addEventListener("durationchange", n), r.addEventListener("canplay", V), r.addEventListener("waiting", F), r.addEventListener("playing", W), r.addEventListener("play", $), r.addEventListener("pause", O), r.addEventListener("ended", D), r.addEventListener("error", H), r.readyState >= 3 ? (p(!1), n()) : r.readyState >= 1 && n(), () => {
      r.removeEventListener("timeupdate", a), r.removeEventListener("loadedmetadata", n), r.removeEventListener("durationchange", n), r.removeEventListener("canplay", V), r.removeEventListener("waiting", F), r.removeEventListener("playing", W), r.removeEventListener("play", $), r.removeEventListener("pause", O), r.removeEventListener("ended", D), r.removeEventListener("error", H);
    };
  }, [l]);
  const G = y(() => {
    const r = o.current;
    r && (r.paused ? r.play().catch(() => {
    }) : r.pause());
  }, []), E = y((r) => {
    const a = o.current;
    a && (a.currentTime = r, g(r));
  }, []), T = y(
    (r) => {
      const a = o.current;
      a && (a.currentTime = Math.max(
        0,
        Math.min(a.currentTime + r, a.duration || 1 / 0)
      ));
    },
    []
  ), M = y((r) => {
    const a = o.current;
    if (!a) return;
    const n = Math.max(0, Math.min(1, r));
    a.volume = n, N(n), n > 0 && (a.muted = !1, x(!1));
  }, []), P = y(() => {
    const r = o.current;
    r && (r.muted = !r.muted, x(r.muted));
  }, []), j = y(() => {
    const r = o.current;
    if (!r) return;
    const a = !r.loop;
    r.loop = a, L(a);
  }, []), I = y((r) => {
    if (!isFinite(r) || isNaN(r) || r < 0) return "0:00";
    const a = Math.floor(r / 60), n = Math.floor(r % 60);
    return `${a}:${n.toString().padStart(2, "0")}`;
  }, []);
  return {
    audioRef: o,
    isPlaying: i,
    isLoading: s,
    isLoop: b,
    currentTime: w,
    duration: f,
    volume: m,
    isMuted: k,
    error: C,
    togglePlay: G,
    seek: E,
    skip: T,
    setVolume: M,
    toggleMute: P,
    toggleLoop: j,
    formatTime: I
  };
}
const Z = ({ text: l, className: o = "", style: i }) => {
  const c = S(null), s = S(null), [p, w] = d(!1), [g, f] = d(0);
  R(() => {
    const k = () => {
      const b = c.current, L = s.current;
      if (!b || !L) return;
      const C = b.clientWidth, v = L.scrollWidth;
      w(v > C), f(v);
    };
    k();
    const x = new ResizeObserver(k);
    return c.current && x.observe(c.current), () => x.disconnect();
  }, [l]);
  const u = 60, m = g + u, N = m / 40;
  return /* @__PURE__ */ t(
    "div",
    {
      ref: c,
      className: `rfp-overflow-hidden rfp-whitespace-nowrap ${o}`,
      style: i,
      children: [
        p ? /* @__PURE__ */ t(
          h.div,
          {
            className: "rfp-inline-flex rfp-whitespace-nowrap",
            animate: { x: [0, -m] },
            transition: { duration: N, repeat: 1 / 0, ease: "linear", repeatDelay: 1.5 },
            children: [
              /* @__PURE__ */ e("span", { children: l }),
              /* @__PURE__ */ e("span", { style: { width: u }, className: "rfp-inline-block" }),
              /* @__PURE__ */ e("span", { children: l })
            ]
          }
        ) : null,
        /* @__PURE__ */ e(
          "div",
          {
            ref: s,
            className: "rfp-whitespace-nowrap",
            style: p ? { position: "absolute", visibility: "hidden", pointerEvents: "none" } : void 0,
            children: l
          }
        )
      ]
    }
  );
}, ee = ({ isPlaying: l }) => /* @__PURE__ */ e(
  h.div,
  {
    className: "rfp-absolute",
    style: {
      top: "-6px",
      right: "2px",
      width: "100px",
      height: "120px",
      transformOrigin: "76px 16px",
      zIndex: 5
    },
    animate: { rotate: l ? 16 : 0 },
    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
    children: /* @__PURE__ */ t(
      "svg",
      {
        width: "100",
        height: "120",
        viewBox: "0 0 100 120",
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg",
        children: [
          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "13", fill: "rgba(0,0,0,0.3)" }),
          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "11", fill: "url(#baseGrad)" }),
          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "6", fill: "url(#baseInnerGrad)" }),
          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "2.5", fill: "#222", stroke: "#555", strokeWidth: "0.5" }),
          /* @__PURE__ */ e(
            "path",
            {
              d: "M74 22 L56 88",
              stroke: "url(#armGrad)",
              strokeWidth: "3.5",
              strokeLinecap: "round"
            }
          ),
          /* @__PURE__ */ e(
            "path",
            {
              d: "M74.8 22 L56.8 88",
              stroke: "rgba(255,255,255,0.06)",
              strokeWidth: "1",
              strokeLinecap: "round"
            }
          ),
          /* @__PURE__ */ e("rect", { x: "50", y: "86", width: "12", height: "7", rx: "1.5", fill: "url(#headGrad)" }),
          /* @__PURE__ */ e("rect", { x: "52.5", y: "92", width: "7", height: "9", rx: "1", fill: "url(#cartridgeGrad)" }),
          /* @__PURE__ */ e("line", { x1: "56", y1: "101", x2: "56", y2: "105", stroke: "#bbb", strokeWidth: "1.2", strokeLinecap: "round" }),
          /* @__PURE__ */ e("circle", { cx: "56", cy: "105.5", r: "0.8", fill: "#ddd" }),
          /* @__PURE__ */ t("defs", { children: [
            /* @__PURE__ */ t("radialGradient", { id: "baseGrad", cx: "40%", cy: "35%", children: [
              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#1a1a1a" })
            ] }),
            /* @__PURE__ */ t("radialGradient", { id: "baseInnerGrad", cx: "40%", cy: "35%", children: [
              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#666" }),
              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
            ] }),
            /* @__PURE__ */ t("linearGradient", { id: "armGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
              /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#444" }),
              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
            ] }),
            /* @__PURE__ */ t("linearGradient", { id: "headGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
            ] }),
            /* @__PURE__ */ t("linearGradient", { id: "cartridgeGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#444" }),
              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#222" })
            ] })
          ] })
        ]
      }
    )
  }
), se = ({ url: l, fileName: o }) => {
  const i = Q(), {
    audioRef: c,
    isPlaying: s,
    isLoading: p,
    isLoop: w,
    currentTime: g,
    duration: f,
    volume: u,
    isMuted: m,
    error: N,
    togglePlay: k,
    seek: x,
    skip: b,
    setVolume: L,
    toggleMute: C,
    toggleLoop: v,
    formatTime: G
  } = Y({ url: l }), [E, T] = d(!1), M = S(null), P = S(), j = f > 0 ? g / f : 0;
  R(() => {
    const n = (V) => {
      M.current && !M.current.contains(V.target) && T(!1);
    };
    return E && document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
  }, [E]);
  const I = () => {
    clearTimeout(P.current), T(!0);
  }, r = () => {
    P.current = setTimeout(() => T(!1), 300);
  }, a = m || u === 0 ? X : u < 0.5 ? J : K;
  return N ? /* @__PURE__ */ e("div", { className: "rfp-flex rfp-items-center rfp-justify-center rfp-w-full rfp-h-full", children: /* @__PURE__ */ e("div", { className: "rfp-text-fg-secondary rfp-text-center", children: /* @__PURE__ */ e("p", { className: "rfp-text-lg", children: N }) }) }) : /* @__PURE__ */ t("div", { className: "rfp-flex rfp-flex-col rfp-items-center rfp-justify-center rfp-w-full rfp-h-full rfp-p-4 md:rfp-p-8 rfp-gap-5 md:rfp-gap-8 rfp-select-none", children: [
    /* @__PURE__ */ t("div", { className: "rfp-relative", style: { width: "260px", height: "240px" }, children: [
      /* @__PURE__ */ e(
        h.div,
        {
          className: "rfp-absolute rfp-rounded-full",
          style: {
            width: "220px",
            height: "220px",
            top: "18px",
            left: "8px",
            background: "radial-gradient(circle, rgba(129,140,248,0.12) 0%, transparent 70%)"
          },
          animate: s ? { scale: [1, 1.08, 1], opacity: [0.5, 1, 0.5] } : { scale: 1, opacity: 0.2 },
          transition: s ? { duration: 3, repeat: 1 / 0, ease: "easeInOut" } : { duration: 0.5 }
        }
      ),
      /* @__PURE__ */ t(
        "div",
        {
          className: "rfp-absolute rfp-rounded-full rfp-overflow-hidden",
          style: {
            width: "200px",
            height: "200px",
            top: "28px",
            left: "18px",
            background: `
              radial-gradient(circle at center, transparent 95%, rgba(30,30,30,0.8) 95.5%, #111 97%),
              radial-gradient(circle at center, transparent 38%, rgba(50,50,50,0.5) 38.15%, transparent 38.4%),
              radial-gradient(circle at center, transparent 45%, rgba(50,50,50,0.3) 45.15%, transparent 45.4%),
              radial-gradient(circle at center, transparent 52%, rgba(50,50,50,0.5) 52.15%, transparent 52.4%),
              radial-gradient(circle at center, transparent 59%, rgba(50,50,50,0.3) 59.15%, transparent 59.4%),
              radial-gradient(circle at center, transparent 66%, rgba(50,50,50,0.5) 66.15%, transparent 66.4%),
              radial-gradient(circle at center, transparent 73%, rgba(50,50,50,0.3) 73.15%, transparent 73.4%),
              radial-gradient(circle at center, transparent 80%, rgba(50,50,50,0.4) 80.15%, transparent 80.4%),
              radial-gradient(circle at center, transparent 87%, rgba(50,50,50,0.3) 87.15%, transparent 87.4%),
              conic-gradient(from 0deg, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c, #212121, #1a1a1a, #252525, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c)
            `,
            boxShadow: s ? "0 0 36px rgba(129,140,248,0.1), 0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)" : "0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)",
            animation: "rfp-vinyl-spin 8s linear infinite",
            animationPlayState: s ? "running" : "paused"
          },
          children: [
            /* @__PURE__ */ t(
              "div",
              {
                className: "rfp-absolute rfp-rounded-full",
                style: {
                  width: "34%",
                  height: "34%",
                  top: "33%",
                  left: "33%",
                  background: "radial-gradient(circle at 40% 38%, #818cf8, #6366f1, #4f46e5, #4338ca)",
                  boxShadow: "inset 0 1px 3px rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.3)"
                },
                children: [
                  /* @__PURE__ */ e(
                    "div",
                    {
                      className: "rfp-absolute rfp-inset-0 rfp-rounded-full rfp-opacity-20",
                      style: {
                        background: `
                  radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.3) 31%, transparent 32%),
                  radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.2) 51%, transparent 52%),
                  radial-gradient(circle at center, transparent 70%, rgba(0,0,0,0.3) 71%, transparent 72%),
                  radial-gradient(circle at center, transparent 88%, rgba(0,0,0,0.2) 89%, transparent 90%)
                `
                      }
                    }
                  ),
                  /* @__PURE__ */ e(
                    "div",
                    {
                      className: "rfp-absolute rfp-rounded-full",
                      style: {
                        width: "14%",
                        height: "14%",
                        top: "43%",
                        left: "43%",
                        background: "radial-gradient(circle at 40% 40%, #333, #0d0d0d)",
                        boxShadow: "inset 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.5)"
                      }
                    }
                  )
                ]
              }
            ),
            p && /* @__PURE__ */ e(
              h.div,
              {
                className: "rfp-absolute rfp-inset-0 rfp-rounded-full",
                style: { border: "2px solid rgba(129,140,248,0.3)" },
                animate: { scale: [1, 1.02, 1], opacity: [0.3, 0.6, 0.3] },
                transition: { duration: 1.5, repeat: 1 / 0 }
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ e(ee, { isPlaying: s })
    ] }),
    /* @__PURE__ */ t("div", { className: "rfp-text-center rfp-max-w-sm md:rfp-max-w-md rfp-px-4", children: [
      /* @__PURE__ */ e(
        Z,
        {
          text: o,
          className: "rfp-text-lg md:rfp-text-xl rfp-font-medium rfp-mb-1 rfp-text-fg-primary"
        }
      ),
      /* @__PURE__ */ e("p", { className: "rfp-text-xs rfp-tracking-widest rfp-uppercase rfp-text-accent", children: "Audio" })
    ] }),
    /* @__PURE__ */ t(
      "div",
      {
        className: "rfp-w-full rfp-max-w-sm md:rfp-max-w-md rfp-rounded-2xl rfp-p-4 md:rfp-p-6 rfp-border rfp-bg-surface-1 rfp-border-line-weak",
        style: { backdropFilter: "blur(16px)" },
        children: [
          /* @__PURE__ */ t("div", { className: "rfp-mb-5", children: [
            /* @__PURE__ */ t("div", { className: "rfp-relative rfp-h-4 rfp-flex rfp-items-center", children: [
              /* @__PURE__ */ e("div", { className: "rfp-absolute rfp-w-full rfp-h-[5px] rfp-rounded-full rfp-bg-surface-2" }),
              /* @__PURE__ */ e(
                "div",
                {
                  className: "rfp-absolute rfp-h-[5px] rfp-rounded-full rfp-pointer-events-none",
                  style: {
                    width: `${j * 100}%`,
                    background: "linear-gradient(90deg, var(--fp-accent), var(--fp-accent-hover))",
                    boxShadow: s ? "0 0 8px rgba(129,140,248,0.4)" : "none",
                    transition: "width 0.1s linear"
                  }
                }
              ),
              /* @__PURE__ */ e(
                "input",
                {
                  type: "range",
                  min: "0",
                  max: f > 0 ? f : g || 100,
                  step: "any",
                  value: g,
                  onChange: (n) => x(parseFloat(n.target.value)),
                  disabled: f <= 0,
                  "aria-label": i("audio.aria.progress"),
                  className: "audio-slider rfp-absolute rfp-w-full"
                }
              )
            ] }),
            /* @__PURE__ */ t("div", { className: "rfp-flex rfp-justify-between rfp-text-xs rfp-mt-2.5 rfp-text-fg-tertiary", children: [
              /* @__PURE__ */ e("span", { style: { fontVariantNumeric: "tabular-nums" }, children: G(g) }),
              /* @__PURE__ */ e("span", { style: { fontVariantNumeric: "tabular-nums" }, children: f > 0 ? G(f) : "--:--" })
            ] })
          ] }),
          /* @__PURE__ */ t("div", { className: "rfp-flex rfp-items-center rfp-justify-center rfp-gap-3", children: [
            /* @__PURE__ */ e(
              h.button,
              {
                onClick: v,
                whileHover: { scale: 1.1 },
                whileTap: { scale: 0.92 },
                "aria-label": i(w ? "audio.aria.loop_off" : "audio.aria.loop_on"),
                className: `rfp-w-9 rfp-h-9 rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors ${w ? "rfp-bg-accent-soft rfp-text-accent" : "rfp-bg-surface-2 rfp-text-fg-tertiary"}`,
                children: /* @__PURE__ */ e(_, { className: "rfp-w-4 rfp-h-4" })
              }
            ),
            /* @__PURE__ */ e(
              h.button,
              {
                onClick: () => b(-10),
                whileHover: { scale: 1.1 },
                whileTap: { scale: 0.92 },
                "aria-label": i("audio.aria.backward_10"),
                className: "rfp-w-10 rfp-h-10 rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary",
                children: /* @__PURE__ */ e(z, { className: "rfp-w-[18px] rfp-h-[18px]" })
              }
            ),
            /* @__PURE__ */ e(
              h.button,
              {
                onClick: k,
                whileHover: { scale: 1.06 },
                whileTap: { scale: 0.94 },
                "aria-label": i(s ? "audio.aria.pause" : "audio.aria.play"),
                className: "rfp-w-14 rfp-h-14 rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center",
                style: {
                  background: "linear-gradient(135deg, var(--fp-accent-hover), var(--fp-accent))",
                  color: "#fff",
                  boxShadow: "0 4px 20px rgba(99,102,241,0.35)"
                },
                children: s ? /* @__PURE__ */ e(B, { className: "rfp-w-6 rfp-h-6" }) : /* @__PURE__ */ e(q, { className: "rfp-w-6 rfp-h-6 rfp-ml-0.5" })
              }
            ),
            /* @__PURE__ */ e(
              h.button,
              {
                onClick: () => b(10),
                whileHover: { scale: 1.1 },
                whileTap: { scale: 0.92 },
                "aria-label": i("audio.aria.forward_10"),
                className: "rfp-w-10 rfp-h-10 rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary",
                children: /* @__PURE__ */ e(U, { className: "rfp-w-[18px] rfp-h-[18px]" })
              }
            ),
            /* @__PURE__ */ t(
              "div",
              {
                ref: M,
                className: "rfp-relative",
                onMouseEnter: I,
                onMouseLeave: r,
                children: [
                  /* @__PURE__ */ e(
                    h.button,
                    {
                      onClick: C,
                      whileHover: { scale: 1.1 },
                      whileTap: { scale: 0.92 },
                      "aria-label": i(m ? "audio.aria.unmute" : "audio.aria.mute"),
                      className: `rfp-w-9 rfp-h-9 rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors ${E ? "rfp-bg-accent-soft rfp-text-accent" : "rfp-bg-surface-2 rfp-text-fg-secondary"}`,
                      children: /* @__PURE__ */ e(a, { className: "rfp-w-4 rfp-h-4" })
                    }
                  ),
                  /* @__PURE__ */ e(A, { children: E && /* @__PURE__ */ e(
                    h.div,
                    {
                      initial: { opacity: 0, scale: 0.95 },
                      animate: { opacity: 1, scale: 1 },
                      exit: { opacity: 0, scale: 0.95 },
                      transition: { duration: 0.12 },
                      className: "rfp-absolute rfp-bottom-full rfp-mb-2 rfp-rounded-xl rfp-p-3 rfp-border rfp-bg-surface-3 rfp-border-line",
                      style: {
                        left: "50%",
                        marginLeft: "-27px",
                        backdropFilter: "blur(16px)"
                      },
                      onMouseEnter: I,
                      onMouseLeave: r,
                      children: /* @__PURE__ */ t("div", { className: "rfp-flex rfp-flex-col rfp-items-center rfp-gap-2", style: { height: "100px" }, children: [
                        /* @__PURE__ */ t("div", { className: "rfp-relative rfp-flex rfp-items-center rfp-justify-center", style: { width: "24px", height: "80px" }, children: [
                          /* @__PURE__ */ e(
                            "div",
                            {
                              className: "rfp-absolute rfp-rounded-full rfp-bg-surface-2",
                              style: { width: "3px", height: "100%" }
                            }
                          ),
                          /* @__PURE__ */ e(
                            "div",
                            {
                              className: "rfp-absolute rfp-bottom-0 rfp-rounded-full rfp-pointer-events-none",
                              style: {
                                width: "3px",
                                height: `${(m ? 0 : u) * 100}%`,
                                background: "var(--fp-accent-hover)",
                                transition: "height 0.1s linear"
                              }
                            }
                          ),
                          /* @__PURE__ */ e(
                            "input",
                            {
                              type: "range",
                              min: "0",
                              max: "1",
                              step: "0.01",
                              value: m ? 0 : u,
                              onChange: (n) => L(parseFloat(n.target.value)),
                              "aria-label": i("audio.aria.volume"),
                              className: "volume-slider-vertical rfp-absolute",
                              style: {
                                width: "80px",
                                height: "24px",
                                transform: "rotate(-90deg)",
                                transformOrigin: "center center"
                              }
                            }
                          )
                        ] }),
                        /* @__PURE__ */ e("span", { className: "rfp-text-[10px] rfp-tabular-nums rfp-text-fg-tertiary", children: Math.round((m ? 0 : u) * 100) })
                      ] })
                    }
                  ) })
                ]
              }
            )
          ] })
        ]
      }
    ),
    /* @__PURE__ */ e("audio", { ref: c, src: l, className: "rfp-hidden" })
  ] });
};
export {
  se as AudioRenderer
};
//# sourceMappingURL=index-CqpRBMiE.mjs.map
