/**
 * OmniMotion — 极光按钮 / AuroraButton (React 18+ · 纯 CSS 版本)
 * 用法: <AuroraButton size="md" onClick={handleStart}>立即开始</AuroraButton>
 */
import { useEffect } from "react";

const KEYFRAMES = `
@keyframes mk-aurora-sweep {
  0%   { transform: translate3d(-120%, 0, 0) skewX(-18deg); opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: translate3d(220%, 0, 0) skewX(-18deg); opacity: 0; }
}
.mk-aurora { position: relative; overflow: hidden; isolation: isolate; }
.mk-aurora__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.42) 50%, transparent 66%);
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
}
.mk-aurora:hover .mk-aurora__glow { animation: mk-aurora-sweep 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .mk-aurora__glow { animation: none !important; } }
`;

const VARIANTS = {
  solid: { background: "var(--mk-primary)", color: "var(--mk-primary-foreground)" },
  outline: { background: "transparent", color: "var(--mk-primary)" },
};

const SIZES = {
  sm: { height: 36, fontSize: 13 },
  md: { height: 44, fontSize: 15 },
  lg: { height: 52, fontSize: 16 },
};

export default function AuroraButton({
  variant = "solid", size = "md", loading = false, disabled = false, onClick, children,
}) {
  useEffect(() => {
    if (document.getElementById("mk-aurora-css")) return;
    const tag = document.createElement("style");
    tag.id = "mk-aurora-css";
    tag.textContent = KEYFRAMES;
    document.head.appendChild(tag);
  }, []);

  const tone = VARIANTS[variant] || VARIANTS.solid;
  const box = SIZES[size] || SIZES.md;
  const inert = loading || disabled;

  return (
    <button type="button" className="mk-aurora" disabled={inert} onClick={onClick}
      aria-busy={loading || undefined}
      style={{ position: "relative", display: "inline-flex", alignItems: "center",
        justifyContent: "center", gap: 8, height: box.height, padding: "0 20px",
        fontSize: box.fontSize, fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap",
        border: "1px solid transparent", borderRadius: 8,
        cursor: inert ? "not-allowed" : "pointer", opacity: inert ? 0.55 : 1, ...tone }}>
      <span className="mk-aurora__glow" aria-hidden="true" />
      <span style={{ position: "relative", zIndex: 1 }}>{loading ? "处理中…" : children}</span>
    </button>
  );
}