// MagiCV Custom Scripts

document.addEventListener('DOMContentLoaded', function () {
    console.log("MagiCV loaded!");

    const experienceContainer = document.getElementById('experience-entries');
    const addExperienceBtn = document.getElementById('add-experience-btn');
    const experienceTemplate = document.getElementById('experience-template');

    if (addExperienceBtn && experienceContainer && experienceTemplate) {
        addExperienceBtn.addEventListener('click', () => {
            const clone = experienceTemplate.content.cloneNode(true);
            experienceContainer.appendChild(clone);
            updateRemoveButtons();
        });
    }

    function updateRemoveButtons() {
        const removeButtons = experienceContainer.querySelectorAll('.remove-experience-btn');
        removeButtons.forEach(button => {
            button.removeEventListener('click', handleRemoveClick); // Avoid double-binding
            button.addEventListener('click', handleRemoveClick);
        });
    }

    function handleRemoveClick(event) {
        const entry = event.target.closest('.experience-entry');
        if (entry) {
            entry.remove();
        }
    }
    
    // Initial call to bind to any existing entries
    updateRemoveButtons();

    const educationContainer = document.getElementById('education-entries');
    const addEducationBtn = document.getElementById('add-education-btn');
    const educationTemplate = document.getElementById('education-template');

    if (addEducationBtn && educationContainer && educationTemplate) {
        addEducationBtn.addEventListener('click', () => {
            const clone = educationTemplate.content.cloneNode(true);
            educationContainer.appendChild(clone);
            updateRemoveEducationButtons();
        });
    }

    function updateRemoveEducationButtons() {
        const removeButtons = educationContainer.querySelectorAll('.remove-education-btn');
        removeButtons.forEach(button => {
            button.removeEventListener('click', handleRemoveEducationClick); // Avoid double-binding
            button.addEventListener('click', handleRemoveEducationClick);
        });
    }

    function handleRemoveEducationClick(event) {
        const entry = event.target.closest('.education-entry');
        if (entry) {
            entry.remove();
        }
    }

    // Initial call to bind to any existing entries
    updateRemoveEducationButtons();

    const skillInput = document.getElementById('skill-input');
    const addSkillBtn = document.getElementById('add-skill-btn');
    const skillsList = document.getElementById('skills-list');
    const skillsHiddenInput = document.getElementById('skills-hidden-input');

    if (addSkillBtn && skillInput && skillsList) {
        addSkillBtn.addEventListener('click', addSkill);
        skillInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // prevent form submission
                addSkill();
            }
        });
    }

    function addSkill() {
        const skillText = skillInput.value.trim();
        if (skillText !== "") {
            const skillBadge = document.createElement('span');
            skillBadge.className = 'badge bg-primary d-flex align-items-center fs-6';
            skillBadge.innerHTML = `
                ${skillText}
                <button type="button" class="btn-close btn-close-white ms-2" aria-label="Remove skill"></button>
            `;
            
            skillBadge.querySelector('button').addEventListener('click', function() {
                skillBadge.remove();
                updateSkillsInput();
            });

            skillsList.appendChild(skillBadge);
            updateSkillsInput();
            skillInput.value = "";
            skillInput.focus();
        }
    }

    function updateSkillsInput() {
        const skills = Array.from(skillsList.querySelectorAll('.badge')).map(badge => badge.innerText.trim());
        skillsHiddenInput.value = skills.join(',');
    }

    // Section navigation
    const form = document.getElementById('cv-form');
    const sections = form.querySelectorAll('[id^="section-"]');
    const navButtons = form.querySelectorAll('[data-next], [data-prev]');

    navButtons.forEach(button => {
        button.addEventListener('click', () => {
            const currentSection = button.closest('[id^="section-"]');
            const targetSectionId = button.dataset.next || button.dataset.prev;
            const targetSection = document.getElementById(targetSectionId);

            if (currentSection && targetSection) {
                currentSection.classList.add('d-none');
                targetSection.classList.remove('d-none');
                window.scrollTo(0, 0);
            }
        });
    });

    // Add a default experience and education entry on page load
    addExperienceBtn.click();
    addEducationBtn.click();
});