// Hamed Site - Baby & Toddler Photo Album App

let currentTab = 'gallery';
let activeAlbumId = null;
let currentSearch = '';
let currentFavoriteOnly = false;
let allPhotos = [];
let activeLightboxIndex = 0;
let isAudioPlaying = false;
let audioCtx = null;
let musicInterval = null;

// Initialize on DOM load
document.addEventListener('DOMContentLoaded', () => {
    loadPhotos();
    loadStats();
    setupEventListeners();
});

function setupEventListeners() {
    // Search input
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        let debounceTimeout;
        searchInput.addEventListener('input', (e) => {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                currentSearch = e.target.value.trim();
                loadPhotos();
            }, 300);
        });
    }

    // Keyboard navigation for lightbox
    document.addEventListener('keydown', (e) => {
        const lightbox = document.getElementById('lightboxModal');
        if (lightbox && lightbox.classList.contains('open')) {
            if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
                prevLightbox();
            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
                nextLightbox();
            } else if (e.key === 'Escape') {
                closeModal('lightboxModal');
            }
        }
    });

    // File input drag & drop
    const dropArea = document.getElementById('fileDropArea');
    const fileInput = document.getElementById('photoFileInput');
    if (dropArea && fileInput) {
        dropArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', () => handleFileSelect(fileInput.files[0]));

        ['dragenter', 'dragover'].forEach(name => {
            dropArea.addEventListener(name, (e) => {
                e.preventDefault();
                dropArea.style.borderColor = '#2563eb';
                dropArea.style.background = '#dbeafe';
            });
        });

        ['dragleave', 'drop'].forEach(name => {
            dropArea.addEventListener(name, (e) => {
                e.preventDefault();
                dropArea.style.borderColor = '#93c5fd';
                dropArea.style.background = '#eff6ff';
            });
        });

        dropArea.addEventListener('drop', (e) => {
            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
                fileInput.files = e.dataTransfer.files;
                handleFileSelect(e.dataTransfer.files[0]);
            }
        });
    }
}

function handleFileSelect(file) {
    if (!file) return;
    const previewContainer = document.getElementById('photoPreviewContainer');
    const previewImg = document.getElementById('photoPreviewImg');
    const dropText = document.getElementById('dropText');
    
    if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImg.src = e.target.result;
            previewContainer.style.display = 'block';
            dropText.style.display = 'none';
        };
        reader.readAsDataURL(file);
    }
}

// Switch Tab
function switchTab(tabName) {
    currentTab = tabName;
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.tab === tabName);
    });

    document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.style.display = pane.id === `tab-${tabName}` ? 'block' : 'none';
    });

    if (tabName === 'gallery') {
        loadPhotos();
    } else if (tabName === 'albums') {
        loadAlbums();
    } else if (tabName === 'quotes') {
        loadQuotes();
    } else if (tabName === 'milestones') {
        loadMilestones();
    } else if (tabName === 'slideshow') {
        startSlideshow();
    }
}

// API Helper
async function api(action, data = null, isFormData = false) {
    try {
        let options = { method: data ? 'POST' : 'GET' };
        if (data) {
            if (isFormData) {
                options.body = data;
            } else {
                options.headers = { 'Content-Type': 'application/json' };
                options.body = JSON.stringify(data);
            }
        }
        const res = await fetch(`index.php?api=${action}`, options);
        return await res.json();
    } catch (err) {
        console.error('API Error:', err);
        showToast('خطا در برقراری ارتباط با سرور', 'error');
        return { success: false, error: err.message };
    }
}

// Load Photos
async function loadPhotos() {
    const grid = document.getElementById('photosGrid');
    if (!grid) return;
    grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px;"><p>در حال بارگذاری عکس‌های قشنگ... 👶🎈</p></div>';

    let url = `photos&search=${encodeURIComponent(currentSearch)}`;
    if (activeAlbumId) url += `&album_id=${activeAlbumId}`;
    if (currentFavoriteOnly) url += `&favorite_only=1`;

    const res = await api(url);
    if (res.success) {
        allPhotos = res.data;
        renderPhotos(res.data);
    }
}

function renderPhotos(photos) {
    const grid = document.getElementById('photosGrid');
    if (!photos || photos.length === 0) {
        grid.innerHTML = `
            <div class="empty-state" style="grid-column: 1/-1;">
                <div class="empty-state-icon">📸</div>
                <h3>هنوز عکسی در این بخش ثبت نشده!</h3>
                <p>با زدن دکمه «+ افزودن عکس جدید» اولین خاطره شیرین را اضافه کنید.</p>
                <button class="btn btn-primary" onclick="openModal('uploadPhotoModal')">+ افزودن اولین عکس</button>
            </div>
        `;
        return;
    }

    grid.innerHTML = photos.map((p, index) => `
        <div class="photo-card" data-id="${p.id}">
            <div class="photo-media-wrapper" onclick="openLightbox(${index})">
                <img src="${p.file_path}" alt="${p.title}" class="photo-media" loading="lazy">
                <span class="photo-badge-age">${p.age_tag || '۳ سالگی'}</span>
                <button class="fav-btn ${p.is_favorite ? 'active' : ''}" onclick="event.stopPropagation(); toggleFavorite(${p.id})">
                    ${p.is_favorite ? '⭐' : '☆'}
                </button>
            </div>
            <div class="photo-content">
                <div class="photo-album-tag">
                    <span>${p.album_icon || '🎈'}</span>
                    <span>${p.album_title || 'آلبوم عمومی'}</span>
                </div>
                <h3 class="photo-title">${escapeHtml(p.title)}</h3>
                <p class="photo-caption">${escapeHtml(p.caption || '')}</p>
                <div class="photo-footer">
                    <button class="like-action" onclick="likePhoto(${p.id})">
                        <span>❤️</span>
                        <span id="likes-count-${p.id}">${p.likes_count || 0}</span>
                    </button>
                    <div class="card-actions-menu">
                        <span style="font-size: 0.75rem;">📅 ${p.photo_date || ''}</span>
                        <button class="btn-icon-sm" title="حذف عکس" onclick="deletePhoto(${p.id})">🗑️</button>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
}

// Filter Album
function filterByAlbum(albumId, btnElement) {
    activeAlbumId = albumId;
    document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
    if (btnElement) btnElement.classList.add('active');
    loadPhotos();
}

function toggleFavoriteFilter() {
    currentFavoriteOnly = !currentFavoriteOnly;
    const btn = document.getElementById('favFilterBtn');
    if (btn) {
        btn.classList.toggle('active', currentFavoriteOnly);
        btn.innerText = currentFavoriteOnly ? '⭐ فقط برگزیده‌ها' : '⭐ نمایش همه';
    }
    loadPhotos();
}

// Like Photo
async function likePhoto(id) {
    const res = await api(`like_photo&id=${id}`, {});
    if (res.success) {
        const countSpan = document.getElementById(`likes-count-${id}`);
        if (countSpan) countSpan.innerText = res.likes;
        showConfetti();
    }
}

// Toggle Favorite
async function toggleFavorite(id) {
    const res = await api(`toggle_fav&id=${id}`, {});
    if (res.success) {
        loadPhotos();
        loadStats();
    }
}

// Delete Photo
async function deletePhoto(id) {
    if (!confirm('آیا از حذف این عکس خاطره‌انگیز مطمئن هستید؟')) return;
    const res = await api(`delete_photo&id=${id}`, {});
    if (res.success) {
        showToast('عکس با موفقیت حذف شد', 'success');
        loadPhotos();
        loadStats();
    }
}

// Lightbox
function openLightbox(index) {
    if (!allPhotos || allPhotos.length === 0) return;
    activeLightboxIndex = index;
    updateLightboxContent();
    openModal('lightboxModal');
}

function updateLightboxContent() {
    const photo = allPhotos[activeLightboxIndex];
    if (!photo) return;

    document.getElementById('lightboxImg').src = photo.file_path;
    document.getElementById('lightboxTitle').innerText = photo.title;
    document.getElementById('lightboxCaption').innerText = photo.caption || 'بدون توضیح';
    document.getElementById('lightboxAlbum').innerText = `${photo.album_icon || '🎈'} ${photo.album_title || 'عمومی'}`;
    document.getElementById('lightboxAge').innerText = photo.age_tag || '۳ سالگی';
    document.getElementById('lightboxDate').innerText = photo.photo_date || '';
    document.getElementById('lightboxLikes').innerText = photo.likes_count || 0;
    document.getElementById('lightboxDownloadBtn').href = photo.file_path;
}

function nextLightbox() {
    if (activeLightboxIndex < allPhotos.length - 1) {
        activeLightboxIndex++;
    } else {
        activeLightboxIndex = 0;
    }
    updateLightboxContent();
}

function prevLightbox() {
    if (activeLightboxIndex > 0) {
        activeLightboxIndex--;
    } else {
        activeLightboxIndex = allPhotos.length - 1;
    }
    updateLightboxContent();
}

// Albums Tab
async function loadAlbums() {
    const grid = document.getElementById('albumsGrid');
    if (!grid) return;
    grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px;"><p>در حال بارگذاری آلبوم‌ها... 📂</p></div>';

    const res = await api('albums');
    if (res.success) {
        if (!res.data || res.data.length === 0) {
            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center;">هنوز آلبومی ساخته نشده است.</p>';
            return;
        }
        grid.innerHTML = res.data.map(a => `
            <div class="album-box" onclick="filterByAlbum(${a.id}); switchTab('gallery');">
                <div class="album-icon-badge">${a.icon || '🎈'}</div>
                <h3>${escapeHtml(a.title)}</h3>
                <p>${escapeHtml(a.description || '')}</p>
                <div class="album-count-badge">📸 ${a.photos_count || 0} عکس</div>
            </div>
        `).join('');
    }
}

// Quotes Tab
async function loadQuotes() {
    const grid = document.getElementById('quotesGrid');
    if (!grid) return;
    grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px;"><p>در حال بارگذاری حرف‌های بامزه... 👶</p></div>';

    const res = await api('quotes');
    if (res.success) {
        if (!res.data || res.data.length === 0) {
            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center;">هنوز جمله‌ای ثبت نشده است.</p>';
            return;
        }
        grid.innerHTML = res.data.map(q => `
            <div class="quote-card">
                <div class="quote-bubble">${escapeHtml(q.quote)}</div>
                <div style="font-size: 0.85rem; color: #78350f; margin-bottom: 8px;">📍 ${escapeHtml(q.context || 'بدون توضیح')}</div>
                <div class="quote-meta">
                    <span>🏷️ ${q.age_tag || '۳ سالگی'}</span>
                    <span>📅 ${q.said_date || ''}</span>
                    <button class="btn-icon-sm" onclick="deleteQuote(${q.id})">🗑️</button>
                </div>
            </div>
        `).join('');
    }
}

async function deleteQuote(id) {
    if (!confirm('حذف این جمله بامزه؟')) return;
    const res = await api(`delete_quote&id=${id}`, {});
    if (res.success) {
        loadQuotes();
        loadStats();
    }
}

// Milestones Tab
async function loadMilestones() {
    const container = document.getElementById('milestonesList');
    if (!container) return;
    container.innerHTML = '<p style="text-align: center; padding: 30px;">در حال بارگذاری مراحل رشد... 🌟</p>';

    const res = await api('milestones');
    if (res.success) {
        if (!res.data || res.data.length === 0) {
            container.innerHTML = '<p style="text-align: center;">هنوز مرحله رشدی ثبت نشده است.</p>';
            return;
        }
        container.innerHTML = res.data.map(m => `
            <div class="timeline-item">
                <div class="timeline-icon">${m.icon || '🌟'}</div>
                <div class="timeline-card">
                    <div class="timeline-header">
                        <h3>${escapeHtml(m.title)}</h3>
                        <span class="timeline-age">${m.age_tag || '۳ سالگی'}</span>
                    </div>
                    <p style="color: #475569; font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px;">${escapeHtml(m.description || '')}</p>
                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: #94a3b8;">
                        <span>📅 تاریخ: ${m.milestone_date || ''}</span>
                        <button class="btn-icon-sm" onclick="deleteMilestone(${m.id})">🗑️</button>
                    </div>
                </div>
            </div>
        `).join('');
    }
}

async function deleteMilestone(id) {
    if (!confirm('حذف این دستاورد؟')) return;
    const res = await api(`delete_milestone&id=${id}`, {});
    if (res.success) {
        loadMilestones();
        loadStats();
    }
}

// Stats
async function loadStats() {
    const res = await api('stats');
    if (res.success) {
        document.getElementById('statPhotosCount').innerText = res.data.photos;
        document.getElementById('statAlbumsCount').innerText = res.data.albums;
        document.getElementById('statQuotesCount').innerText = res.data.quotes;
        document.getElementById('statMilestonesCount').innerText = res.data.milestones;
    }
}

// Forms Submission
async function submitPhotoUpload(e) {
    e.preventDefault();
    const form = document.getElementById('uploadPhotoForm');
    const formData = new FormData(form);

    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerText = 'در حال ذخیره‌سازی... ⏳';

    const res = await api('upload_photo', formData, true);
    submitBtn.disabled = false;
    submitBtn.innerText = 'ذخیره در آلبوم 🎈';

    if (res.success) {
        showToast('عکس با موفقیت به آلبوم اضافه شد!', 'success');
        closeModal('uploadPhotoModal');
        form.reset();
        document.getElementById('photoPreviewContainer').style.display = 'none';
        document.getElementById('dropText').style.display = 'block';
        loadPhotos();
        loadStats();
        showConfetti();
    } else {
        showToast(res.error || 'خطا در آپلود عکس', 'error');
    }
}

async function submitNewAlbum(e) {
    e.preventDefault();
    const form = document.getElementById('newAlbumForm');
    const formData = new FormData(form);

    const res = await api('create_album', formData, true);
    if (res.success) {
        showToast('آلبوم جدید با موفقیت ساخته شد!', 'success');
        closeModal('newAlbumModal');
        form.reset();
        loadAlbums();
        loadStats();
        // Update album dropdown in upload modal
        updateAlbumSelectOptions();
    } else {
        showToast(res.error || 'خطا در ایجاد آلبوم', 'error');
    }
}

async function submitNewQuote(e) {
    e.preventDefault();
    const form = document.getElementById('newQuoteForm');
    const formData = new FormData(form);

    const res = await api('create_quote', formData, true);
    if (res.success) {
        showToast('جمله بامزه ذخیره شد!', 'success');
        closeModal('newQuoteModal');
        form.reset();
        loadQuotes();
        loadStats();
    }
}

async function submitNewMilestone(e) {
    e.preventDefault();
    const form = document.getElementById('newMilestoneForm');
    const formData = new FormData(form);

    const res = await api('create_milestone', formData, true);
    if (res.success) {
        showToast('دستاورد رشد ثبت شد!', 'success');
        closeModal('newMilestoneModal');
        form.reset();
        loadMilestones();
        loadStats();
    }
}

// Modal Helpers
function openModal(id) {
    const modal = document.getElementById(id);
    if (modal) modal.classList.add('open');
}

function closeModal(id) {
    const modal = document.getElementById(id);
    if (modal) modal.classList.remove('open');
}

// Soothing Nursery Synthesizer for Slideshow
function toggleLullaby() {
    if (isAudioPlaying) {
        stopLullaby();
    } else {
        playLullaby();
    }
}

function playLullaby() {
    try {
        if (!audioCtx) {
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        isAudioPlaying = true;
        document.getElementById('musicToggleBtn').innerHTML = '🔊 توقف موزیک لایت';

        const notes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 523.25]; // C, D, E, F, G, A, C5
        let noteIdx = 0;

        musicInterval = setInterval(() => {
            if (!isAudioPlaying) return;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();

            const freq = notes[Math.floor(Math.random() * notes.length)];
            osc.type = 'sine';
            osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

            gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1.2);

            osc.connect(gain);
            gain.connect(audioCtx.destination);

            osc.start();
            osc.stop(audioCtx.currentTime + 1.2);
        }, 1200);

    } catch (e) {
        console.error('Audio init error', e);
    }
}

function stopLullaby() {
    isAudioPlaying = false;
    if (musicInterval) clearInterval(musicInterval);
    const btn = document.getElementById('musicToggleBtn');
    if (btn) btn.innerHTML = '🎵 پخش موزیک آرامش‌بخش';
}

let slideshowTimer = null;
let currentSlideshowIndex = 0;

function startSlideshow() {
    if (!allPhotos || allPhotos.length === 0) return;
    currentSlideshowIndex = 0;
    renderSlideshowSlide();
    
    if (slideshowTimer) clearInterval(slideshowTimer);
    slideshowTimer = setInterval(() => {
        currentSlideshowIndex = (currentSlideshowIndex + 1) % allPhotos.length;
        renderSlideshowSlide();
    }, 4500);
}

function renderSlideshowSlide() {
    const photo = allPhotos[currentSlideshowIndex];
    if (!photo) return;
    const slideImg = document.getElementById('slideshowCurrentImg');
    const slideTitle = document.getElementById('slideshowCurrentTitle');
    const slideDesc = document.getElementById('slideshowCurrentDesc');

    if (slideImg) slideImg.src = photo.file_path;
    if (slideTitle) slideTitle.innerText = photo.title;
    if (slideDesc) slideDesc.innerText = photo.caption || `${photo.album_title || ''} • ${photo.age_tag || '۳ سالگی'}`;
}

// Confetti Animation
function showConfetti() {
    for (let i = 0; i < 20; i++) {
        const conf = document.createElement('div');
        conf.innerText = ['🎈', '⭐', '🎉', '💖', '👶', '✨'][Math.floor(Math.random() * 6)];
        conf.style.position = 'fixed';
        conf.style.left = Math.random() * 90 + 5 + 'vw';
        conf.style.top = '100vh';
        conf.style.fontSize = Math.random() * 20 + 20 + 'px';
        conf.style.zIndex = 9999;
        conf.style.pointerEvents = 'none';
        conf.style.transition = 'all 2.5s ease-out';
        document.body.appendChild(conf);

        setTimeout(() => {
            conf.style.top = Math.random() * 20 + 'vh';
            conf.style.opacity = '0';
            conf.style.transform = `scale(${Math.random() + 0.5}) rotate(${Math.random() * 360}deg)`;
        }, 50);

        setTimeout(() => conf.remove(), 2600);
    }
}

// Toast
function showToast(msg, type = 'info') {
    const toast = document.createElement('div');
    toast.style.position = 'fixed';
    toast.style.bottom = '24px';
    toast.style.right = '24px';
    toast.style.background = type === 'error' ? '#ef4444' : '#10b981';
    toast.style.color = '#ffffff';
    toast.style.padding = '12px 22px';
    toast.style.borderRadius = '12px';
    toast.style.fontWeight = '700';
    toast.style.fontSize = '0.92rem';
    toast.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
    toast.style.zIndex = 10000;
    toast.style.direction = 'rtl';
    toast.innerText = msg;
    document.body.appendChild(toast);

    setTimeout(() => {
        toast.style.transition = 'opacity 0.5s';
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 500);
    }, 3000);
}

function escapeHtml(text) {
    if (!text) return '';
    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}