const { animate, utils, stagger, splitText, morphTo } = anime;

// Motion path: glowing dot traces the logo outline.

// morphTo on hover: logo → 16-pt star, tries to mimic the logo

// XXX: morphTo note: animejs tries to find the shorter path to match the

// logo's in ~300 commands, so the star gets hundreds of "stacked" points. The

// morph works but looks like a chaotic crystallisation rather than a clean

// shape-to-shape swap. Not gonna waste more time on this bullshit

async function setupLogoAnimations() {

  const container = document.getElementById('logo-container');

  if (!container) return;

  let pathD;

  try {

    const text = await fetch('/images/logo.svg').then(r => r.text());

    pathD = new DOMParser()

      .parseFromString(text, 'image/svg+xml')

      .querySelector('path')

      .getAttribute('d');

  } catch {

    return;

  }

  // Blah

  const NS = 'http://www.w3.org/2000/svg';

  const mk = (tag, attrs = {}) => {

    const el = document.createElementNS(NS, tag);

    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));

    return el;

  };

  const svg = mk('svg', { viewBox: '0 0 600 600' });

  svg.style.cssText = 'width:100%;height:100%;display:block;overflow:visible';

  const defs = mk('defs');

  // Radial gradient: bright upper-left highlight fading to a deeper green at

  // edges

  const grad = mk('radialGradient', {

    id: 'logo-gradient',

    cx: '42%',

    cy: '36%',

    r: '65%',

    gradientUnits: 'objectBoundingBox'

  });

  grad.appendChild(mk('stop', { offset: '0%',   'stop-color': '#2dff80' }));

  grad.appendChild(mk('stop', { offset: '52%',  'stop-color': '#13ec5b' }));

  grad.appendChild(mk('stop', { offset: '100%', 'stop-color': '#09a042' }));

  defs.appendChild(grad);

  // Glow filter for the dot

  const dotFilter = mk('filter', {

    id: 'dot-glow',

    x: '-300%',

    y: '-300%',

    width: '700%',

    height: '700%'

  });

  dotFilter.appendChild(mk('feGaussianBlur', {

    in: 'SourceGraphic',

    stdDeviation: '6',

    result: 'blur'

  }));

  const merge = mk('feMerge');

  merge.appendChild(mk('feMergeNode', { in: 'blur' }));

  merge.appendChild(mk('feMergeNode', { in: 'SourceGraphic' }));

  dotFilter.appendChild(merge);

  defs.appendChild(dotFilter);

  svg.appendChild(defs);

  // Logo path: gradient fill

  const logoPathEl = mk('path', {

    fill: 'url(#logo-gradient)',

    filter: 'url(#logo-texture)',

    d: pathD

  });

  svg.appendChild(logoPathEl);

  // morphTo targets (same 0-600 coordinate space as the logo)

  const starD = 'M300,30 L322,192 L466,109 L371,258 L562,296 L371,340 L466,489 L322,412 L300,570 L278,412 L134,489 L229,340 L38,296 L229,258 L134,109 L278,192 Z';

  const starEl = mk('path', { d: starD, visibility: 'hidden' });

  const origEl = mk('path', { d: pathD, visibility: 'hidden' });

  svg.appendChild(starEl);

  svg.appendChild(origEl);

  // Motion dot

  const trail = mk('circle', {

    r: '24',

    fill: '#13ec5b',

    opacity: '0.15',

    filter: 'url(#dot-glow)',

    cx: '316',

    cy: '578'

  });

  const dot = mk('circle', {

    r: '8',

    fill: 'black',

    opacity: '0.85',

    filter: 'url(#dot-glow)',

    cx: '316',

    cy: '578'

  });

  svg.appendChild(trail);

  svg.appendChild(dot);

  const img = container.querySelector('img');

  if (img) container.replaceChild(svg, img);

  else container.appendChild(svg);

  // Motion path

  const totalLen = logoPathEl.getTotalLength();

  if (!totalLen) return;

  const DURATION = 12000;

  let rafStart = null;

  function traceDot(ts) {

    if (rafStart === null) rafStart = ts;

    const t = ((ts - rafStart) % DURATION) / DURATION;

    const pt = logoPathEl.getPointAtLength(t * totalLen);

    dot.setAttribute('cx', pt.x);

    dot.setAttribute('cy', pt.y);

    trail.setAttribute('cx', pt.x);

    trail.setAttribute('cy', pt.y);

    requestAnimationFrame(traceDot);

  }

  requestAnimationFrame(traceDot);

  // morphTo experiment

  container.addEventListener('pointerenter', () => {

    animate(logoPathEl, { d: morphTo(starEl), duration: 900, ease: 'inOutCubic' });

  });

  container.addEventListener('pointerleave', () => {

    animate(logoPathEl, { d: morphTo(origEl), duration: 900, ease: 'inOutCubic' });

  });

}

document.addEventListener('DOMContentLoaded', function () {

  const colors = [];

  new Glide('.glide', {

    type: 'carousel',

    autoplay: 2000,

    startAt: 0,

    perView: 2.5,

    gap: 32,

    breakpoints: {

      1024: {

        perView: 2

      },

      768: {

        perView: 1

      }

    }

  }).mount();

  // Initialize Atropos 3D Effect

  const dash = Atropos({

    el: '.my-atropos',

    activeOffset: 40,

    shadow: true,

    shadowScale: 1.05,

    onEnter() {

      console.log('Atropos Enter');

    },

    onLeave() {

      console.log('Atropos Leave');

    }

  });

  // Anime js text bullshit

  splitText('.animated-text', {

    lines: true,

  })

    .addEffect(({ lines }) => animate(lines, {

      y: ['20%', '-20%'],

      loop: true,

      alternate: true,

      delay: stagger(15000),

      ease: 'inOutQuad',

    }))

    .addEffect(split => {

      split.words.forEach(($el, i) => {

        const color = colors[i];

        if (color) utils.set($el, { color });

        $el.addEventListener('pointerenter', () => {

          animate($el, {

            color: utils.randomPick(['#FF4B4B', '#FFCC2A', '#B7FF54', '#57F695']),

            duration: 250,

          })

        });

      });

      return () => {

        /* Called between each split */

        split.words.forEach((w, i) => colors[i] = utils.get(w, 'color'));

      }

    });

  setupLogoAnimations();

  document.querySelectorAll('.glide__slide .morph-icon').forEach(svg => {

    const path = svg.querySelector(':scope > path');

    const resting = svg.querySelector('defs .morph-resting');

    const alt = svg.querySelector('defs .morph-alt');

    const shape = svg.querySelector('defs .morph-shape');

    const card = svg.closest('.group');

    let hovered = false;

    let spikeCycle = null;

    const rotAnim = animate(svg, {

      rotate: 360,

      loop: true,

      duration: 7000,

      ease: 'linear',

    });

    function runSpikeCycle() {

      if (hovered) return;

      const targets = [resting, alt];

      let i = 0;

      function step() {

        if (hovered) return;

        i = (i + 1) % targets.length;

        spikeCycle = animate(path, {

          d: morphTo(targets[i]),

          duration: 1800,

          ease: 'inOutSine',

          onComplete: () => setTimeout(step, 600),

        });

      }

      step();

    }

    runSpikeCycle();

    card.addEventListener('pointerenter', () => {

      hovered = true;

      spikeCycle?.pause();

      rotAnim.pause();

      animate(path, { d: morphTo(shape), duration: 500, ease: 'inOutCubic' });

    });

    card.addEventListener('pointerleave', () => {

      hovered = false;

      animate(path, {

        d: morphTo(resting),

        duration: 500,

        ease: 'inOutCubic',

        onComplete: () => {

          rotAnim.play();

          runSpikeCycle();

        },

      });

    });

  });

});