// --- Helper Fungsi ---

/**
 * Normalisasi nomor telepon ke format standard e.g. 628...
 * @param {string} phone - Nomor telepon mentah
 * @returns {string} Nomor telepon ternormalisasi
 */
function normalizePhone(phone) {
    let digits = String(phone || '').replace(/\D/g, '');
    if (digits.startsWith('0')) {
        digits = `62${digits.slice(1)}`;
    } else if (digits.startsWith('8')) {
        digits = `62${digits}`;
    }
    return digits;
}

/**
 * Format nomor telepon untuk tampilan UI
 * @param {string} phone - Nomor telepon mentah
 * @returns {string} Nomor telepon terformat (e.g. +62 8xx-xxxx-xxxx)
 */
function formatPhoneForDisplay(phone) {
    const norm = normalizePhone(phone);
    if (!norm) return '-';
    return `+${norm.slice(0, 2)} ${norm.slice(2, 5)}-${norm.slice(5, 9)}-${norm.slice(9)}`;
}

/**
 * Memvalidasi apakah nomor telepon valid untuk digunakan di WhatsApp.
 * @param {string} phone - Nomor telepon mentah
 * @returns {boolean} True jika nomor valid (seluler Indonesia 10-15 digit)
 */
function isValidWhatsAppNumber(phone) {
    const norm = normalizePhone(phone);
    return norm.startsWith('628') && norm.length >= 10 && norm.length <= 15;
}

/**
 * Merender daftar staf pendukung ke dalam container HTML.
 * @param {Array<Object>} staffs - Array data staf pendukung
 */
export function renderStaffCards(staffs) {
    const container = document.getElementById('staff-container');
    if (!container) return;

    container.innerHTML = '';

    if (!staffs || staffs.length === 0) {
        container.innerHTML = `<p class="empty-state-msg">Data staf pendukung tidak tersedia saat ini.</p>`;
        return;
    }

    staffs.forEach((staff, index) => {
        const {
            name,
            role,
            image,
            location,
            phone,
            schedule,
            tasks
        } = staff;

        const scheduleHTML = schedule.map(sched =>
            `<div class="schedule-item">` +
                `<span class="s-day">${sched.day}</span>` +
                `<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
            `</div>`
        ).join('');

        const tasksHTML = tasks.map(task => `<li>${task}</li>`).join('');
        const initial = name ? name.charAt(0).toUpperCase() : '';

        const card = document.createElement('div');
        card.className = `staff-card reveal reveal-delay-${index + 1}`;

        card.innerHTML = `
      <div class="staff-card-header">
        <div class="staff-avatar">
          <span class="staff-initial">${initial}</span>
          <img src="${image}" alt="${name}" onerror="this.style.display='none'"/>
        </div>
        <div>
          <div class="staff-name">${name}</div>
          <div class="staff-role">${role}</div>
        </div>
      </div>
      <div class="staff-card-body">
        <div class="staff-info-grid">
          <div class="staff-info-item"><span class="icon">📍</span><div><span class="label">Lokasi</span><span class="val">${location}</span></div></div>
          <div class="staff-info-item">
            <span class="icon">🕒</span>
            <div style="flex:1">
              <span class="label">Jam Layanan</span>
              <div class="schedule-list">${scheduleHTML}</div>
            </div>
          </div>
          <div class="staff-info-item"><span class="icon">📞</span><div><span class="label">Kontak</span><span class="val">${phone}</span></div></div>
        </div>
        <div class="staff-divider"></div>
        <div class="staff-tasks-title">Tugas & Tanggung Jawab</div>
        <ul class="staff-tasks">${tasksHTML}</ul>
      </div>
    `;

        container.appendChild(card);
    });
}
// ============================================================
// --- Render SOP sebagai Card Grid dengan Search & Filter ---
// ============================================================

const CATEGORY_COLORS = {
    akademik: 'sop-cat-akademik',
    praktikum: 'sop-cat-praktikum',
};

/**
 * Ambil label kategori
 * @param {string} category - Kategori SOP ('akademik' atau 'praktikum')
 * @returns {string} Label kategori
 */
function getCatLabel(category) {
    const map = { akademik: 'Akademik', praktikum: 'Praktikum' };
    return map[category] || 'Akademik';
}

/**
 * Buat HTML untuk satu SOP card di grid.
 * @param {Object} sop - Data objek SOP
 * @returns {string} String markup HTML kartu SOP
 */
function buildSopCard(sop) {
    const {
        tab_id: tabId,
        category,
        icon = 'fa-file-alt',
        title,
        description,
        procedures
    } = sop;

    const catLabel = getCatLabel(category);
    const catClass = CATEGORY_COLORS[category] || '';

    return `
    <article class="sop-grid-card reveal" data-tab-id="${tabId}" data-category="${category}" data-title="${title.toLowerCase()}">
      <div class="sgc-header">
        <div class="sgc-icon-wrap">
          <i class="fas ${icon}"></i>
        </div>
        <div class="sgc-meta">
          <h3 class="sgc-title">${title}</h3>
        </div>
      </div>
      <div class="sgc-category-row">
        <span class="sgc-category ${catClass}">${catLabel}</span>
      </div>
      <p class="sgc-desc">${description}</p>
      <div class="sgc-footer">
        <div class="sgc-steps">
          <i class="fas fa-list-ol"></i>
          <span>${procedures.length} Langkah</span>
        </div>
        <button class="sgc-detail-btn" data-tab-id="${tabId}" aria-label="Lihat Detail ${title}">
          Lihat Detail <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </article>`;
}

/**
 * Buat HTML untuk isi modal detail SOP.
 * @param {Object} sop - Data objek SOP
 * @returns {string} String markup HTML isi modal
 */
function buildSopModalContent(sop) {
    const {
        category,
        icon = 'fa-file-alt',
        title,
        description,
        purpose,
        requirements,
        procedures,
        staff_responsible: staffResponsible,
        additional_info: additionalInfo
    } = sop;

    const catLabel = getCatLabel(category);
    const catClass = CATEGORY_COLORS[category] || '';

    const reqsHTML = requirements.map(req => `<li>${req}</li>`).join('');
    const procsHTML = procedures.map(proc => `<li>${proc}</li>`).join('');

    // staffResponsible bersifat opsional — sembunyikan blok jika tidak ada
    const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0;
    const staffHTML = hasStaff
        ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${staffName}</span>`).join('')
        : '';
    const staffBlockHTML = hasStaff
        ? `<div class="sop-staff-block">
        <div class="sop-block-label">Staf Bertanggung Jawab (Bersifat Opsional)</div>
        <div class="sop-staff-pills">${staffHTML}</div>
      </div>`
        : '';

    // additionalInfo bersifat opsional — sembunyikan blok jika tidak ada
    const additionalInfoHTML = additionalInfo
        ? `<div class="sop-info-box">
        <span class="iico">ℹ️</span>
        <p class="sop-info-box-text"><strong>Informasi Tambahan (Bersifat Opsional):</strong> ${additionalInfo}</p>
      </div>`
        : '';

    return `
    <div class="sop-modal-header">
      <div class="sop-modal-header-top">
        <div class="sop-modal-icon-wrap">
          <i class="fas ${icon}"></i>
        </div>
        <div>
          <div class="sop-modal-badges">
            <span class="sgc-category ${catClass}">${catLabel}</span>
          </div>
          <h2 class="sop-modal-title" id="sop-modal-title">${title}</h2>
          <p class="sop-modal-desc">${description}</p>
        </div>
      </div>
    </div>
    <div class="sop-modal-body">
      <div class="sop-block">
        <div class="sop-block-label">Tujuan</div>
        <p class="sop-block-text">${purpose}</p>
      </div>
      <div class="sop-two-col">
        <div>
          <div class="sop-block-label">Persyaratan</div>
          <ul class="sop-list bullets">${reqsHTML}</ul>
        </div>
        <div>
          <div class="sop-block-label">Alur Prosedur</div>
          <ul class="sop-list numbered">${procsHTML}</ul>
        </div>
      </div>
      ${staffBlockHTML}
      ${additionalInfoHTML}
    </div>`;
}

/**
 * Render semua SOP card ke grid.
 * @param {Array<Object>} sops - Array objek SOP
 */
export function renderSopCards(sops) {
    const container = document.getElementById('sop-cards-container');
    if (!container) return;

    // simpan data global di element agar bisa diakses filter/search
    container._sopData = sops;

    // Tampilkan pesan jika data SOP kosong atau gagal dimuat
    if (!sops || sops.length === 0) {
        container.innerHTML = `<p class="empty-state-msg">Data SOP tidak tersedia saat ini.</p>`;
        updateResultInfo(0, 0);
        return;
    }

    container.innerHTML = sops.map(buildSopCard).join('');
    updateResultInfo(sops.length, sops.length);
}

/** Update teks info jumlah hasil */
function updateResultInfo(shown, total) {
    const el = document.getElementById('sop-result-info');
    if (!el) return;
    if (shown === total) {
        el.textContent = `Menampilkan ${total} SOP`;
    } else {
        el.textContent = `Menampilkan ${shown} dari ${total} SOP`;
    }
}

/**
 * Memfilter dan menyaring kartu SOP berdasarkan query pencarian dan chip filter aktif.
 */
function applySopFilter() {
    const container = document.getElementById('sop-cards-container');
    if (!container) return;

    const query = (document.getElementById('sop-search-input')?.value || '').toLowerCase().trim();
    const activeChip = document.querySelector('.sop-chip.active');
    const activeFilter = activeChip ? activeChip.dataset.filter : 'semua';

    const cards = container.querySelectorAll('.sop-grid-card');
    let visibleCount = 0;

    cards.forEach(card => {
        const title = card.dataset.title || '';
        const code = card.dataset.code || '';
        const category = card.dataset.category || '';

        const matchesSearch = !query || title.includes(query) || code.includes(query);
        const matchesFilter = activeFilter === 'semua' || category === activeFilter;

        const isVisible = matchesSearch && matchesFilter;
        card.style.display = isVisible ? '' : 'none';
        if (isVisible) visibleCount++;
    });

    const emptyState = document.getElementById('sop-empty-state');
    if (emptyState) emptyState.style.display = visibleCount === 0 ? 'flex' : 'none';

    updateResultInfo(visibleCount, cards.length);
}

/**
 * Membuka modal detail untuk SOP tertentu berdasarkan tab_id.
 * @param {string} tabId - ID unik tab/SOP yang ingin ditampilkan
 */
function openSopModal(tabId) {
    const container = document.getElementById('sop-cards-container');
    if (!container || !container._sopData) return;
    const sop = container._sopData.find(item => item.tab_id === tabId);
    if (!sop) return;

    const modalContent = document.getElementById('sop-modal-content');
    const modalOverlay = document.getElementById('sop-modal-overlay');
    if (!modalContent || !modalOverlay) return;

    modalContent.innerHTML = buildSopModalContent(sop);
    modalOverlay.classList.add('active');
    document.body.style.overflow = 'hidden';

    // Gulir isi modal ke paling atas
    const modalBox = document.getElementById('sop-modal-box');
    if (modalBox) modalBox.scrollTop = 0;
}

/**
 * Menutup modal detail SOP yang sedang aktif.
 */
function closeSopModal() {
    const modalOverlay = document.getElementById('sop-modal-overlay');
    if (modalOverlay) modalOverlay.classList.remove('active');
    document.body.style.overflow = '';
}

/**
 * Menginisialisasi interaksi halaman SOP (pencarian, filter chip, modal detail).
 */
export function initSopInteraction() {
    // Search input
    const searchInput = document.getElementById('sop-search-input');
    const searchClear = document.getElementById('sop-search-clear');

    if (searchInput) {
        searchInput.addEventListener('input', () => {
            if (searchClear) {
                searchClear.style.display = searchInput.value ? 'flex' : 'none';
            }
            applySopFilter();
        });
    }

    if (searchClear) {
        searchClear.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
            }
            searchClear.style.display = 'none';
            applySopFilter();
        });
    }

    // Filter chips
    document.querySelectorAll('.sop-chip').forEach(chip => {
        chip.addEventListener('click', () => {
            document.querySelectorAll('.sop-chip').forEach(activeChip => {
                activeChip.classList.remove('active');
            });
            chip.classList.add('active');
            applySopFilter();
        });
    });

    // Empty state reset button
    const emptyReset = document.getElementById('sop-empty-reset');
    if (emptyReset) {
        emptyReset.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
            }
            if (searchClear) {
                searchClear.style.display = 'none';
            }
            document.querySelectorAll('.sop-chip').forEach(activeChip => {
                activeChip.classList.remove('active');
            });
            const allChip = document.querySelector('[data-filter="semua"]');
            if (allChip) {
                allChip.classList.add('active');
            }
            applySopFilter();
        });
    }

    // Card detail button (event delegation)
    const container = document.getElementById('sop-cards-container');
    if (container) {
        container.addEventListener('click', (event) => {
            const btn = event.target.closest('.sgc-detail-btn');
            if (btn) {
                openSopModal(btn.dataset.tabId);
            }
        });
    }

    // Modal close button
    const closeBtn = document.getElementById('sop-modal-close');
    if (closeBtn) {
        closeBtn.addEventListener('click', closeSopModal);
    }

    // Close on overlay click
    const overlay = document.getElementById('sop-modal-overlay');
    if (overlay) {
        overlay.addEventListener('click', (event) => {
            if (event.target === overlay) {
                closeSopModal();
            }
        });
    }

    // Close on Escape key
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            closeSopModal();
        }
    });
}

// --- Kompatibilitas Mundur ---

/**
 * Stub kompatibilitas mundur untuk renderSopTabs.
 * @param {Array<Object>} sops - Array objek SOP
 */
export function renderSopTabs(sops) {
    renderSopCards(sops);
}

/**
 * Stub kompatibilitas mundur untuk initSopTabsInteraction.
 */
export function initSopTabsInteraction() {
    initSopInteraction();
}

// --- Interaksi & Animasi ---

/**
 * Menginisialisasi animasi scroll reveal dan counter statistik pada hero section.
 */
export function initAnimations() {
    // Scroll Reveal
    const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            entry.target.classList.add('visible');
            revealObserver.unobserve(entry.target);
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));

    // Hero Counter
    const COUNT_ANIMATION_DURATION_MS = 800;

    /**
     * Menjalankan animasi hitung angka (counter)
     * @param {Element} targetElement - Elemen target angka
     * @param {number} targetValue - Nilai akhir counter
     */
    function animateCount(targetElement, targetValue) {
        if (!targetElement) return;
        const stepValue = targetValue / (COUNT_ANIMATION_DURATION_MS / 16);
        let currentValue = 0;
        const timerId = setInterval(() => {
            currentValue += stepValue;
            if (currentValue >= targetValue) {
                currentValue = targetValue;
                clearInterval(timerId);
            }
            targetElement.textContent = Math.floor(currentValue).toString();
        }, 16);
    }

    const staffCounter = document.getElementById('stat-staf');
    const sopCounter = document.getElementById('stat-sop');

    // Hitung jumlah data yang berhasil di-render (tidak termasuk template)
    const totalStaffCards = document.querySelectorAll('.staff-card').length;
    const totalSopCards = document.querySelectorAll('.sop-grid-card').length;

    animateCount(staffCounter, totalStaffCards);
    animateCount(sopCounter, totalSopCards);
}

// --- FAQ Accordion ---

/**
 * Membuka item FAQ yang diklik; menutup item lain yang sebelumnya
 * terbuka (perilaku accordion satu-terbuka-sekaligus).
 * @param {Element} questionEl - Elemen .faq-question yang diklik
 */
function toggleFaq(questionEl) {
    const item = questionEl.closest('.faq-item');
    if (!item) return;
    const isOpen = item.classList.contains('open');

    // Tutup semua item terlebih dahulu
    document.querySelectorAll('.faq-item').forEach(faqItem => {
        faqItem.classList.remove('open');
    });

    // Buka item yang diklik hanya jika sebelumnya tertutup
    if (!isOpen) {
        item.classList.add('open');
    }
}

/**
 * Menginisialisasi event listener klik untuk setiap accordion FAQ.
 */
export function initFaq() {
    document.querySelectorAll('.faq-question').forEach(questionEl => {
        questionEl.addEventListener('click', () => toggleFaq(questionEl));
    });
}

// --- Render FAQ ---

/**
 * Merender section FAQ secara dinamis dari data-faq.json.
 * Diinjeksikan ke dalam #faq-container di index.html.
 * @param {Array<Object>} faqs - Array objek FAQ dari data-faq.json
 */
export function renderFaqSection(faqs) {
    const container = document.getElementById('faq-container');
    if (!container) return;

    if (!faqs || faqs.length === 0) {
        container.innerHTML = `<p class="empty-state-msg">Data FAQ tidak tersedia saat ini.</p>`;
        return;
    }

    const delayClasses = ['reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3'];

    const itemsHTML = faqs.map((faq, index) => {
        const delayClass = delayClasses[index] || '';
        return `
        <div class="faq-item reveal ${delayClass}">
            <div class="faq-question">
                <span class="faq-question-text">${faq.question}</span>
                <div class="faq-icon">+</div>
            </div>
            <div class="faq-answer">
                <div class="faq-answer-inner">${faq.answer}</div>
            </div>
        </div>`;
    }).join('');

    container.innerHTML = itemsHTML;
}