import { createRecommendationPopup, populateAuthorsContainer } from './recommendations-utils.js';

// StarterKit-Element erstellen
export function createStarterKitElement(kit) {
    const template = document.getElementById('starterkit-template').content.cloneNode(true);

    // Titel und Beschreibung
    const kitElement = template.querySelector('.starterkit');
    kitElement.querySelector('h3').textContent = kit.name;
    kitElement.querySelector('p').textContent = kit.description;

    // Profilanzahl
    const profileCount = kitElement.querySelector('.profile-count');
    profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;

    // Autoren hinzufügen
    const authorsContainer = kitElement.querySelector('.authors-container');
    if (!authorsContainer) {
        console.error('Fehlendes Element: .authors-container im Template. Bitte prüfen!');
        return kitElement;
    }

    populateAuthorsContainer(authorsContainer, kit.authors);
    kitElement.dataset.accounts = JSON.stringify(kit.accounts);
    kitElement.dataset.authors = JSON.stringify(kit.authors);

    return kitElement;
}

// StarterKits mit Event-Listenern versehen
export function enhanceStarterKits() {
    const starterkits = document.querySelectorAll('.starterkit');

    starterkits.forEach(kit => {
        kit.addEventListener('click', function () {
            handleStarterKitClick(kit);
        });
    });
}

// StarterKit-Klick behandeln
function handleStarterKitClick(kit) {
    loadStarterKitProfiles(kit);
}

// StarterKit-Profile laden
function loadStarterKitProfiles(kit) {
    const title = kit.querySelector('h3').textContent;
    const description = kit.querySelector('p').textContent;
    const accounts = JSON.parse(kit.dataset.accounts || '[]');
    const authors = JSON.parse(kit.dataset.authors || '[]');

    const popup = createRecommendationPopup(accounts, title, authors, description);
    document.body.appendChild(popup);
}