---
export interface Props {
  href?: string;
  target?: '_blank' | '_self' | '_parent' | '_top';
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'secondary' | 'outline' | 'translucent';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  icon?: string;
  ariaLabel?: string;
  disabled?: boolean;
  reveal?: boolean;
  revealDelay?: string;
  revealDistance?: string;
  tabIndex?: number;
}

const {
  href,
  target,
  rel,
  type = 'button',
  variant = 'primary',
  size = 'md',
  className = '',
  icon,
  ariaLabel,
  reveal = false,
  revealDelay,
  revealDistance,
  disabled = false,
  tabIndex
} = Astro.props satisfies Props;

const computedRel = rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
const isInteractiveLink = Boolean(href) && !disabled;

const baseClasses = [
  'glow-button',
  `glow-button--${variant}`,
  `glow-button--${size}`,
  disabled ? 'glow-button--disabled' : '',
  className
].filter(Boolean).join(' ');

const revealAttributes = reveal
  ? {
      'data-reveal': 'up',
      ...(revealDelay ? { 'data-reveal-delay': revealDelay } : {}),
      ...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '16px' })
    }
  : {};
---

{isInteractiveLink ? (
  <a
    class={baseClasses}
    href={href}
    target={target}
    rel={computedRel}
    role="button"
    aria-label={ariaLabel}
    tabindex={tabIndex}
    {...revealAttributes}
  >
    <span class="glow-button__border" aria-hidden="true"></span>
    <span class="glow-button__shine" aria-hidden="true"></span>
    <span class="glow-button__light" aria-hidden="true"></span>
    <span class="glow-button__content">
      {icon && <i class={`glow-button__icon ${icon}`}></i>}
      <span class="glow-button__label"><slot /></span>
    </span>
  </a>
) : (
  <button
    class={baseClasses}
    type={type}
    aria-label={ariaLabel}
    disabled={disabled}
    tabindex={tabIndex}
    {...revealAttributes}
  >
    <span class="glow-button__border" aria-hidden="true"></span>
    <span class="glow-button__shine" aria-hidden="true"></span>
    <span class="glow-button__light" aria-hidden="true"></span>
    <span class="glow-button__content">
      {icon && <i class={`glow-button__icon ${icon}`}></i>}
      <span class="glow-button__label"><slot /></span>
    </span>
  </button>
)}

<style>
  .glow-button {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-opacity: 0;
    --glow-scale: 1;
    --glow-pad-x: 1.4rem;
    --glow-pad-y: 0.7rem;
    --glow-radius: 999px;
    --glow-text-color: #0f172a;
    --glow-sheen: rgba(255, 255, 255, 0.45);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: calc(var(--glow-pad-y) - 0.05rem) calc(var(--glow-pad-x) - 0.05rem);
    border-radius: var(--glow-radius);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--glow-text-color);
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease, color 0.35s ease;
    outline: none;
    user-select: none;
  }

  .glow-button__content {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.05rem 0;
    z-index: 1;
  }

  .glow-button__label {
    white-space: nowrap;
  }

  .glow-button__icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
  }

  .glow-button__border,
  .glow-button__shine,
  .glow-button__light {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }

  .glow-button__border {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(125, 211, 252, 0.6), rgba(192, 132, 252, 0.45));
    opacity: 0.32;
    transition: opacity 0.35s ease;
  }

  .glow-button__shine {
    background:
      linear-gradient(130deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, transparent);
    opacity: 0.35;
    mix-blend-mode: screen;
    transition: opacity 0.4s ease;
  }

  .glow-button__light {
    background:
      radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.85), transparent 45%),
      radial-gradient(220px circle at calc(var(--glow-x) + 4%) calc(var(--glow-y) + 6%), rgba(96, 165, 250, 0.45), transparent 65%),
      radial-gradient(180px circle at calc(var(--glow-x) - 12%) calc(var(--glow-y) - 14%), rgba(236, 72, 153, 0.45), transparent 55%);
    opacity: calc(var(--glow-opacity) * 0.9);
    filter: blur(calc((1 - var(--glow-opacity)) * 12px));
    transition: opacity 0.35s ease, filter 0.35s ease;
  }

  .glow-button:hover {
    transform: translateY(-2px);
  }

  .glow-button.is-hovered .glow-button__border {
    opacity: 0.6;
  }

  .glow-button.is-hovered .glow-button__shine {
    opacity: 0.6;
  }

  .glow-button.is-hovered .glow-button__icon {
    transform: translateY(-1px);
  }

  .glow-button.is-pressed {
    transform: translateY(1px) scale(0.99);
  }

  .glow-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6);
  }

  .glow-button--primary {
    --glow-text-color: #0f172a;
    background: linear-gradient(140deg, rgba(56, 189, 248, 0.25), rgba(96, 165, 250, 0.25), rgba(216, 180, 254, 0.25));
  }

  .glow-button--secondary {
    --glow-text-color: #1f2937;
    background: rgba(226, 232, 240, 0.55);
  }

  .glow-button--outline {
    --glow-text-color: #0f172a;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.35);
  }

  .glow-button--translucent {
    --glow-text-color: #0f172a;
    background: rgba(241, 245, 249, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  }

  .glow-button--translucent.is-hovered {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  }

  .glow-button--disabled {
    cursor: not-allowed;
    opacity: 0.6;
    filter: grayscale(0.2);
  }

  .glow-button--disabled .glow-button__border,
  .glow-button--disabled .glow-button__shine,
  .glow-button--disabled .glow-button__light {
    display: none;
  }

  .glow-button--sm {
    --glow-pad-x: 1.1rem;
    --glow-pad-y: 0.5rem;
    font-size: 0.85rem;
  }

  .glow-button--lg {
    --glow-pad-x: 1.6rem;
    --glow-pad-y: 0.85rem;
    font-size: 1.05rem;
  }

  .glow-button--sm .glow-button__icon {
    font-size: 0.9rem;
  }

  .glow-button--lg .glow-button__icon {
    font-size: 1.15rem;
  }

  @media (max-width: 768px) {
    .glow-button {
      --glow-pad-x: 1.05rem;
      gap: 0.5rem;
      width: 100%;
    }

    .glow-button__content {
      width: 100%;
    }

    .glow-button__label {
      text-align: center;
      width: 100%;
    }
  }
</style>

<script is:inline>
  const attachGlowEvents = (button) => {
    if (!button || button.dataset.glowBound === 'true') return;
    button.dataset.glowBound = 'true';

    const updateGlow = (event, intensity = 1) => {
      const rect = button.getBoundingClientRect();
      const x = ((event.clientX - rect.left) / rect.width) * 100;
      const y = ((event.clientY - rect.top) / rect.height) * 100;
      button.style.setProperty('--glow-x', `${x}%`);
      button.style.setProperty('--glow-y', `${y}%`);
      button.style.setProperty('--glow-opacity', `${Math.max(0, Math.min(1, intensity))}`);
    };

    const fadeOut = () => {
      button.style.setProperty('--glow-opacity', '0');
      button.classList.remove('is-hovered');
    };

    button.addEventListener('pointermove', (event) => {
      if (button.classList.contains('glow-button--disabled')) return;
      button.classList.add('is-hovered');
      updateGlow(event, 1);
    });

    button.addEventListener('pointerenter', (event) => {
      if (button.classList.contains('glow-button--disabled')) return;
      button.classList.add('is-hovered');
      updateGlow(event, 0.95);
    });

    button.addEventListener('pointerleave', () => {
      if (button.classList.contains('glow-button--disabled')) return;
      fadeOut();
    });

    button.addEventListener('focus', () => {
      if (button.classList.contains('glow-button--disabled')) return;
      button.classList.add('is-hovered');
      button.style.setProperty('--glow-x', '50%');
      button.style.setProperty('--glow-y', '50%');
      button.style.setProperty('--glow-opacity', '0.85');
    });

    button.addEventListener('blur', () => {
      fadeOut();
    });

    button.addEventListener('pointerdown', () => {
      if (button.classList.contains('glow-button--disabled')) return;
      button.classList.add('is-pressed');
    });

    const releasePress = () => button.classList.remove('is-pressed');
    button.addEventListener('pointerup', releasePress);
    button.addEventListener('pointercancel', releasePress);
  };

  const setupGlowButtons = () => {
    const buttons = document.querySelectorAll('.glow-button');
    buttons.forEach((button) => attachGlowEvents(button));
  };

  if (typeof window !== 'undefined') {
    const register = () => {
      setupGlowButtons();

      const win = window;
      const observerKey = '__glowButtonObserver';
      const initKey = '__glowButtonInitialized';

      if (!win[observerKey]) {
        const observer = new MutationObserver(() => setupGlowButtons());
        observer.observe(document.body, { childList: true, subtree: true });
        win[observerKey] = observer;
        win.addEventListener('astro:page-load', setupGlowButtons);
      }

      win[initKey] = true;
    };

    const ensure = () => setupGlowButtons();

    if (window['__glowButtonInitialized']) {
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', ensure, { once: true });
      } else {
        ensure();
      }
    } else {
      window['__glowButtonInitialized'] = true;
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', register, { once: true });
      } else {
        register();
      }
    }
  }
</script>
