---
// blog/index.astro - Blog page with knowledge graph and filtering
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import KnowledgeGraph from '../../components/KnowledgeGraph.astro';
import Terminal from '../../components/Terminal.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

// Get all blog entries
const allPosts = await getCollection('posts');

// Sort by publication date
const sortedPosts = allPosts.sort((a, b) => {
  const dateA = a.data.pubDate ? new Date(a.data.pubDate) : new Date(0);
  const dateB = b.data.pubDate ? new Date(b.data.pubDate) : new Date(0);
  return dateB.getTime() - dateA.getTime();
});

// Get all unique tags
const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))].sort();

// Get all unique categories
const allCategories = [...new Set(allPosts.map(post => post.data.category).filter(Boolean))].sort();

// Prepare post data for client-side filtering and knowledge graph
const postsData = sortedPosts.map(post => ({
  slug: post.slug,
  title: post.data.title,
  description: post.data.description || '',
  pubDate: post.data.pubDate ? new Date(post.data.pubDate).toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric' }) : 'No date',
  pubDateISO: post.data.pubDate ? new Date(post.data.pubDate).toISOString() : '',
  category: post.data.category || 'Uncategorized',
  tags: post.data.tags || [],
  heroImage: post.data.heroImage || '/images/placeholders/default.jpg', 
  readTime: post.data.readTime || '5 min read',
  isDraft: post.data.draft || false
}));

// Prepare graph data for visualization
const graphData = {
  nodes: sortedPosts
    .filter(post => !post.data.draft)
    .map(post => ({
      id: post.slug,
      label: post.data.title,
      category: post.data.category || 'Uncategorized',
      tags: post.data.tags || []
    })),
  edges: []
};

// Create edges between posts based on shared tags
for (let i = 0; i < graphData.nodes.length; i++) {
  const postA = graphData.nodes[i];
  
  for (let j = i + 1; j < graphData.nodes.length; j++) {
    const postB = graphData.nodes[j];
    
    // Create edge if posts share at least one tag or same category
    const sharedTags = postA.tags.filter(tag => postB.tags.includes(tag));
    
    if (sharedTags.length > 0 || postA.category === postB.category) {
      graphData.edges.push({
        source: postA.id,
        target: postB.id,
        strength: sharedTags.length + (postA.category === postB.category ? 1 : 0)
      });
    }
  }
}

// Terminal commands for tech effect
const commands = [
  { 
    prompt: "[laforceit@argobox]$ ", 
    command: "find ./posts -type f -name \"*.md\" | sort -n | wc -l", 
    output: [`${allPosts.length} posts found`]
  },
  {
    prompt: "[laforceit@argobox]$ ",
    command: "ls -la ./categories",
    output: allCategories.map(cat => `${cat}`)
  },
  {
    prompt: "[laforceit@argobox]$ ",
    command: "grep -r \"kubernetes\" --include=\"*.md\" ./posts | wc -l",
    output: [`${allPosts.filter(post => 
      post.data.tags?.includes('kubernetes') || 
      post.data.category === 'Kubernetes' ||
      post.data.title?.toLowerCase().includes('kubernetes') ||
      post.data.description?.toLowerCase().includes('kubernetes')
    ).length} matches found`]
  }
];
---

<BaseLayout title="Blog | LaForce IT - Home Lab & DevOps Insights" description="Explore articles about Kubernetes, Infrastructure, DevOps, and Home Lab setups">
  <Header slot="header" />
  <main>
    <!-- Hero Section with Terminal -->
    <section class="hero-section">
      <div class="hero-bg"></div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <div class="hero-subtitle">Technical Articles & Guides</div>
            <h1 class="hero-title">Exploring <span>advanced infrastructure</span> and automation</h1>
            <p class="hero-description">
              Dive into enterprise-grade home lab setups, Kubernetes deployments, and DevOps best practices for the modern tech enthusiast.
            </p>
          </div>
          <div class="terminal-container">
            <Terminal commands={commands} title="argobox:~/blog" />
          </div>
        </div>
      </div>
    </section>

    <!-- Knowledge Graph Visualization -->
    <section class="graph-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Knowledge Graph</h2>
          <p class="section-description">
            Explore connections between articles based on topics and categories
          </p>
        </div>
        
        <div class="graph-container">
          <KnowledgeGraph graphData={graphData} />
          
          <div class="graph-controls">
            <button class="graph-filter active" data-filter="all">All Topics</button>
            {allCategories.map(category => (
              <button class="graph-filter" data-filter={category}>{category}</button>
            ))}
          </div>
        </div>
      </div>
    </section>

    <!-- Blog Posts Section -->
    <section class="blog-posts-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">All Articles</h2>
          <p class="section-description">
            Technical insights, infrastructure guides, and DevOps best practices
          </p>
        </div>
        
        <!-- Search and Filter Section -->
        <div class="search-filter-section">
          <div class="search-bar">
            <input type="search" id="search-input" placeholder="Search posts..." class="search-input" />
          </div>
          <div class="tag-filters">
            <span class="filter-label">Filter by Tag:</span>
            <button class="tag-filter-btn active" data-tag="all">All</button>
            {allTags.map(tag => (
              <button class="tag-filter-btn" data-tag={tag}>{tag}</button>
            ))}
          </div>
        </div>

        <!-- Blog Grid (will be populated by JS) -->
        <div class="blog-grid" id="blog-grid">
          <div class="loading-indicator">
            <div class="loading-spinner"></div>
            <span>Loading articles...</span>
          </div>
        </div>
      </div>
    </section>
  </main>
  <Footer slot="footer" />

  <!-- Client-side script for filtering and graph interactions -->
  <script define:vars={{ postsData, graphData }}>
    // DOM Elements
    const searchInput = document.getElementById('search-input');
    const tagButtons = document.querySelectorAll('.tag-filter-btn');
    const blogGrid = document.getElementById('blog-grid');
    const graphFilters = document.querySelectorAll('.graph-filter');
    
    // State variables
    let currentFilterTag = 'all';
    let currentSearchTerm = '';
    let currentGraphFilter = 'all';
    let cy; // Cytoscape instance will be set by KnowledgeGraph component
  
    // Wait for cytoscape instance to be available
    document.addEventListener('graphReady', (e) => {
      cy = e.detail.cy;
      setupGraphInteractions();
    });
    
    // Setup graph filtering and interactions
    function setupGraphInteractions() {
      if (!cy) return;
      
      // Graph filtering by category
      graphFilters.forEach(button => {
        button.addEventListener('click', () => {
          // Update active button style
          graphFilters.forEach(btn => btn.classList.remove('active'));
          button.classList.add('active');
          
          // Update filter
          currentGraphFilter = button.dataset.filter;
          
          // Apply filter to graph
          if (currentGraphFilter === 'all') {
            cy.elements().removeClass('faded').removeClass('highlighted');
          } else {
            // Fade all nodes/edges
            cy.elements().addClass('faded');
            
            // Highlight nodes with matching category and their edges
            const matchingNodes = cy.nodes().filter(node => 
              node.data('category') === currentGraphFilter
            );
            
            matchingNodes.removeClass('faded').addClass('highlighted');
            matchingNodes.connectedEdges().removeClass('faded').addClass('highlighted');
          }
        });
      });
      
      // Click node to filter posts
      cy.on('tap', 'node', function(evt) {
        const node = evt.target;
        const slug = node.id();
        
        // Scroll to the post in the blog grid
        const post = postsData.find(p => p.slug === slug);
        if (post) {
          // Reset filters
          currentFilterTag = 'all';
          searchInput.value = post.title;
          currentSearchTerm = post.title;
          
          // Update UI
          tagButtons.forEach(btn => btn.classList.remove('active'));
          tagButtons[0].classList.add('active');
          
          // Update grid with just this post
          updateGrid();
          
          // Scroll to blog section
          document.querySelector('.blog-posts-section').scrollIntoView({ 
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    }
  
    // Function to create HTML for a single post card
    function createPostCardHTML(post) {
      // Make sure tags is an array before stringifying
      const tagsString = JSON.stringify(post.tags || []);
      
      // Create tag pills HTML
      const tagPills = post.tags.map(tag => 
        `<span class="post-tag">${tag}</span>`
      ).join('');
      
      return `
        <article class="post-card" data-tags='${tagsString}' data-slug="${post.slug}">
          <div class="post-card-inner">
            <div class="post-image-container">
              <img
                width="720"
                height="360"
                src="${post.heroImage}"
                alt=""
                class="post-image"
                loading="lazy"
              />
              <div class="post-category-badge">${post.category}</div>
            </div>
            <div class="post-content">
              <div class="post-meta">
                <time datetime="${post.pubDateISO}">${post.pubDate}</time>
                <span class="post-read-time">${post.readTime}</span>
              </div>
              <h3 class="post-title">
                <a href="/posts/${post.slug}/">${post.title}</a>
                ${post.isDraft ? '<span class="draft-badge">Draft</span>' : ''}
              </h3>
              <p class="post-excerpt">${post.description}</p>
              <div class="post-footer">
                <div class="post-tags">
                  ${tagPills}
                </div>
                <a href="/posts/${post.slug}/" class="read-more">Read More</a>
              </div>
            </div>
          </div>
        </article>
      `;
    }
  
    // Function to filter and update the grid
    function updateGrid() {
      const searchTermLower = currentSearchTerm.toLowerCase();
      
      // Ensure postsData is available
      if (typeof postsData === 'undefined' || !postsData) {
        console.error("postsData is not available in updateGrid");
        if(blogGrid) blogGrid.innerHTML = '<p class="no-results">Error loading post data.</p>';
        return;
      }

      const filteredPosts = postsData.filter(post => {
        const postTags = post.tags || []; // Ensure tags is an array
        const matchesTag = currentFilterTag === 'all' || postTags.includes(currentFilterTag);
        const matchesSearch = searchTermLower === '' ||
                            post.title.toLowerCase().includes(searchTermLower) ||
                            post.description.toLowerCase().includes(searchTermLower) ||
                            postTags.some(tag => tag.toLowerCase().includes(searchTermLower));
        return matchesTag && matchesSearch && !post.isDraft; // Exclude drafts
      });
  
      // Update the grid HTML
      if (blogGrid) {
        if (filteredPosts.length > 0) {
          blogGrid.innerHTML = filteredPosts.map(createPostCardHTML).join('');
          
          // If graph is available, highlight matching nodes
          if (cy) {
            const matchingSlugs = filteredPosts.map(post => post.slug);
            
            // Reset all nodes
            cy.nodes().removeClass('highlighted').removeClass('filtered');
            
            // Highlight matching nodes
            matchingSlugs.forEach(slug => {
              cy.getElementById(slug).addClass('highlighted');
            });
            
            // If filtering by tag, also highlight connected nodes
            if (currentFilterTag !== 'all') {
              cy.nodes().forEach(node => {
                if (node.data('tags')?.includes(currentFilterTag)) {
                  node.addClass('filtered');
                }
              });
            }
          }
        } else {
          blogGrid.innerHTML = '<p class="no-results">No posts found matching your criteria.</p>';
        }
      } else {
        console.error("Blog grid element not found!");
      }
    }
  
    // Event listener for search input
    if (searchInput) {
      searchInput.addEventListener('input', (e) => {
        currentSearchTerm = e.target.value;
        updateGrid();
      });
    } else {
      console.error("Search input element not found!");
    }
  
    // Event listeners for tag buttons
    tagButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Update active button style
        tagButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        
        // Update filter and grid
        currentFilterTag = button.dataset.tag;
        updateGrid();
      });
    });
  
    // Initial grid population on client side
    document.addEventListener('DOMContentLoaded', () => {
      updateGrid(); // Call after DOM is fully loaded
    });
  </script>
</BaseLayout>

<style>
  /* Hero Section */
  .hero-section {
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  }
  
  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.1) 0%, transparent 45%),
      radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
    z-index: -1;
  }
  
  .hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(226, 232, 240, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(226, 232, 240, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 3rem);
  }
  
  .hero-content {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
  
  .hero-text {
    flex: 1;
  }
  
  .hero-subtitle {
    font-family: var(--font-mono);
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .hero-subtitle::before {
    content: '>';
    font-weight: bold;
  }
  
  .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  
  .hero-title span {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .hero-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 1.5rem;
    max-width: 540px;
  }

  .terminal-container {
    flex: 1;
    max-width: 560px;
  }
  
  /* Graph Section */
  .graph-section {
    padding: 5rem 0;
    position: relative;
    background: linear-gradient(0deg, var(--bg-primary), var(--bg-secondary), var(--bg-primary));
  }
  
  .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
  }
  
  .section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
  }
  
  .section-title::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
  }
  
  .section-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
  }
  
  .graph-container {
    position: relative;
    height: 60vh;
    min-height: 500px;
    max-height: 800px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: rgba(15, 23, 42, 0.2);
    margin-bottom: 2rem;
  }
  
  .graph-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
  }
  
  .graph-filter {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .graph-filter:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--glow-primary);
  }
  
  .graph-filter.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: transparent;
    color: var(--bg-primary);
  }
  
  /* Blog Posts Section */
  .blog-posts-section {
    padding: 5rem 0;
  }
  
  .search-filter-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: rgba(13, 21, 41, 0.5);
    border: 1px solid var(--card-border);
    border-radius: 8px;
  }
  
  .search-bar {
    margin-bottom: 1.5rem;
  }
  
  .search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-sans);
  }
  
  .search-input::placeholder {
    color: var(--text-secondary);
  }
  
  .tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  
  .filter-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 0.5rem;
    font-family: var(--font-mono);
  }
  
  .tag-filter-btn {
    background-color: rgba(226, 232, 240, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    font-family: var(--font-mono);
  }
  
  .tag-filter-btn:hover {
    background-color: rgba(226, 232, 240, 0.1);
    color: var(--text-primary);
    border-color: rgba(56, 189, 248, 0.4);
  }
  
  .tag-filter-btn.active {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
    font-weight: 600;
  }
  
  .blog-grid {
    margin: 2rem 0 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }
  
  /* Enhanced Post Card Styles */
  .post-card {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }
  
  .post-card-inner {
    height: 100%;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .post-card:hover .post-card-inner {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
  }
  
  .post-image-container {
    position: relative;
  }
  
  .post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .post-category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--bg-primary);
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.25);
    font-family: var(--font-mono);
  }
  
  .post-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
  }
  
  .post-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }
  
  .post-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .post-title a:hover {
    color: var(--accent-primary);
  }
  
  .post-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }
  
  .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .post-tag {
    background: rgba(226, 232, 240, 0.05);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
  }
  
  .read-more {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.3s ease;
  }
  
  .read-more:hover {
    color: var(--accent-secondary);
  }
  
  .read-more::after {
    content: '→';
    transition: transform 0.3s ease;
  }
  
  .post-card:hover .read-more::after {
    transform: translateX(3px);
  }
  
  .no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.2);
    border-radius: 10px;
    border: 1px dashed var(--card-border);
  }
  
  /* Loading Indicator */
  .loading-indicator {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
  }
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .hero-content {
      flex-direction: column;
      gap: 2rem;
    }
    
    .terminal-container {
      max-width: 100%;
      width: 100%;
    }
    
    .hero-text {
      text-align: center;
      align-items: center;
    }
    
    .hero-description {
      max-width: 100%;
    }
    
    .graph-container {
      height: 50vh;
    }
  }
  
  @media (max-width: 768px) {
    .hero-section {
      padding: 4rem 0 3rem;
    }
    
    .section-header {
      margin-bottom: 2rem;
    }
    
    .search-filter-section {
      padding: 1rem;
    }
    
    .blog-grid {
      grid-template-columns: 1fr;
    }
  }
</style>