philippurbschat.de/plants/lexikon.js

// Version: 29.09.2025 16:05
import * as api from './api.js';

// --- State-Variablen ---
let lexiconGrid;
let lexiconSearch;
let lexiconDetailModal;
let allPlants = [];

// --- Hilfsfunktion, um das Modal-Element zu holen ---
function getModalElement() {
    if (!lexiconDetailModal) {
        lexiconDetailModal = document.getElementById('lexiconDetailModal');
    }
    return lexiconDetailModal;
}

// --- Hauptfunktionen für das Lexikon-Modal (exportiert) ---

export async function openLexiconDetailModal(latinName) {
    const modal = getModalElement();
    if (!modal) {
        console.error("Lexikon-Detail-Modal nicht im DOM gefunden!");
        return;
    }

    try {
        const plant = await api.getLexiconEntryDetails(latinName);
        
        const mainImage = modal.querySelector('#lexiconModalImage');
        const placeholderImg = 'https://placehold.co/800x600/eeeeee/3D403D?text=' + encodeURIComponent(plant.name);

        modal.querySelector('#lexiconModalPlantName').textContent = plant.name;
        modal.querySelector('#lexiconModalLatinName').textContent = plant.latin_name;
        
        const thumbnailContainer = modal.querySelector('.lexicon-modal-thumbnails');
        thumbnailContainer.innerHTML = '';

        if (plant.photo_gallery && plant.photo_gallery.length > 0) {
            mainImage.src = plant.photo_gallery[0];
            
            if (plant.photo_gallery.length > 1) {
                thumbnailContainer.style.display = 'flex';
                plant.photo_gallery.forEach((photoUrl, index) => {
                    const thumb = document.createElement('img');
                    thumb.src = photoUrl;
                    thumb.className = 'thumbnail-img';
                    if (index === 0) thumb.classList.add('active');
                    thumb.addEventListener('click', (e) => {
                        mainImage.src = photoUrl;
                        thumbnailContainer.querySelectorAll('.thumbnail-img').forEach(t => t.classList.remove('active'));
                        e.target.classList.add('active');
                    });
                    thumbnailContainer.appendChild(thumb);
                });
            } else {
                thumbnailContainer.style.display = 'none';
            }
        } else {
            mainImage.src = placeholderImg;
            thumbnailContainer.style.display = 'none';
        }
        mainImage.onerror = function() { this.src = placeholderImg; };

        const familySpan = modal.querySelector('#lexiconModalFamily');
        const genusSpan = modal.querySelector('#lexiconModalGenus');
        const metaContainer = modal.querySelector('.lexicon-modal-meta');
        const hasFamily = plant.plant_family && plant.plant_family.toLowerCase() !== 'unbekannt';
        const hasGenus = plant.plant_genus && plant.plant_genus.toLowerCase() !== 'unbekannt';
        familySpan.textContent = hasFamily ? plant.plant_family : '';
        familySpan.parentElement.style.display = hasFamily ? 'block' : 'none';
        genusSpan.textContent = hasGenus ? plant.plant_genus : '';
        genusSpan.parentElement.style.display = hasGenus ? 'block' : 'none';
        metaContainer.style.display = (hasFamily || hasGenus) ? 'flex' : 'none';

        const descriptionContainer = modal.querySelector('.lexicon-modal-description');
        if (plant.description_full) {
            const sections = plant.description_full.split(/\n\s*\n/);
            let formattedHtml = '';
            sections.forEach(section => {
                const parts = section.split(/:(.*)/s); 
                if (parts.length > 1) {
                    const title = parts[0].trim();
                    const content = parts[1].trim();
                    if (title && content) {
                         formattedHtml += `<h3>${title}</h3><p>${content.replace(/\n/g, '<br>')}</p>`;
                    }
                } else if (section.trim()) {
                    formattedHtml += `<p>${section.trim().replace(/\n/g, '<br>')}</p>`;
                }
            });
            descriptionContainer.innerHTML = formattedHtml;
        } else {
            descriptionContainer.innerHTML = '<p>Keine Beschreibung verfügbar.</p>';
        }

        modal.classList.add('show');
        document.body.classList.add('modal-open');
    } catch (error) {
        console.error('Fehler beim Laden der Pflanzendetails:', error);
        // Hier könnte man dem User eine UI-Nachricht zeigen
    }
}

export function closeLexiconDetailModal() {
    const modal = getModalElement();
    if (modal) {
        modal.classList.remove('show');
        if (!document.querySelector('.modal.show')) {
            document.body.classList.remove('modal-open');
        }
    }
}


// --- Funktionen nur für die lexikon.php Seite ---

async function loadLexiconOverview() {
    try {
        allPlants = await api.getLexiconEntries();
        renderLexiconOverview(allPlants);
    } catch (error) {
        console.error('Fehler beim Laden des Lexikons:', error);
        if (lexiconGrid) {
            lexiconGrid.innerHTML = '<p>Das Lexikon konnte nicht geladen werden.</p>';
        }
    }
}

function renderLexiconOverview(plants) {
    if (!lexiconGrid) return;
    lexiconGrid.innerHTML = '';
    if (plants.length === 0) {
        lexiconGrid.innerHTML = '<p>Noch keine Einträge im Lexikon vorhanden.</p>';
        return;
    }
    plants.forEach(plant => {
        const card = document.createElement('div');
        card.className = 'lexicon-card';
        card.dataset.latinName = plant.latin_name;
        
        const placeholderImg = 'https://placehold.co/600x600/eeeeee/3D403D?text=' + encodeURIComponent(plant.name);

        card.innerHTML = `
            <div class="lexicon-card-img-container">
                <img src="${plant.photo_url || placeholderImg}" alt="${plant.name}" class="lexicon-card-img" onerror="this.src='${placeholderImg}'">
            </div>
            <div class="lexicon-card-info">
                <h3>${plant.name}</h3>
                <p>${plant.latin_name}</p>
            </div>
        `;
        lexiconGrid.appendChild(card);
    });
}

function handleSearch() {
    const searchTerm = lexiconSearch.value.toLowerCase();
    const filteredPlants = allPlants.filter(plant => 
        plant.name.toLowerCase().includes(searchTerm) || 
        plant.latin_name.toLowerCase().includes(searchTerm)
    );
    renderLexiconOverview(filteredPlants);
}

// --- Initialisierung ---
function init() {
    // Diese DOM-Elemente gibt es NUR auf der lexikon.php
    lexiconGrid = document.getElementById('lexicon-grid');
    lexiconSearch = document.getElementById('lexiconSearch');
    
    // Wenn wir auf der Lexikon-Seite sind, initialisiere die Übersicht
    if (lexiconGrid && lexiconSearch) {
        loadLexiconOverview();
        lexiconSearch.addEventListener('input', handleSearch);
        lexiconGrid.addEventListener('click', (e) => {
            const card = e.target.closest('.lexicon-card');
            if (card) {
                openLexiconDetailModal(card.dataset.latinName);
            }
        });
    }

    // Das Modal selbst kann auf beiden Seiten existieren
    const modal = getModalElement();
    if (modal) {
        const closeButton = modal.querySelector('.close-btn');
        if (closeButton) {
            closeButton.addEventListener('click', closeLexiconDetailModal);
        }
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeLexiconDetailModal();
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', init);