const urlParams = new URLSearchParams(window.location.search);
const recipeId = urlParams.get('id');

if (!recipeId) {
  window.location.href = '/index.html';
}

async function loadRecipe() {
  try {
    const response = await fetch(`/api/recipes/${recipeId}`);
    if (!response.ok) throw new Error('Rezept nicht gefunden');
    
    const recipe = await response.json();
    displayRecipe(recipe);
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Laden des Rezepts');
    window.location.href = '/index.html';
  }
}

function displayRecipe(recipe) {
  const rNummer = 'R' + String(recipe.rezeptnummer).padStart(3, '0');
  
  document.getElementById('rezeptnummer').textContent = rNummer;
  document.getElementById('bezeichnung').textContent = recipe.bezeichnung;
  document.getElementById('beschreibung').innerHTML = makeClickableLinks(recipe.beschreibung || '');
  
  if (recipe.bilder && recipe.bilder.length > 0) {
    document.getElementById('hauptbild').innerHTML = 
      `<img class="oben" src="/${recipe.bilder[0].dateiPfad}" alt="Rezeptbild">`;
  }
  
  if (recipe.vorbereitung && recipe.vorbereitung.trim()) {
    document.getElementById('vorbereitung').innerHTML = 
      `<br>Vorbereitung: <span style="font-size:0.9em;">${makeClickableLinks(recipe.vorbereitung)}</span>`;
  }
  
  if (recipe.zutaten && recipe.zutaten.trim()) {
    let header = '<br>Zutaten';
    if (recipe.anzahl) {
      header += ` <span style="font-size: 1.2em;">für ${recipe.anzahl} Personen:</span>`;
    }
    document.getElementById('zutatenHeader').innerHTML = header;
    document.getElementById('zutaten').textContent = recipe.zutaten;
  } else {
    document.getElementById('zutatenContainer').style.display = 'none';
  }
  
  if (recipe.zubereitung && recipe.zubereitung.length > 0) {
    const maxSteps = Math.max(recipe.zubereitung.length, recipe.bilder ? recipe.bilder.length - 1 : 0);
    let html = '';
    
    for (let i = 0; i < maxSteps; i++) {
      const step = recipe.zubereitung[i];
      const bild = recipe.bilder && recipe.bilder[i + 1] ? recipe.bilder[i + 1] : null;
      
      html += '<tr>';
      if (bild) {
        html += `<td><img class="vergroesserbar" src="/${bild.dateiPfad}" alt="Schritt ${i+1}" onclick="openLightbox('/${bild.dateiPfad}')"></td>`;
      } else {
        html += '<td></td>';
      }
      
      html += `<td style="text-align:justify;padding:20px;font-size:1.2em;">${step ? escapeHtml(step.text) : '&nbsp;'}</td>`;
      html += '</tr>';
    }
    
    document.getElementById('zubereitungSteps').innerHTML = html;
  } else {
    document.getElementById('zubereitungContainer').style.display = 'none';
  }
  
  if (recipe.kommentar && recipe.kommentar.trim()) {
    document.getElementById('kommentarContainer').innerHTML = `
      <table>
        <tr><td><br><br><span style="font-size:1.4em">Kommentar</span><br><br>
        <span style="font-size: 1.2em; display: block;">${makeClickableLinks(recipe.kommentar)}</span></td></tr>
      </table>
    `;
  }
  
  document.getElementById('editBtn').onclick = () => {
    window.location.href = `/edit.html?id=${recipeId}`;
  };
}

function makeClickableLinks(text) {
  const urlPattern = /(?:(?:https?:\/\/)|(?:www\.))[^\s<>"'()]+/gi;
  return text.replace(urlPattern, url => `<a href="${url}" target="_blank">${url}</a>`);
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function openLightbox(src) {
  document.getElementById('lightbox').style.display = 'block';
  document.getElementById('lightbox-img').src = src;
}

function closeLightbox() {
  document.getElementById('lightbox').style.display = 'none';
}

loadRecipe();