// --- theme toggle ---
const toggle = document.getElementById('theme-toggle')
const root = document.documentElement
const saved = localStorage.getItem('dark-mode')
const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches
if (saved === 'true') {
    root.classList.add('dark')
    root.classList.remove('light')
} else if (saved === 'false') {
    root.classList.add('light')
    root.classList.remove('dark')
} else {
    if (sysDark) {
        root.classList.add('dark')
        root.classList.remove('light')
    } else {
        root.classList.add('light')
        root.classList.remove('dark')
    }
}
toggle.addEventListener('click', () => {
    const isDark = root.classList.contains('dark')
    root.classList.toggle('dark', !isDark)
    root.classList.toggle('light', isDark)
    localStorage.setItem('dark-mode', !isDark)
})

const body = document.body

// --- lightbox base ---
const lb = document.getElementById('lightbox')
const lbCnt = document.getElementById('lb-content')
const lbCap = document.getElementById('lb-caption')
document.getElementById('lb-close').addEventListener('click', () => {
    lb.setAttribute('aria-hidden', 'true')
    body.classList.remove('lightbox-open')
    lbCnt.innerHTML = ''
})

// --- build gallery ---
const gallery = document.getElementById('gallery')
const mediaData = JSON.parse(document.getElementById('media-data').textContent)

const createPicture = (item) => {
    const pic = document.createElement('picture')
    ;['desktop', 'tablet', 'mobile'].forEach((bp) => {
        const src = document.createElement('source')
        const widthQuery = bp === 'desktop' ? 1024 : bp === 'tablet' ? 768 : 0
        src.media = `(min-width:${widthQuery}px)`
        if (item.type === 'image') {
            src.srcset =
                `assets/media/${bp}/${item.name}@1x.webp 1x, ` +
                `assets/media/${bp}/${item.name}.webp   2x`
        } else {
            // video poster still
            src.srcset =
                `assets/media/${bp}/${item.name}_still@1x.webp 1x, ` +
                `assets/media/${bp}/${item.name}_still.webp   2x`
        }
        pic.appendChild(src)
    })

    // thumbnail fallback (always 300px/2×)
    const img = document.createElement('img')
    img.src = `assets/media/thumbnail/${item.name}.webp`
    img.alt = item.alt.replace(/[‘’]/g, '')
    pic.appendChild(img)
    return pic
}

mediaData.forEach((item) => {
    const fig = document.createElement('figure')
    fig.className = `gallery-item${item.type === 'video' ? ' video' : ''}`
    fig.tabIndex = 0
    fig.dataset.name = item.name
    fig.dataset.type = item.type
    fig.dataset.caption = item.caption
    fig.appendChild(createPicture(item))

    // overlay caption
    const cap = document.createElement('figcaption')
    cap.textContent = item.caption
    fig.appendChild(cap)

    // events
    fig.addEventListener('click', () => openLightbox(item))
    fig.addEventListener(
        'keypress',
        (e) => e.key === 'Enter' && openLightbox(item)
    )

    gallery.appendChild(fig)
})

// --- video toggle ---
const videoTgl = document.getElementById('show_video')
videoTgl.addEventListener('click', () => {
    openLightbox(mediaData.find((i) => i.type === 'video'))
})

function openLightbox(item) {
    lbCnt.innerHTML = ''
    if (item.type === 'video') {
        const v = document.createElement('video')
        v.src = `assets/media/videos/${item.name}.mp4`
        v.controls = true
        v.autoplay = true
        lbCnt.appendChild(v)
    } else {
        lbCnt.appendChild(createPicture(item))
    }
    lbCap.textContent = item.caption
    body.classList.add('lightbox-open')
    lb.setAttribute('aria-hidden', 'false')
}
