let allRecipes = [];
let activeTags = new Set();
let allTags = new Set();

const TAG_LABELS = {
  "heart-healthy": "❤️ Heart Healthy",
  "diabetic": "🩸 Diabetic Safe",
  "low-sodium": "🧂 Low Sodium",
  "gluten-free": "🌾 Gluten-Free",
  "kidney-friendly": "🫘 Kidney Friendly",
  "low-carb": "🥩 Low Carb",
  "vegan": "🥗 Vegan",
  "dairy-free": "🥛 Dairy-Free",
  "keto": "🥑 Keto",
  "breakfast": "🍳 Breakfast",
  "lunch": "🥪 Lunch",
  "dinner": "🍲 Dinner",
  "snacks": "🥨 Snacks"
};

document.addEventListener('DOMContentLoaded', () => {
  fetch('recipes.json')
    .then(res => res.json())
    .then(data => {
      allRecipes = data;
      extractTags();
      renderToggles();
      renderGrid();
    })
    .catch(err => console.error("Could not load recipes:", err));
});

function extractTags() {
  allRecipes.forEach(recipe => {
    recipe.tags.forEach(tag => allTags.add(tag));
  });
}

function renderToggles() {
  const container = document.getElementById('filter-toggles');
  container.innerHTML = '';
  
  // Sort tags alphabetically but prioritize medical ones
  const sortedTags = Array.from(allTags).sort();
  
  sortedTags.forEach(tag => {
    const btn = document.createElement('button');
    btn.className = 'tag-btn';
    btn.textContent = TAG_LABELS[tag] || tag;
    btn.dataset.tag = tag;
    
    btn.addEventListener('click', () => {
      if (activeTags.has(tag)) {
        activeTags.delete(tag);
        btn.classList.remove('active');
      } else {
        activeTags.add(tag);
        btn.classList.add('active');
      }
      renderGrid();
    });
    
    container.appendChild(btn);
  });
}

function formatTagText(tag) {
  return TAG_LABELS[tag] || tag;
}

function renderGrid() {
  const container = document.getElementById('recipe-grid');
  container.innerHTML = '';
  
  // FILTER LOGIC: Recipe must contain ALL active tags
  const filtered = allRecipes.filter(recipe => {
    for (let tag of activeTags) {
      if (!recipe.tags.includes(tag)) return false;
    }
    return true;
  });
  
  document.getElementById('res-count').textContent = filtered.length;
  
  if (filtered.length === 0) {
    container.innerHTML = '<div style="grid-column: 1/-1; text-align:center; padding: 40px; color: var(--text-muted);">No exact matches found for this combination of restrictions. Please remove a filter.</div>';
    return;
  }
  
  filtered.forEach(recipe => {
    // Generate static URL format to match the build-script
    const url = `${recipe.id}.html`;
    
    const emoji = recipe.title.toLowerCase().includes('salmon') ? '🐟' :
                  recipe.title.toLowerCase().includes('salad') ? '🥗' :
                  recipe.title.toLowerCase().includes('chicken') ? '🍗' : '🍲';
                  
    const tagsHTML = recipe.tags.map(t => `<span class="badge-tag">${formatTagText(t)}</span>`).join('');
    
    const card = document.createElement('a');
    card.href = url;
    card.className = 'recipe-card';
    card.innerHTML = `
      <div class="recipe-img-placeholder">${emoji}</div>
      <div class="recipe-content">
        <div class="recipe-title">${recipe.title}</div>
        <div class="recipe-desc">${recipe.description}</div>
        <div class="recipe-meta">
          <span>⏱️ ${recipe.prep_time} Prep</span>
          <span>🔥 ${recipe.cook_time} Cook</span>
        </div>
        <div class="recipe-tags-list">
          ${tagsHTML}
        </div>
      </div>
    `;
    container.appendChild(card);
  });
}