// border-glow.jsx
// <BorderGlow/> — adapted from React Bits (https://reactbits.dev).
// The original is an ES module (import/export) with a CSS import. This project
// has no bundler (React via CDN, JSX transpiled in-browser), so it is exposed
// on window like gradient-text.jsx / tweaks-panel.jsx, and its CSS lives in
// border-glow.css (linked from index.html).
//
// Defaults are tuned to the page palette: mint accent glow, surface background,
// and a mint / sky / violet mesh-gradient border. The component forwards
// className, style and arbitrary props (e.g. data-reveal) onto the card so the
// existing reveal-on-scroll animation keeps working.
(function () {
  const { useRef, useCallback, useEffect } = React;

  function parseHSL(hslStr) {
    const match = hslStr.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/);
    if (!match) return { h: 40, s: 80, l: 80 };
    return { h: parseFloat(match[1]), s: parseFloat(match[2]), l: parseFloat(match[3]) };
  }

  function buildGlowVars(glowColor, intensity) {
    const { h, s, l } = parseHSL(glowColor);
    const base = `${h}deg ${s}% ${l}%`;
    const opacities = [100, 60, 50, 40, 30, 20, 10];
    const keys = ['', '-60', '-50', '-40', '-30', '-20', '-10'];
    const vars = {};
    for (let i = 0; i < opacities.length; i++) {
      vars[`--glow-color${keys[i]}`] = `hsl(${base} / ${Math.min(opacities[i] * intensity, 100)}%)`;
    }
    return vars;
  }

  const GRADIENT_POSITIONS = ['80% 55%', '69% 34%', '8% 6%', '41% 38%', '86% 85%', '82% 18%', '51% 4%'];
  const GRADIENT_KEYS = ['--gradient-one', '--gradient-two', '--gradient-three', '--gradient-four', '--gradient-five', '--gradient-six', '--gradient-seven'];
  const COLOR_MAP = [0, 1, 2, 0, 1, 2, 1];

  function buildGradientVars(colors) {
    const vars = {};
    for (let i = 0; i < 7; i++) {
      const c = colors[Math.min(COLOR_MAP[i], colors.length - 1)];
      vars[GRADIENT_KEYS[i]] = `radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${c} 0px, transparent 50%)`;
    }
    vars['--gradient-base'] = `linear-gradient(${colors[0]} 0 100%)`;
    return vars;
  }

  function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }
  function easeInCubic(x) { return x * x * x; }

  function animateValue({ start = 0, end = 100, duration = 1000, delay = 0, ease = easeOutCubic, onUpdate, onEnd }) {
    function tick() {
      const elapsed = performance.now() - t0;
      const t = Math.min(elapsed / duration, 1);
      onUpdate(start + (end - start) * ease(t));
      if (t < 1) requestAnimationFrame(tick);
      else if (onEnd) onEnd();
    }
    let t0 = performance.now() + delay;
    setTimeout(() => requestAnimationFrame(tick), delay);
  }

  function BorderGlow({
    children,
    className = '',
    innerClassName = '',
    style,
    edgeSensitivity = 30,
    glowColor = '156 70 72',
    backgroundColor = 'var(--surface)',
    borderRadius = 14,
    glowRadius = 36,
    glowIntensity = 1.0,
    coneSpread = 25,
    animated = false,
    colors = ['#6EE7B7', '#7DD3FC', '#C4B5FD'],
    fillOpacity = 0.45,
    ...rest
  }) {
    const cardRef = useRef(null);

    const getCenterOfElement = useCallback((el) => {
      const { width, height } = el.getBoundingClientRect();
      return [width / 2, height / 2];
    }, []);

    const getEdgeProximity = useCallback((el, x, y) => {
      const [cx, cy] = getCenterOfElement(el);
      const dx = x - cx;
      const dy = y - cy;
      let kx = Infinity;
      let ky = Infinity;
      if (dx !== 0) kx = cx / Math.abs(dx);
      if (dy !== 0) ky = cy / Math.abs(dy);
      return Math.min(Math.max(1 / Math.min(kx, ky), 0), 1);
    }, [getCenterOfElement]);

    const getCursorAngle = useCallback((el, x, y) => {
      const [cx, cy] = getCenterOfElement(el);
      const dx = x - cx;
      const dy = y - cy;
      if (dx === 0 && dy === 0) return 0;
      const radians = Math.atan2(dy, dx);
      let degrees = radians * (180 / Math.PI) + 90;
      if (degrees < 0) degrees += 360;
      return degrees;
    }, [getCenterOfElement]);

    const handlePointerMove = useCallback((e) => {
      const card = cardRef.current;
      if (!card) return;
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const edge = getEdgeProximity(card, x, y);
      const angle = getCursorAngle(card, x, y);
      card.style.setProperty('--edge-proximity', `${(edge * 100).toFixed(3)}`);
      card.style.setProperty('--cursor-angle', `${angle.toFixed(3)}deg`);
    }, [getEdgeProximity, getCursorAngle]);

    useEffect(() => {
      if (!animated || !cardRef.current) return;
      const card = cardRef.current;
      const angleStart = 110;
      const angleEnd = 465;
      card.classList.add('sweep-active');
      card.style.setProperty('--cursor-angle', `${angleStart}deg`);
      animateValue({ duration: 500, onUpdate: (v) => card.style.setProperty('--edge-proximity', v) });
      animateValue({ ease: easeInCubic, duration: 1500, end: 50, onUpdate: (v) => {
        card.style.setProperty('--cursor-angle', `${(angleEnd - angleStart) * (v / 100) + angleStart}deg`);
      } });
      animateValue({ ease: easeOutCubic, delay: 1500, duration: 2250, start: 50, end: 100, onUpdate: (v) => {
        card.style.setProperty('--cursor-angle', `${(angleEnd - angleStart) * (v / 100) + angleStart}deg`);
      } });
      animateValue({ ease: easeInCubic, delay: 2500, duration: 1500, start: 100, end: 0,
        onUpdate: (v) => card.style.setProperty('--edge-proximity', v),
        onEnd: () => card.classList.remove('sweep-active'),
      });
    }, [animated]);

    const glowVars = buildGlowVars(glowColor, glowIntensity);

    return (
      <div
        ref={cardRef}
        onPointerMove={handlePointerMove}
        className={`border-glow-card ${className}`}
        style={{
          '--card-bg': backgroundColor,
          '--edge-sensitivity': edgeSensitivity,
          '--border-radius': `${borderRadius}px`,
          '--glow-padding': `${glowRadius}px`,
          '--cone-spread': coneSpread,
          '--fill-opacity': fillOpacity,
          ...glowVars,
          ...buildGradientVars(colors),
          ...style,
        }}
        {...rest}
      >
        <span className="edge-light" />
        <div className={`border-glow-inner ${innerClassName}`}>
          {children}
        </div>
      </div>
    );
  }

  Object.assign(window, { BorderGlow });
})();