/**
 * Sidenotes Web Components
 *
 * Usage:
 *   <article-sidenotes>
 *     <p>Text with reference<sidenote-ref for="note1"></sidenote-ref></p>
 *     <side-note id="note1">Note content</side-note>
 *   </article-sidenotes>
 */

// ============================================
// ARTICLE-SIDENOTES - Main Container Component
// ============================================
class ArticleSidenotes extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this._noteCounter = 0;
    this._noteMap = new Map();
    this._resizeTimeout = null;
  }

  connectedCallback() {
    this.render();
    // Wait for DOM to be ready
    setTimeout(() => {
      this.processNotes();
      this.setupPositioning();
      this.setupHighlighting();
    }, 0);
  }

  disconnectedCallback() {
    if (this._resizeTimeout) {
      clearTimeout(this._resizeTimeout);
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --content-width: 40rem;
          --sidenote-width: 18rem;
          --gap: 2.5rem;
          --bg: var(--color-bg-primary, #fffffc);
          --text: var(--color-text-primary, #1a1a1a);
          --text-muted: var(--color-text-muted, #666);
          --accent: var(--color-accent, #090c8d);
          --sidenote-bg: var(--color-bg-secondary, #fafafa);
          --border: var(--color-border, #e0e0e0);

          display: block;
          position: relative;
          max-width: calc(var(--content-width) + var(--gap) + var(--sidenote-width));
          margin: 0 auto;
          padding: 0 1rem;
        }

        .content {
          max-width: var(--content-width);
        }

        .sidenotes-container {
          display: none;
        }

        /* Only show sidenotes in margin when there's enough space */
        /* 40rem + 2.5rem + 18rem + 2rem padding = 62.5rem ≈ 1000px */
        @media (min-width: 1000px) {
          :host {
            padding: 0 1rem 0 0.5rem;
          }

          .sidenotes-container {
            display: block;
            position: absolute;
            left: calc(var(--content-width) + var(--gap));
            top: 0;
            width: var(--sidenote-width);
            height: 100%;
          }

          .sidenote-wrapper {
            position: absolute;
            width: 100%;
            font-size: 0.85rem;
            line-height: 1.45;
            color: var(--text-muted);
            padding-left: 1rem;
            border-left: 2px solid var(--border);
            transition: all 0.2s ease;
          }

          .sidenote-wrapper:hover {
            border-left-color: var(--accent);
            color: var(--text);
          }

          .sidenote-number {
            display: inline;
            font-weight: bold;
            color: var(--accent);
            margin-right: 0.3em;
          }

          .sidenote-content {
            display: inline;
          }

          .sidenote-content img {
            display: block;
            width: 100%;
            height: auto;
            margin: 0.5rem 0;
            border-radius: 4px;
          }

          .sidenote-content pre {
            background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));
            padding: 0.5rem;
            border-radius: 4px;
            overflow-x: auto;
          }
        }

        ::slotted(*) {
          /* Ensure slotted content inherits styles */
        }
      </style>

      <div class="content">
        <slot></slot>
      </div>
      <div class="sidenotes-container" id="sidenotes-container"></div>
    `;
  }

  processNotes() {
    // Auto-number sidenotes and refs
    let counter = 1;

    // Find all sidenote elements
    const sidenotes = this.querySelectorAll('side-note');
    const refs = this.querySelectorAll('sidenote-ref');

    // Create a map of note IDs to numbers
    sidenotes.forEach(note => {
      const id = note.getAttribute('id');
      if (id) {
        this._noteMap.set(id, counter);
        note.setAttribute('data-number', counter);
        counter++;
      }
    });

    // Apply numbers to refs
    refs.forEach(ref => {
      const forId = ref.getAttribute('for');
      if (forId && this._noteMap.has(forId)) {
        ref.setAttribute('data-number', this._noteMap.get(forId));
      }
    });
  }

  setupPositioning() {
    const container = this.shadowRoot.getElementById('sidenotes-container');
    const sidenotes = this.querySelectorAll('side-note');

    // Calculate minimum width needed for sidenotes in margin
    // 40rem + 2.5rem + 18rem + 1.5rem padding = 62rem ≈ 1000px
    const minWidthForSidenotes = 1000;

    // Clear existing clones
    container.innerHTML = '';

    // Only clone if we have enough space
    if (window.innerWidth >= minWidthForSidenotes) {
      // Clone sidenotes to the container for desktop display
      sidenotes.forEach(note => {
        // Create a wrapper div to hold the sidenote
        const wrapper = document.createElement('div');
        wrapper.className = 'sidenote-wrapper';
        wrapper.setAttribute('data-number', note.getAttribute('data-number'));
        wrapper.setAttribute('data-id', note.getAttribute('id'));

        // Copy the inner HTML directly to preserve content
        wrapper.innerHTML = `<span class="sidenote-number">${note.getAttribute('data-number')}.</span><span class="sidenote-content">${note.innerHTML}</span>`;

        container.appendChild(wrapper);
      });

      // Position sidenotes
      this.positionSidenotes();
    }

    // Reposition on resize and scroll
    let resizeTimeout;
    const repositionHandler = () => {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        const currentWidth = window.innerWidth;

        if (currentWidth >= minWidthForSidenotes) {
          // Re-setup if transitioning from mobile to desktop
          if (container.children.length === 0) {
            this.setupPositioning();
          } else {
            this.positionSidenotes();
          }
        } else {
          // Clear sidenotes container when in mobile view
          container.innerHTML = '';
        }
      }, 150);
    };

    window.addEventListener('resize', repositionHandler);
    window.addEventListener('scroll', repositionHandler, { passive: true });

    // Also reposition after all resources load
    window.addEventListener('load', () => this.positionSidenotes());
  }

  positionSidenotes() {
    const minWidthForSidenotes = 1000;
    if (window.innerWidth < minWidthForSidenotes) return;

    const container = this.shadowRoot.getElementById('sidenotes-container');
    const containerRect = container.getBoundingClientRect();
    const containerTop = containerRect.top + window.scrollY;

    // Collect reference-sidenote pairs
    const pairs = [];
    this.querySelectorAll('sidenote-ref').forEach(ref => {
      const forId = ref.getAttribute('for');
      const sidenote = container.querySelector(`.sidenote-wrapper[data-id="${forId}"]`);

      if (sidenote) {
        const refRect = ref.getBoundingClientRect();
        const refTop = refRect.top + window.scrollY;

        pairs.push({
          sidenote,
          targetTop: refTop - containerTop
        });
      }
    });

    // Sort by position and place with overlap prevention
    pairs.sort((a, b) => a.targetTop - b.targetTop);

    let lastBottom = 0;
    pairs.forEach(({ sidenote, targetTop }) => {
      const adjustedTop = Math.max(targetTop, lastBottom + 20);
      sidenote.style.top = adjustedTop + 'px';

      const height = sidenote.offsetHeight || 100;
      lastBottom = adjustedTop + height;
    });
  }

  setupHighlighting() {
    // Setup hover events on wrapper elements in shadow DOM
    const container = this.shadowRoot.getElementById('sidenotes-container');

    container.addEventListener('mouseenter', (e) => {
      const wrapper = e.target.closest('.sidenote-wrapper');
      if (wrapper) {
        const number = wrapper.getAttribute('data-number');
        // Highlight corresponding reference
        const ref = this.querySelector(`sidenote-ref[data-number="${number}"]`);
        if (ref) ref.highlighted = true;
      }
    }, true);

    container.addEventListener('mouseleave', (e) => {
      const wrapper = e.target.closest('.sidenote-wrapper');
      if (wrapper) {
        const number = wrapper.getAttribute('data-number');
        // Unhighlight corresponding reference
        const ref = this.querySelector(`sidenote-ref[data-number="${number}"]`);
        if (ref) ref.highlighted = false;
      }
    }, true);

    // Listen for ref hover events - currently not needed but kept for future use
  }
}

// ============================================
// SIDENOTE-REF - Reference Component
// ============================================
class SidenoteRef extends HTMLElement {
  static get observedAttributes() {
    return ['data-number'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
    this.setupEvents();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-number' && oldValue !== newValue) {
      this.render();
    }
  }

  get highlighted() {
    return this.hasAttribute('highlighted');
  }

  set highlighted(value) {
    if (value) {
      this.setAttribute('highlighted', '');
    } else {
      this.removeAttribute('highlighted');
    }
    this.updateHighlight();
  }

  render() {
    const number = this.getAttribute('data-number') || '';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          vertical-align: baseline;
          font-size: 0.65em;
          font-weight: 500;
          margin: 0 0.4em;
        }

        .ref {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.1em;
          height: 1.1em;
          padding: 0;
          color: var(--accent, #090c8d);
          background: rgba(9, 12, 141, 0.08);
          border: 1px solid rgba(9, 12, 141, 0.2);
          border-radius: 50%;
          cursor: pointer;
          text-decoration: none;
          transition: all 0.2s ease;
          font-variant-numeric: tabular-nums;
          line-height: 1;
          margin-left: 0.2em;
          margin-right: 0.2em;
        }

        .ref:hover,
        :host([highlighted]) .ref {
          background: var(--accent, #090c8d);
          border-color: var(--accent, #0066cc);
          color: white;
          transform: scale(1.05);
        }
      </style>
      <span class="ref">${number}</span>
    `;
  }

  setupEvents() {
    this.addEventListener('mouseenter', () => {
      const number = this.getAttribute('data-number');
      this.dispatchEvent(new CustomEvent('ref-hover', {
        detail: { number, active: true },
        bubbles: true
      }));
    });

    this.addEventListener('mouseleave', () => {
      const number = this.getAttribute('data-number');
      this.dispatchEvent(new CustomEvent('ref-hover', {
        detail: { number, active: false },
        bubbles: true
      }));
    });
  }

  updateHighlight() {
    // Force re-render to show highlight state
    const ref = this.shadowRoot.querySelector('.ref');
    if (ref) {
      ref.style.background = this.highlighted ? 'var(--accent, #0066cc)' : '';
      ref.style.color = this.highlighted ? 'white' : '';
    }
  }
}

// ============================================
// SIDE-NOTE - Note Content Component
// ============================================
class SideNote extends HTMLElement {
  static get observedAttributes() {
    return ['data-number'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-number' && oldValue !== newValue) {
      this.render();
    }
  }

  render() {
    const number = this.getAttribute('data-number') || '';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-size: 0.85rem;
          line-height: 1.5;
          color: var(--text-muted, #777);
          margin: 2.5rem 0 3.5rem 0;
          padding-left: 1.5rem;
          border-left: 2px solid var(--border, #e0e0e0);
          position: relative;
          transition: all 0.2s ease;
          opacity: 0.9;
          font-style: italic;
        }

        /* Hide on desktop - they're shown in the sidebar */
        @media (min-width: 1000px) {
          :host {
            display: none;
          }
        }

        /* Hover effect similar to two-column layout */
        :host(:hover) {
          border-left-color: var(--accent, #090c8d);
          opacity: 1;
        }

        /* Dark mode adjustments */
        @media (prefers-color-scheme: dark) {
          :host {
            color: #999;
          }
        }

        [data-theme="dark"] :host {
          color: #999;
        }

        .sidenote-mobile-number {
          display: inline-block;
          font-weight: bold;
          color: var(--accent, #090c8d);
          margin-right: 0.5em;
          font-size: 0.9em;
        }

        /* Mobile/tablet styles - ensure adequate spacing */
        @media (max-width: 999px) {
          :host {
            /* Provide generous spacing between notes */
            margin: 3rem 0;
            /* Slightly indent from main text */
            margin-left: 1rem;
            /* Don't make it full width to distinguish from main text */
            max-width: calc(100% - 2rem);
          }

          /* Reduce top margin for first sidenote after text */
          p + :host,
          blockquote + :host,
          pre + :host {
            margin-top: 2rem;
          }

          .sidenote-mobile-number {
            display: inline;
          }
        }

        @media (min-width: 1000px) {
          .sidenote-mobile-number {
            display: none;
          }
        }

        /* Slotted content styling - keep content compact */
        ::slotted(*) {
          margin: 0.4rem 0;
          font-size: inherit;
          line-height: inherit;
          color: inherit;
        }

        ::slotted(p:first-child),
        ::slotted(*:first-child) {
          margin-top: 0;
        }

        ::slotted(p:last-child),
        ::slotted(*:last-child) {
          margin-bottom: 0;
        }

        ::slotted(img) {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 4px;
          margin: 0.75rem 0;
        }

        ::slotted(pre) {
          background: var(--color-code-block-bg, rgba(0, 0, 0, 0.03));
          padding: 0.4rem;
          border-radius: 4px;
          overflow-x: auto;
          font-size: 0.85em;
          margin: 0.5rem 0;
        }

        ::slotted(blockquote) {
          border-left: 2px solid var(--accent, #090c8d);
          padding-left: 0.75rem;
          margin-left: 0;
          font-style: italic;
          opacity: 0.9;
        }

        ::slotted(code) {
          font-size: 0.85em;
          padding: 0.1em 0.3em;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 3px;
        }

        @media (prefers-color-scheme: dark) {
          ::slotted(code) {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      </style>
      <div style="padding-left: 0.75rem;">
        ${number ? `<span class="sidenote-mobile-number">${number}.</span>` : ''}
        <slot></slot>
      </div>
    `;
  }
}

// Register components with proper hyphenated names
customElements.define('article-sidenotes', ArticleSidenotes);
customElements.define('sidenote-ref', SidenoteRef);
customElements.define('side-note', SideNote);