// KASHA website — 성공 이벤트 팝업 애니메이션
// 전역 호출: window.KASHASuccess.show({ title, message, duration })
// 로그인·회원가입·2단계 인증·예약 성공 등에서 호출하면 체크 애니메이션 팝업이 떠요.
(function () {
  var listener = null;
  window.KASHASuccess = {
    _bind: function (fn) { listener = fn; },
    show: function (opts) { if (listener) listener(opts || {}); },
  };
})();

function SuccessHost() {
  const [state, setState] = React.useState(null);
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    window.KASHASuccess._bind((opts) => { setState(opts); setShow(true); });
  }, []);

  React.useEffect(() => {
    if (!show) return;
    const dur = (state && state.duration) || 2200;
    const t = setTimeout(() => setShow(false), dur);
    return () => clearTimeout(t);
  }, [show, state]);

  return <SuccessOverlay open={show} title={state && state.title} message={state && state.message} onClose={() => setShow(false)} />;
}

function SuccessOverlay({ open, title, message, onClose }) {
  // 컨페티 조각 (transform+opacity만 애니메이트)
  const confetti = [
    { x: -120, y: -40, c: "var(--blue-500)", d: 0 }, { x: 120, y: -50, c: "var(--green-500)", d: 0.05 },
    { x: -90, y: 60, c: "var(--yellow-500)", d: 0.1 }, { x: 100, y: 70, c: "var(--blue-300)", d: 0.08 },
    { x: -150, y: 30, c: "var(--green-500)", d: 0.12 }, { x: 150, y: 10, c: "var(--yellow-500)", d: 0.04 },
    { x: 0, y: -110, c: "var(--blue-500)", d: 0.14 }, { x: -40, y: -90, c: "var(--green-500)", d: 0.16 },
    { x: 50, y: -95, c: "var(--yellow-500)", d: 0.06 },
  ];

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 2200, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: open ? "auto" : "none" }}>
      <style>{`
        @keyframes kashaSuccBg { from { opacity: 0 } to { opacity: 1 } }
        @keyframes kashaSuccPop { 0% { transform: translateY(14px) scale(0.92); opacity: 0 } 60% { transform: translateY(0) scale(1.02); opacity: 1 } 100% { transform: translateY(0) scale(1); opacity: 1 } }
        @keyframes kashaRing { 0% { transform: scale(0.4); opacity: 0 } 50% { opacity: 0.35 } 100% { transform: scale(1.6); opacity: 0 } }
        @keyframes kashaCheckDraw { from { stroke-dashoffset: 48 } to { stroke-dashoffset: 0 } }
        @keyframes kashaConf { 0% { transform: translate(0,0) scale(0.4); opacity: 0 } 25% { opacity: 1 } 100% { transform: translate(var(--cx), var(--cy)) scale(1); opacity: 0 } }
      `}</style>

      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(23,23,28,0.45)", backdropFilter: "blur(3px)", animation: open ? "kashaSuccBg var(--dur-base) var(--ease-out)" : "none", opacity: open ? 1 : 0, transition: open ? "none" : "opacity var(--dur-fast) var(--ease-out)" }} />

      {open && (
        <div style={{ position: "relative", width: 320, maxWidth: "calc(100vw - 48px)", background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xl)", padding: "40px 28px 30px", textAlign: "center", animation: "kashaSuccPop var(--dur-sheet) var(--ease-ios)" }}>
          {/* 체크 + 링 + 컨페티 */}
          <div style={{ position: "relative", width: 88, height: 88, margin: "0 auto 20px" }}>
            <span style={{ position: "absolute", inset: 0, borderRadius: "50%", border: "3px solid var(--green-500)", animation: "kashaRing 1s var(--ease-out) 0.1s" }} />
            <span style={{ position: "absolute", inset: 0, borderRadius: "50%", background: "var(--green-50)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
                <path d="M5 13l4 4L19 7" stroke="var(--green-500)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"
                  style={{ strokeDasharray: 48, strokeDashoffset: 48, animation: "kashaCheckDraw 0.5s var(--ease-out) 0.25s forwards" }} />
              </svg>
            </span>
            {confetti.map((p, i) => (
              <span key={i} style={{ position: "absolute", left: "50%", top: "50%", width: 8, height: 8, marginLeft: -4, marginTop: -4, borderRadius: i % 2 ? "50%" : 2, background: p.c, "--cx": p.x + "px", "--cy": p.y + "px", animation: `kashaConf 1.1s var(--ease-out) ${0.2 + p.d}s` }} />
            ))}
          </div>

          <h2 style={{ fontSize: "var(--text-title-3)", letterSpacing: "var(--tracking-title)" }}>{title || "완료되었어요"}</h2>
          {message && <p style={{ marginTop: 10, color: "var(--text-secondary)", fontSize: 14, lineHeight: "var(--leading-relaxed)" }}>{message}</p>}
        </div>
      )}
    </div>
  );
}
window.SuccessHost = SuccessHost;