// Mobile Menu Toggle
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');

hamburger.addEventListener('click', function () {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
});

// Close menu when clicking on nav links
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
    });
});

// Close menu when clicking outside
document.addEventListener('click', function (event) {
    if (!hamburger.contains(event.target) && !navMenu.contains(event.target)) {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
    }
});

// Page Navigation
function showPage(pageId) {
    const pages = document.querySelectorAll('.page');
    pages.forEach(page => page.classList.remove('active'));

    document.getElementById(pageId).classList.add('active');

    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => link.classList.remove('active'));
    event.target.classList.add('active');

    window.scrollTo(0, 0);
}

// Timeline Functionality
const container = document.getElementById('timelineContainer');
const logoImg = document.getElementById('currentLogo');
const timelineItems = document.querySelectorAll('.timeline-item');

function updateActiveItem() {
    if (!container || !logoImg || timelineItems.length === 0) return;

    const containerRect = container.getBoundingClientRect();
    const containerCenter = containerRect.top + containerRect.height / 2;

    let closestItem = null;
    let closestDistance = Infinity;

    timelineItems.forEach(item => {
        const itemRect = item.getBoundingClientRect();
        const itemCenter = itemRect.top + itemRect.height / 2;
        const distance = Math.abs(itemCenter - containerCenter);
        const isVisible = itemRect.bottom > containerRect.top && itemRect.top < containerRect.bottom;

        if (isVisible && distance < closestDistance) {
            closestDistance = distance;
            closestItem = item;
        }
    });

    if (closestItem) {
        timelineItems.forEach(item => {
            item.classList.remove('active-item');
            const itemRect = item.getBoundingClientRect();
            if (itemRect.bottom > containerRect.top && itemRect.top < containerRect.bottom) {
                item.classList.add('visible');
            } else {
                item.classList.remove('visible');
            }
        });

        closestItem.classList.add('active-item');

        const logoSrc = closestItem.getAttribute('data-logo');
        if (logoImg.src !== logoSrc) {
            logoImg.classList.remove('active');
            setTimeout(() => {
                logoImg.src = logoSrc;
                logoImg.classList.add('active');
            }, 150);
        }
    }
}

if (container) {
    container.addEventListener('scroll', updateActiveItem);
    setTimeout(updateActiveItem, 100);
}

// Contact Form Handler
const contactForm = document.querySelector('.contact-form form');
const submitBtn = document.querySelector('.submit-btn');

if (contactForm && submitBtn) {
    contactForm.addEventListener('submit', async function (e) {
        e.preventDefault();
        const formData = new FormData(contactForm);
        const data = {
            name: formData.get('name'),
            email: formData.get('email'),
            phone: formData.get('phone'),
            subject: formData.get('subject'),
            message: formData.get('message')
        };

        submitBtn.disabled = true;
        submitBtn.textContent = 'Илгээж байна...';

        try {
            const response = await fetch('/api/contact', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                showMessage('Таны мессеж амжилттай илгээгдлээ!', 'success');
                contactForm.reset();
            } else {
                throw new Error('Server error');
            }
        } catch (error) {
            console.error('Error:', error);
            showMessage('Алдаа гарлаа. Дахин оролдоно уу.', 'error');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Илгээх';
        }
    });
}

function showMessage(message, type) {
    const existingMessage = document.querySelector('.form-message');
    if (existingMessage) existingMessage.remove();

    const messageDiv = document.createElement('div');
    messageDiv.className = `form-message ${type}`;
    messageDiv.textContent = message;

    contactForm.parentNode.insertBefore(messageDiv, contactForm.nextSibling);
    setTimeout(() => messageDiv.remove(), 5000);
}

// News and Projects Management
const newsGrid = document.getElementById('newsGrid');
const ongoingProjectsGrid = document.getElementById('ongoingProjectsGrid');
const completedProjectsGrid = document.getElementById('completedProjectsGrid');
const modal = document.getElementById('modal');
const closeModal = document.getElementById('closeModal');
const modalDate = document.getElementById('modalDate');
const modalTitle = document.getElementById('modalTitle');
const modalBody = document.getElementById('modalBody');

function createNewsCards(newsData) {
    if (!newsGrid) return;

    newsGrid.innerHTML = '';
    newsData.slice().reverse().forEach((news, index) => {
        const card = document.createElement('div');
        card.className = 'news-card';
        card.style.animationDelay = `${index * 0.1}s`;

        card.innerHTML = `
                    <div class="news-date">${news.date}</div>
                    <h3>${news.title}</h3>
                    <p>${news.excerpt}</p>
                    <span class="read-more">Дэлгэрэнгүй унших →</span>
                `;

        card.addEventListener('click', () => openModal(news));
        newsGrid.appendChild(card);
    });
}

function createProjectCards(projects) {
    if (!projects || projects.length === 0) return;

    projects.forEach((project, index) => {
        const targetGrid = project.type === "completed" ? completedProjectsGrid : ongoingProjectsGrid;
        if (!targetGrid) return;

        const card = document.createElement('div');
        card.className = 'project-card';
        card.style.animationDelay = `${index * 0.1}s`;

        if (project.imageUrl) {
            const projectImage = document.createElement('div');
            projectImage.className = 'project-image';
            const img = document.createElement('img');
            img.src = project.imageUrl;
            img.alt = project.title || 'Project image';
            projectImage.appendChild(img);
            card.appendChild(projectImage);
        }

        if (project.title) {
            const title = document.createElement('h4');
            title.textContent = project.title;
            card.appendChild(title);
        }

        if (project.details && project.details.length > 0) {
            const projectDetails = document.createElement('div');
            projectDetails.className = "project-details";

            let detailsHTML = '';
            project.details.forEach((data) => {
                detailsHTML += `<p><strong>${data.key}:</strong> ${data.value}</p>`;
            });
            projectDetails.innerHTML = detailsHTML;
            card.appendChild(projectDetails);
        }

        targetGrid.appendChild(card);
    });
}

function openModal(news) {
    if (!modal || !modalDate || !modalTitle || !modalBody) return;

    modalDate.textContent = news.date;
    modalTitle.textContent = news.title;
    modalBody.innerHTML = news.fullContent;
    modal.classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closeModalFunc() {
    if (!modal) return;

    modal.classList.remove('show');
    document.body.style.overflow = 'auto';
}

// Modal Event Listeners
if (closeModal) {
    closeModal.addEventListener('click', closeModalFunc);
}

if (modal) {
    modal.addEventListener('click', (e) => {
        if (e.target === modal) closeModalFunc();
    });
}

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modal && modal.classList.contains('show')) {
        closeModalFunc();
    }
});

// Load Data on Page Load
document.addEventListener('DOMContentLoaded', function () {
    // Load news posts
    fetch('/api/posts')
        .then(response => response.json())
        .then(data => createNewsCards(data.posts))
        .catch(error => console.error('Error fetching posts:', error));

    // Load projects
    fetch('/api/projects')
        .then(response => response.json())
        .then(data => createProjectCards(data.projects))
        .catch(error => console.error('Error fetching projects:', error));
});