// Liquid CTA — SVG goo filter merges the pill with orbiting blobs.
// On hover the blobs grow and migrate outward; on click they "burst" and pull back in.

const { useState, useRef, useEffect } = React;

function LiquidButton({ label = "Quero entrar no grupo", onClick, disabled, loading, sublabel }) {
  const [hover, setHover] = useState(false);
  const [pressed, setPressed] = useState(false);
  const [burst, setBurst] = useState(false);
  const ref = useRef(null);
  const [coords, setCoords] = useState({ x: 0.5, y: 0.5 });

  const onMove = (e) => {
    const r = ref.current?.getBoundingClientRect();
    if (!r) return;
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    setCoords({ x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) });
  };

  const handleClick = (e) => {
    if (disabled || loading) return;
    setBurst(true);
    setTimeout(() => setBurst(false), 700);
    onClick?.(e);
  };

  // Magnetic translate offset from cursor (very subtle)
  const tx = (coords.x - 0.5) * 8;
  const ty = (coords.y - 0.5) * 6;

  return (
    <div
      className={"liquid " + (hover ? "is-hover " : "") + (pressed ? "is-pressed " : "") + (burst ? "is-burst " : "") + (loading ? "is-loading " : "") + (disabled ? "is-disabled" : "")}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseMove={onMove}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      ref={ref}
    >
      {/* SVG defs — goo filter that merges nearby alpha shapes into a single fluid */}
      <svg className="liquid-defs" aria-hidden="true">
        <defs>
          <filter id="liquid-goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="b" />
            <feColorMatrix in="b" mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10" result="g" />
            <feComposite in="SourceGraphic" in2="g" operator="atop" />
          </filter>
        </defs>
      </svg>

      <button
        type="button"
        className="liquid-btn"
        disabled={disabled || loading}
        onClick={handleClick}
        style={{ transform: hover && !disabled ? `translate(${tx}px, ${ty}px) scale(1.03)` : "scale(1)" }}
      >
        {/* the goo group: pill + 4 orbiting blobs */}
        <span className="liquid-goo" aria-hidden="true">
          <span className="blob blob-pill"></span>
          <span className="blob blob-a"></span>
          <span className="blob blob-b"></span>
          <span className="blob blob-c"></span>
          <span className="blob blob-d"></span>
        </span>

        {/* foreground content — sits above the goo */}
        <span className="liquid-label">
          {loading ? (
            <>
              <span className="liquid-spinner" />
              <span>Conectando ao grupo…</span>
            </>
          ) : (
            <>
              <span className="wa-glyph" aria-hidden="true">
                <img src="/networking/wa-logo.png" alt="" width="22" height="22" style={{ objectFit: "contain", display: "block", filter: "invert(1)", opacity: 0.9 }} />
              </span>
              <span className="liquid-text">{label}</span>
              <span className="liquid-arrow" aria-hidden="true">→</span>
            </>
          )}
        </span>
      </button>

      {sublabel && <span className="liquid-sub">{sublabel}</span>}

      <style>{`
        .liquid { position: relative; width: 100%; }
        .liquid-defs { position: absolute; width: 0; height: 0; }

        .liquid-btn {
          position: relative;
          width: 100%;
          height: 64px;
          padding: 0;
          border: 0;
          background: transparent;
          color: #ffffff;
          cursor: pointer;
          font: inherit;
          isolation: isolate;
          transition: transform .25s cubic-bezier(.2,.8,.2,1);
          -webkit-tap-highlight-color: transparent;
        }
        .liquid-btn:disabled { cursor: not-allowed; opacity: .55; }

        /* the goo group — filter applies to all child blobs */
        .liquid-goo {
          position: absolute;
          inset: 0;
          filter: url(#liquid-goo);
          z-index: 1;
          pointer-events: none;
        }
        .blob {
          position: absolute;
          background: #1e1e1e;
          border-radius: 999px;
        }
        .blob-pill {
          inset: 0;
          border-radius: 999px;
        }
        /* The four satellites — sit just outside the pill, get pulled inward
           by the goo when at rest, and migrate outward + grow on hover. */
        .blob-a, .blob-b, .blob-c, .blob-d {
          width: 28px; height: 28px;
          top: 50%; left: 50%;
          transition: transform .65s cubic-bezier(.34,1.56,.64,1), width .5s ease, height .5s ease, opacity .4s ease;
          opacity: .9;
        }
        .blob-a { transform: translate(-150%, -50%); animation: orbA 7s ease-in-out infinite; }
        .blob-b { transform: translate( 50%, -50%); animation: orbB 8s ease-in-out infinite; }
        .blob-c { transform: translate(-90%, -50%); width: 22px; height: 22px; animation: orbC 6s ease-in-out infinite; }
        .blob-d { transform: translate( 0%, -50%); width: 22px; height: 22px; animation: orbD 9s ease-in-out infinite; }

        @keyframes orbA {
          0%,100% { transform: translate(-150%, -52%); }
          50%     { transform: translate(-165%, -45%); }
        }
        @keyframes orbB {
          0%,100% { transform: translate(50%, -50%); }
          50%     { transform: translate(65%, -55%); }
        }
        @keyframes orbC {
          0%,100% { transform: translate(-90%, -75%); }
          50%     { transform: translate(-70%, -25%); }
        }
        @keyframes orbD {
          0%,100% { transform: translate(0%, -25%); }
          50%     { transform: translate(-20%, -75%); }
        }

        /* hover — blobs swell and drift further out, the pill stays */
        .liquid.is-hover .blob-a { transform: translate(-185%, -55%); width: 36px; height: 36px; animation-duration: 3.2s; }
        .liquid.is-hover .blob-b { transform: translate( 90%, -45%); width: 36px; height: 36px; animation-duration: 3.6s; }
        .liquid.is-hover .blob-c { transform: translate(-55%, -110%); width: 30px; height: 30px; animation-duration: 2.8s; }
        .liquid.is-hover .blob-d { transform: translate(-35%, 10%); width: 30px; height: 30px; animation-duration: 3.4s; }

        /* pressed — collapse inward */
        .liquid.is-pressed .blob-a,
        .liquid.is-pressed .blob-b,
        .liquid.is-pressed .blob-c,
        .liquid.is-pressed .blob-d {
          transform: translate(-50%, -50%);
          width: 18px; height: 18px;
        }

        /* burst — flash outward, then back via the transition */
        .liquid.is-burst .blob-a { transform: translate(-240%, -65%); width: 40px; height: 40px; }
        .liquid.is-burst .blob-b { transform: translate( 140%, -40%); width: 40px; height: 40px; }
        .liquid.is-burst .blob-c { transform: translate(-30%, -160%); width: 34px; height: 34px; }
        .liquid.is-burst .blob-d { transform: translate(-70%, 60%); width: 34px; height: 34px; }

        /* drop shadow / glow on the goo */
        .liquid-goo::after {
          content: "";
          position: absolute; inset: 0;
          border-radius: 999px;
          box-shadow:
            0 0 0 1px rgba(255,255,255,0.18) inset,
            0 2px 12px rgba(0,0,0,0.4);
          pointer-events: none;
          transition: box-shadow .35s cubic-bezier(.2,.8,.2,1);
        }
        .liquid.is-hover .liquid-goo::after {
          box-shadow:
            0 0 0 1px rgba(255,255,255,0.28) inset,
            0 14px 45px 0px rgba(255,255,255,0.18),
            0 2px 12px rgba(0,0,0,0.4);
        }

        .liquid-label {
          position: relative;
          z-index: 2;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          height: 100%;
          width: 100%;
          font-family: var(--sans);
          font-size: 15px;
          font-weight: 600;
          letter-spacing: 0.01em;
          color: #ffffff;
          padding: 0 22px;
          white-space: nowrap;
        }
        .wa-glyph {
          width: 22px; height: 22px;
          display: inline-grid; place-items: center;
          color: #ffffff;
        }
        .liquid-arrow {
          font-family: var(--mono);
          font-size: 18px;
          margin-left: 2px;
          transition: transform .35s cubic-bezier(.2,.8,.2,1);
        }
        .liquid.is-hover .liquid-arrow { transform: translateX(4px); }

        .liquid-spinner {
          width: 16px; height: 16px;
          border: 2px solid rgba(255,255,255,0.25);
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: spin .8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        .liquid-sub {
          display: block;
          text-align: center;
          margin-top: 12px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-faint);
        }
      `}</style>
    </div>
  );
}

window.LiquidButton = LiquidButton;