script.js

// Mobile Navigation Toggle
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.getElementById('hamburger');
    const mobileNav = document.getElementById('mobileNav');

    if (hamburger && mobileNav) {
        hamburger.addEventListener('click', function() {
            hamburger.classList.toggle('active');
            mobileNav.classList.toggle('active');
        });

        // Close mobile menu when clicking a link
        const mobileLinks = mobileNav.querySelectorAll('.nav-link');
        mobileLinks.forEach(link => {
            link.addEventListener('click', function() {
                hamburger.classList.remove('active');
                mobileNav.classList.remove('active');
            });
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', function(event) {
            const isClickInsideNav = mobileNav.contains(event.target);
            const isClickOnHamburger = hamburger.contains(event.target);

            if (!isClickInsideNav && !isClickOnHamburger && mobileNav.classList.contains('active')) {
                hamburger.classList.remove('active');
                mobileNav.classList.remove('active');
            }
        });
    }
});

// Contact Form Handling (Formspree + Fetch)
const contactForm = document.getElementById('contactForm');
if (contactForm) {
    contactForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const formNote = document.getElementById('formNote');
        const submitBtn = contactForm.querySelector('button[type="submit"]');

        // Basic client-side validation
        const name = contactForm.querySelector('#name');
        const email = contactForm.querySelector('#email');
        const message = contactForm.querySelector('#message');

        if (!name.value.trim() || !email.value.trim() || !message.value.trim()) {
            formNote.style.display = 'block';
            formNote.textContent = 'Please fill out the required fields.';
            return;
        }

        // Disable button while submitting
        submitBtn.disabled = true;
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Sending...';

        // Prepare form data
        const data = new FormData(contactForm);

        try {
            const action = contactForm.getAttribute('action');
            const resp = await fetch(action, {
                method: 'POST',
                body: data,
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (resp.ok) {
                formNote.style.display = 'block';
                formNote.textContent = 'Thanks -- I\'ll get back to you soon!';
                contactForm.reset();
            } else {
                const result = await resp.json().catch(() => ({}));
                formNote.style.display = 'block';
                formNote.textContent = result.error || 'There was a problem sending your message. Please try again later.';
            }
        } catch (err) {
            formNote.style.display = 'block';
            formNote.textContent = 'Network error. Please check your connection and try again.';
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        }
    });
}

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        // Use the element's `hash` property to avoid invalid selector issues
        const hash = this.hash; // returns string like "#section" or ""
        if (!hash || hash === '#') return; // nothing to scroll to

        // Only prevent default when we have a valid target to scroll to
        const target = document.querySelector(hash);
        if (target) {
            e.preventDefault();
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Generic Modal Handler
function openModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
}

// Clear embedded PDF content when closing the PDF modal
const originalCloseModal = closeModal;
closeModal = function(modalId) {
    if (modalId === 'pdfModal') {
        const pdfContainer = document.getElementById('pdfViewerContainer');
        if (pdfContainer) pdfContainer.innerHTML = '';
    }
    originalCloseModal(modalId);
};

// Handle all data-modal buttons (open modal)
document.querySelectorAll('[data-modal]').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        const modalId = this.getAttribute('data-modal');
        // Support both direct modal IDs and legacy format (e.g., "script-request" -> "scriptModal")
        const resolvedModalId = modalId === 'script-request' ? 'scriptModal' : (modalId + '-modal');
        openModal(resolvedModalId);
    });
});

// Handle all modal close buttons (via data-close-modal)
document.querySelectorAll('[data-close-modal]').forEach(closeBtn => {
    closeBtn.addEventListener('click', function() {
        const modalId = this.getAttribute('data-close-modal');
        closeModal(modalId);
    });
});

// Legacy support: handle old closeModal ID buttons
const legacyCloseModal = document.getElementById('closeModal');
if (legacyCloseModal) {
    legacyCloseModal.addEventListener('click', function() {
        closeModal('scriptModal');
    });
}

// PDF.js loader + renderer
const PDFJS_CDN = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js';
const PDFJS_WORKER_CDN = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

function loadPdfJsOnce() {
    return new Promise((resolve, reject) => {
        if (window.pdfjsLib) return resolve(window.pdfjsLib);
        const s = document.createElement('script');
        s.src = PDFJS_CDN;
        s.onload = () => {
            if (!window.pdfjsLib) return reject(new Error('pdfjs failed to load'));
            window.pdfjsLib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_CDN;
            resolve(window.pdfjsLib);
        };
        s.onerror = () => reject(new Error('Failed to load pdfjs script'));
        document.head.appendChild(s);
    });
}

async function renderPdfToContainer(pdfUrl, containerEl) {
    containerEl.innerHTML = '';
    const loading = document.createElement('div');
    loading.textContent = 'Loading document...';
    loading.style.padding = '1rem';
    containerEl.appendChild(loading);

    try {
        const pdfjsLib = await loadPdfJsOnce();
        const loadingTask = pdfjsLib.getDocument(pdfUrl);
        const pdf = await loadingTask.promise;
        containerEl.innerHTML = '';
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            // eslint-disable-next-line no-await-in-loop
            const page = await pdf.getPage(pageNum);
            const viewport = page.getViewport({ scale: 1 });
            const containerWidth = containerEl.clientWidth || (window.innerWidth * 0.9);
            const scale = (containerWidth / viewport.width) * (window.devicePixelRatio || 1);
            const scaledViewport = page.getViewport({ scale });

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = Math.floor(scaledViewport.width);
            canvas.height = Math.floor(scaledViewport.height);
            canvas.style.width = '100%';
            canvas.style.height = 'auto';
            containerEl.appendChild(canvas);

            const renderContext = { canvasContext: context, viewport: scaledViewport };
            // eslint-disable-next-line no-await-in-loop
            await page.render(renderContext).promise;
        }
    } catch (err) {
        containerEl.innerHTML = '<p style="padding:1rem;color:var(--rust);">Failed to load document.</p>';
        console.error('PDF render error', err);
    }
}

// Handle PDF preview buttons using PDF.js renderer
document.querySelectorAll('[data-pdf]').forEach(button => {
    button.addEventListener('click', async function(e) {
        e.preventDefault();
        const pdfUrl = this.getAttribute('data-pdf');
        const parent = this.closest('.writing-item') || this.closest('.content-card') || document.body;
        const titleEl = parent.querySelector('.writing-title, .card-title');
        const title = titleEl ? titleEl.textContent.trim() : 'Preview';

        const pdfContainer = document.getElementById('pdfViewerContainer');
        const pdfTitle = document.getElementById('pdfTitle');
        const pdfDownload = document.getElementById('pdfDownload');
        const pdfOpenNew = document.getElementById('pdfOpenNew');

        if (pdfTitle) pdfTitle.textContent = title;
        if (pdfDownload) pdfDownload.href = pdfUrl;
        if (pdfOpenNew) pdfOpenNew.href = pdfUrl;

        openModal('pdfModal');
        if (pdfContainer) await renderPdfToContainer(pdfUrl, pdfContainer);
    });
});

// Close modal when clicking outside
document.querySelectorAll('.modal-overlay').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal(this.id);
        }
    });
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal-overlay.active').forEach(modal => {
            closeModal(modal.id);
        });
    }
});