{{ $profileUrl := .Get 0 }}
{{ $limit := 5 }}
{{ if .Get 1 }}
  {{ $limit = int (.Get 1) }}
{{ end }}

{{/* Convert profile URL to RSS feed URL */}}
{{ $feedUrl := printf "%s.rss" $profileUrl }}

{{/* Generate unique ID for this feed instance */}}
{{ $feedId := printf "mastodon-feed-%d" (now.Unix) }}

<div id="{{ $feedId }}" class="mastodon-feed" data-feed-url="{{ $feedUrl }}" data-profile-url="{{ $profileUrl }}" data-limit="{{ $limit }}">
  <div class="mastodon-loading">Loading feed...</div>
</div>

<script>
(function() {
  const feedContainer = document.getElementById('{{ $feedId }}');
  if (!feedContainer) return;
  
  const feedUrl = feedContainer.dataset.feedUrl;
  const profileUrl = feedContainer.dataset.profileUrl;
  const limit = parseInt(feedContainer.dataset.limit) || 5;
  
  // Fetch and parse RSS feed
  fetch(feedUrl)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.text();
    })
    .then(xmlText => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
      const items = xmlDoc.querySelectorAll('item');
      
      if (items.length === 0) {
        feedContainer.innerHTML = '<div class="mastodon-error">No items found in feed</div>';
        return;
      }
      
      let html = '';
      const itemsToShow = Math.min(items.length, limit);
      
      for (let i = 0; i < itemsToShow; i++) {
        const item = items[i];
        const link = item.querySelector('link')?.textContent?.trim() || '';
        const pubDate = item.querySelector('pubDate')?.textContent?.trim() || 
                       item.querySelector('dc\\:date')?.textContent?.trim() || '';
        let description = item.querySelector('description')?.textContent?.trim() || '';
        
        if (!description) continue;
        
        // Keep HTML structure - description is already HTML from RSS
        
        // If description has <strong> content, remove everything after <hr>
        const tempCheckDiv = document.createElement('div');
        tempCheckDiv.innerHTML = description;
        const hasStrong = tempCheckDiv.querySelector('strong');
        if (hasStrong) {
          // Find <hr> tag (handles various formats: <hr>, <hr/>, <hr />, <hr class="...">, etc.)
          const hrRegex = /<hr\s*[^>]*>/i;
          const hrMatch = description.match(hrRegex);
          if (hrMatch) {
            const hrIndex = description.indexOf(hrMatch[0]);
            if (hrIndex !== -1) {
              description = description.substring(0, hrIndex);
            }
          }
        }
        
        // Format date
        const formattedDate = formatDate(pubDate);
        
        // Process description: handle NeoDB links, hashtags, etc.
        const processed = processDescription(description, profileUrl);
        description = processed.description;
        const neodbUrl = processed.neodbUrl;
        
        // Build item HTML
        html += '<div class="mastodon-item">';
        if (neodbUrl) {
          // Insert placeholder for NeoDB card
          const parts = description.split('|NEODB_CARD_PLACEHOLDER|');
          html += '<div class="mastodon-description">';
          parts.forEach((part, idx) => {
            if (part) html += part;
            if (idx < parts.length - 1) {
              html += `<div class="mastodon-neodb-placeholder" data-neodb-url="${escapeHtml(neodbUrl)}"></div>`;
            }
          });
          html += '</div>';
        } else {
          html += '<div class="mastodon-description">' + description + '</div>';
        }
        html += '<div class="mastodon-meta">';
        if (formattedDate) {
          html += '<span class="mastodon-date">' + escapeHtml(formattedDate) + '</span>';
        }
        if (link) {
          html += '<a href="' + escapeHtml(link) + '" target="_blank" rel="noopener noreferrer" class="mastodon-link">View Toot</a>';
        }
        html += '</div>';
        html += '</div>';
        
        if (i < itemsToShow - 1) {
          html += '<div class="mastodon-separator"></div>';
        }
      }
      
      feedContainer.innerHTML = html;
      
      // Process NeoDB cards after rendering
      processNeoDBCards(feedContainer);
      
      // Process NeoDB placeholders
      const placeholders = feedContainer.querySelectorAll('.mastodon-neodb-placeholder');
      placeholders.forEach(placeholder => {
        const neodbUrl = placeholder.dataset.neodbUrl;
        if (!neodbUrl) return;
        
        // Extract dbType from URL - match pattern like neodb.social/book/123 or neodb.social/movie/456
        // Remove query parameters and fragments first
        const cleanUrl = neodbUrl.split('?')[0].split('#')[0];
        const match = cleanUrl.match(/neodb\.social\/(.+)$/);
        if (!match || !match[1]) {
          placeholder.remove();
          return;
        }
        
        const dbType = match[1];
        const apiUrl = `https://neodb.social/api/${dbType}`;
        
        fetch(apiUrl)
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP ${response.status}`);
            }
            return response.json();
          })
          .then(data => {
            const cardHtml = `
              <div class="mastodon-neodb">
                <div class="db-card">
                  <div class="db-card-subject">
                    <div class="db-card-post">
                      <img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="${escapeHtml(data.cover_image_url || '')}">
                    </div>
                    <div class="db-card-content">
                      <div class="db-card-title">
                        <a href="${escapeHtml(neodbUrl)}" class="cute" target="_blank" rel="noreferrer">「${escapeHtml(data.title || '')}」</a>
                      </div>
                      <div class="db-card-abstract">${escapeHtml(data.brief || '')}</div>
                    </div>
                    <div class="db-card-cate">${escapeHtml(data.category || '')}</div>
                  </div>
                </div>
              </div>
            `;
            placeholder.outerHTML = cardHtml;
          })
          .catch(error => {
            placeholder.remove();
          });
      });
    })
    .catch(error => {
      feedContainer.innerHTML = '<div class="mastodon-error">Error loading feed: ' + escapeHtml(error.message) + '</div>';
    });
  
  function formatDate(dateStr) {
    if (!dateStr) return '';
    
    try {
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return dateStr;
      
      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      const month = months[date.getMonth()];
      const day = date.getDate();
      const year = date.getFullYear();
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${month} ${day}, ${year} ${hours}:${minutes}`;
    } catch (e) {
      return dateStr;
    }
  }
  
  function processDescription(desc, profileUrl) {
    let neodbUrl = null;
    
    // Use DOM manipulation for better HTML processing
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = desc;
    
    // Check for NeoDB links before processing
    const neodbLinks = tempDiv.querySelectorAll('a[href*="neodb.social"]');
    if (neodbLinks.length > 0) {
      neodbUrl = neodbLinks[0].href;
      // Replace NeoDB links with placeholder
      neodbLinks.forEach(link => {
        const placeholder = document.createTextNode('|NEODB_CARD_PLACEHOLDER|');
        link.parentNode.replaceChild(placeholder, link);
      });
    }
    
    // Also check for plain text NeoDB URLs
    const textNodes = [];
    const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null, false);
    let node;
    while (node = walker.nextNode()) {
      if (node.textContent.includes('neodb.social')) {
        textNodes.push(node);
      }
    }
    textNodes.forEach(textNode => {
      textNode.textContent = textNode.textContent.replace(/https:\/\/neodb\.social\/[^\s<>"]+/g, '|NEODB_CARD_PLACEHOLDER|');
    });
    
    // Remove plain text URLs (but keep hashtag links and other anchor tags)
    const allLinks = tempDiv.querySelectorAll('a');
    const linkUrls = new Set();
    allLinks.forEach(link => linkUrls.add(link.href));
    
    // Remove plain text URLs that aren't in anchor tags
    const allTextNodes = [];
    const textWalker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null, false);
    let textNode;
    while (textNode = textWalker.nextNode()) {
      allTextNodes.push(textNode);
    }
    allTextNodes.forEach(node => {
      node.textContent = node.textContent.replace(/https?:\/\/[^\s<>]+/g, (url) => {
        // Only remove if it's not already in a link
        return linkUrls.has(url) ? url : '';
      });
    });
    
    // Remove date/time strings from text nodes
    allTextNodes.forEach(node => {
      node.textContent = node.textContent.replace(/\w+,\s+\d{1,2}\s+\w{3}\s+\d{4}\s+\d{2}:\d{2}:\d{2}\s+[+-]\d{4}/g, '');
    });
    
    // Remove emoji shortcodes from text nodes
    allTextNodes.forEach(node => {
      node.textContent = node.textContent.replace(/:[a-zA-Z0-9_+-]+:/g, '');
    });
    
    // Remove img tags
    const imgs = tempDiv.querySelectorAll('img');
    imgs.forEach(img => img.remove());
    
    // Fix hashtag links - process existing hashtag links
    // Try multiple selectors to catch different formats
    const hashtagSelectors = [
      'a.mention.hashtag',
      'a[class*="mention hashtag"]',
      'a[class*="hashtag mention"]',
      'a.mention[class*="hashtag"]'
    ];
    
    hashtagSelectors.forEach(selector => {
      const hashtagLinks = tempDiv.querySelectorAll(selector);
      hashtagLinks.forEach(link => {
        let tagName = '';
        // Try to get tag from span or direct text
        const span = link.querySelector('span');
        if (span) {
          tagName = span.textContent.trim();
        } else {
          // Remove # and any whitespace
          tagName = link.textContent.replace(/^#\s*/, '').trim();
        }
        if (tagName) {
          const newLink = document.createElement('a');
          newLink.href = `${profileUrl}/tagged/${tagName}`;
          newLink.target = '_blank';
          newLink.rel = 'noopener noreferrer';
          newLink.textContent = `#${tagName}`;
          link.parentNode.replaceChild(newLink, link);
        }
      });
    });
    
    // Also handle hashtags that might be in text but not linked
    // Only process text nodes that are NOT inside anchor tags
    allTextNodes.forEach(node => {
      // Skip if this text node is inside an anchor tag
      let parent = node.parentNode;
      while (parent && parent !== tempDiv) {
        if (parent.tagName === 'A') {
          return; // Skip this node, it's inside a link
        }
        parent = parent.parentNode;
      }
      
      const text = node.textContent;
      const hashtagRegex = /#([\w\u4e00-\u9fff]+)/g; // Include Chinese characters
      if (hashtagRegex.test(text)) {
        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        hashtagRegex.lastIndex = 0;
        let match;
        while ((match = hashtagRegex.exec(text)) !== null) {
          // Add text before hashtag
          if (match.index > lastIndex) {
            fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
          }
          // Create link for hashtag
          const tagLink = document.createElement('a');
          tagLink.href = `${profileUrl}/tagged/${match[1]}`;
          tagLink.target = '_blank';
          tagLink.rel = 'noopener noreferrer';
          tagLink.textContent = match[0];
          fragment.appendChild(tagLink);
          lastIndex = match.index + match[0].length;
        }
        // Add remaining text
        if (lastIndex < text.length) {
          fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
        }
        node.parentNode.replaceChild(fragment, node);
      }
    });
    
    return {
      description: tempDiv.innerHTML.trim(),
      neodbUrl: neodbUrl
    };
  }
  
  function processNeoDBCards(container) {
    // This function is kept for compatibility but NeoDB is now handled via placeholders
  }
  
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
})();
</script>

<div class="neodb-recent-container">
  <div class="debug"></div>
  <div class="movies-section" style="display:none;">
      <h3>🎬 最近看过</h3>
      <div class="movies-grid recent-grid"></div>
    </div>

    <!-- Books Grid -->
    <div class="books-section" style="display:none;">
      <h3>📚 最近读过</h3>
      <div class="books-grid recent-grid"></div>
    </div>

     <!-- Games Grid -->
    <div class="games-section" style="display:none;">
      <h3>🎮 最近玩过</h3>
      <div class="games-grid recent-grid"></div>
    </div>

    <div class="no-data" style="display:none;">
      <p class="text-gray-400 text-sm italic">暂时无法获取 NeoDB 数据，请稍后再试。</p>
    </div>
</div>

<script>
(async () => {
  const container = document.querySelector('.neodb-recent-container');
  const token = '{{ .Site.Params.NeodbToken }}';
  
  if (!token) {
    container.querySelector('.debug').textContent = '缺少 NEODB_TOKEN';
    return;
  }

  // Fetch function matching your Astro code
  async function fetchNeoDB(category) {
    try {
      const res = await fetch(`https://neodb.social/api/me/shelf/complete?category=${category}&page=1`, {
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: 'application/json',
        },
      });
      
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = await res.json();
      return json.data ? json.data.slice(0, 4) : [];
    } catch (error) {
      console.error(`NeoDB ${category} fetch failed:`, error);
      return [];
    }
  }

  // Fetch data
  const [movies, tvs, books, games] = await Promise.all([
    fetchNeoDB('movie'),
    fetchNeoDB('tv'),
    fetchNeoDB('book'),
    fetchNeoDB('game'),
  ]);

    // Movies
    const allMoviesTV = [...movies, ...tvs]
      .sort((a, b) => new Date(b.created_time) - new Date(a.created_time))
      .slice(0, 8); // Top 8 total

    // Render sections
    if (allMoviesTV.length) {
      container.querySelector('.movies-grid').append(
        ...allMoviesTV.slice(0, 4).map(createCard)
      );
      container.querySelector('.movies-section').style.display = 'block';
    }

    // Books  
    if (books.length) {
      const grid = container.querySelector('.books-grid');
      books.forEach(item => grid.appendChild(createCard(item)));
      container.querySelector('.books-section').style.display = 'block';
    }

    if (games.length) {
      container.querySelector('.games-grid').append(
        ...games.map(createCard)
      );
      container.querySelector('.games-section').style.display = 'block';
    }

    if (!allMoviesTV.length && !books.length && !games.length) {
      container.querySelector('.no-data').style.display = 'block';
    }

    function createCard(record) {
      const { item, rating_grade: rating, comment_text: comment, created_time } = record;
      const div = document.createElement('div');
      div.className = 'db-card';
      div.innerHTML = `
        <div class="db-card-subject">
          <div class="db-card-post">
            <img loading="lazy" decoding="async" referrerpolicy="no-referrer" 
                src="${item.cover_image_url}">
          </div>
          <div class="db-card-content">
            <div class="db-card-title">
              <a href="${item.id}" class="cute" target="_blank" rel="noreferrer" title="${item.title}"">
                ${item.title}
              </a>
            </div>
            <div class="rating">
              个人评分：<span class="allstardark">
                <span class="allstarlight" style="width:${rating * 10}%"></span>
              </span>
            </div>
            <div class="db-card-abstract">
              ${comment || item.brief || '暂无评论'}
            </div>
          </div>
          <div class="db-card-cate">${item.category}</div>
        </div>
      `;
      return div;
    }
  })();
</script>

<style>
/* Your existing global db-card styles assumed to be loaded */
.recent-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
}
.recent-grid .db-card { margin: 0 !important; width: 100%; }
</style>