function renderTree(units, katDok) {
    if (!Array.isArray(units)) return '';

    return `

        <ul class="file-tree-ul mt-3">
            ${units.map(el => `
                <li class="file-tree-li folder">
                    <input class="form-check-input" type="checkbox" data-select="unit" data-unit_id="${el?.id}">
                     <span class="fw-bolder">📂 ${el.name}</span>
                    <button type="button" class="btn btn-primary btn-sm" onclick="download(this)" data-part="unit" data-id="${el?.id}">
                        <i class="fa-solid fa-download"></i>
                    </button>

                    ${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
                        <ul class="file-tree-ul mt-1 ms-2">
                            ${el.sub_unit_kerja.map(sub => `
                                <li class="file-tree-li folder">
\
                                    <input class="form-check-input" type="checkbox" data-select="sub_unit" data-unit_id="${el.id}" data-sub_unit_id="${sub?.id}" >
                                    <span class="fw-semibold">📂 ${sub.name}</span>
                                    <button type="button" class="btn btn-outline-primary btn-sm ms-auto" onclick="download(this)" data-part="sub_unit" data-id="${sub?.id}">
                                        <i class="fa-solid fa-download"></i>
                                    </button>

                                    ${Array.isArray(katDok) && katDok.length > 0 ? `
                                        <ul class="file-tree-ul ms-2">
                                            ${katDok.map(kat => {
                                                // filter file sesuai kategori
                                                const files = (sub.file_directory || []).filter(
                                                    file => file.master_kategori_directory_id === kat.master_kategori_directory_id
                                                );

                                                if (!files.length) return '';
                                                return `
                                                    <li class="file-tree-li folder">
                                                        <span>📂 ${kat.nama_kategori_directory}</span>
                                                        <ul class="file-tree-ul ms-2">
                                                            ${files.map(file => {
                                                                let fileName   = file.file.split('/').pop();
                                                                let uploadedBy = file.pegawai_nama_entry || "Unknown";
                                                                let uploadedAt = new Date(file.entry_at).toLocaleString("id-ID", {
                                                                    day: "2-digit",
                                                                    month: "short",
                                                                    year: "numeric",
                                                                    hour: "2-digit",
                                                                    minute: "2-digit"
                                                                });

                                                                return `
                                                                    <li class="file-tree-li">
                                                                        <div class="">
                                                                        📄 <a href="#"
                                                                                class="file-link"
                                                                                data-file="${file?.file}"
                                                                                data-name_file="${fileName}"
                                                                                data-upload="${uploadedBy}"
                                                                                data-time="${uploadedAt}"
                                                                                data-klasifikasi="${file?.klasifikasi?.nama_klasifikasi_directory}"
                                                                                data-id="${file?.file_directory_id}"
                                                                                title="Diupload oleh: ${uploadedBy} pada ${uploadedAt}">
                                                                                ${fileName} - <strong>(${file?.klasifikasi?.nama_klasifikasi_directory})</strong>
                                                                            </a>
                                                                        </div>
                                                                        <small class="text-muted fst-italic">
                                                                                Upload by ${uploadedBy} · ${uploadedAt}
                                                                        </small>
                                                                    </li>

                                                                `;
                                                            }).join('')}
                                                        </ul>
                                                    </li>
                                                `;
                                            }).join('')}
                                        </ul>
                                    ` : ''}
                                </li>
                            `).join('')}
                        </ul>
                    ` : ''}
                </li>
            `).join('')}
        </ul>
    `;
}

function index(kategori_dok = [], unitKerja = null, subUnitKerja = [], klasifikasi_id = [], keyword = '') {
    const params = new URLSearchParams();

    if (kategori_dok.length)   params.append("kategori", kategori_dok);
    if (unitKerja)             params.append("unitKerja", unitKerja);
    if (subUnitKerja.length)   params.append("subUnit", subUnitKerja);
    if (klasifikasi_id.length) params.append("klasifikasi", klasifikasi_id);
    if (keyword) params.append("keyword", keyword);

    fetch(`/data-unit-kerja?${params.toString()}`)
        .then(response => response.json())
        .then(data => {
            let file_tree = document.getElementById("file_tree");
            file_tree.innerHTML = '';

            if (Array.isArray(data?.data?.unitKerja)) {
                file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);

                // Toggle buka/tutup folder
                file_tree.querySelectorAll(".folder > span").forEach(span => {
                    span.addEventListener("click", () => {
                        let li = span.parentElement;
                        li.classList.toggle("collapsed");

                        // Ganti ikon 📂 <-> 📁
                        if (li.classList.contains("collapsed")) {
                            span.textContent = span.textContent.replace("📂", "📁");
                        } else {
                            span.textContent = span.textContent.replace("📁", "📂");
                        }
                    });
                });
            } else {
                file_tree.innerHTML = `
                    <p style="color: primary">
                        Silakan lakukan pencarian terlebih dahulu untuk menampilkan data
                    </p>
                `;
            }
        })
        .catch(error => console.error('Error : ', error));
}


index();

function referesh(){
    index()
}


function searchData(){
    let klasifikasi_id = $("#klasifikasi_dok").val()
    let kategori_dok = $("#kategori_dok").val()
    let unitKerja = $("#unit_kerja").val()
    let subUnitKerja = $("#sub_unit_kerja").val()

    if(klasifikasi_id.length === 0 ||
        kategori_dok.length === 0 ||
        subUnitKerja.length === 0){
        Swal.fire({
            text: 'Lengkapi Isi form pencarian',
            icon: 'warning'
        })
        return
    }

   index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
}

function searchFile(keyword){

    let klasifikasi_id = $("#klasifikasi_dok").val()
    let kategori_dok = $("#kategori_dok").val()
    let unitKerja = $("#unit_kerja").val()
    let subUnitKerja = $("#sub_unit_kerja").val()
    index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id, keyword.value);
}


function download(e){
    let data = $(e).data();
    let id = data?.id;
    let type = data?.part;

    fetch('/download-byfolder', {
        method:'POST',
        headers: {
            'Content-Type' : 'application/json',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
        },
        body: JSON.stringify({ id : id, type: type})
   })
   .then(async res => {
        if (!res.ok) {                       // 4xx/5xx
            const msg = await res.json().catch(() => ({message:'Server error'}));
            throw new Error(msg.message || 'Gagal membuat arsip');
        }
        return res.blob();
   })
   .then(blob => {
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href     = url;
        a.download = `files_${Date.now()}.zip`;
        document.body.appendChild(a).click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
   })
   .catch(err => {
    Swal.fire({ icon: 'error', title : 'Gagal mengunduh' })
   })
}

let multiIds = [];

$(document).on('change', 'input[data-select]', function () {
    const type      = $(this).data('select');
    const isChecked = this.checked;

    /* 1. Auto-check semua sub-unit bila UNIT di-check */
    if (type === 'unit') {
         $(this).closest('li.file-tree-li')
               .find('input[data-select="sub_unit"]')
               .prop('checked', isChecked)
               .each(function () {
                    const su_id = $(this).data('sub_unit_id');
                    const key   = `${$(this).data('unit_id')}-${su_id}`;
                    const idx   = multiIds.findIndex(x => x.key === key);
                    if (isChecked && idx === -1) multiIds.push({ key, unit_id: $(this).data('unit_id'), sub_unit_id: su_id });
                    if (!isChecked && idx !== -1) multiIds.splice(idx, 1);
                });
    }

    /* 2. Auto-uncheck UNIT bila sisa satu SUB-UNIT di-uncheck */
    if (type === 'sub_unit' && !isChecked) {
        const $unitLi     = $(this).closest('li.file-tree-li').closest('ul').closest('li.file-tree-li');
        const $unitCheck  = $unitLi.children('input[data-select="unit"]');
        const stillChecked= $unitLi.find('input[data-select="sub_unit"]:checked').length > 0;

        if (!stillChecked) $unitCheck.prop('checked', false).trigger('change');
    }

    /* ---------- sisanya tetap: push/pop multiIds ---------- */
    const unit_id     = $(this).data('unit_id');
    const sub_unit_id = $(this).data('sub_unit_id');
    const key         = `${unit_id}-${sub_unit_id}`;
    const idx         = multiIds.findIndex(x => x.key === key);

    if (isChecked && idx === -1) multiIds.push({ key, unit_id, sub_unit_id });
    if (!isChecked && idx !== -1) multiIds.splice(idx, 1);

    $('#multi-count').text(multiIds.length);
    $('#btn-download-multi').prop('disabled', multiIds.length === 0);
});


function refreshMultiButton(){
    $("#multi-count").text(multiIds.length)
    $("#btn-download-multi").prop('disable', multiIds.length === 0)
}

function downloadMultiple(){
   if(multiIds.length === 0) return;

   fetch('/download-multiple', {
        method:'POST',
        headers: {
            'Content-Type' : 'application/json',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
        },
        body: JSON.stringify({ ids : multiIds})
   })
   .then(async res => {
        if (!res.ok) {                       // 4xx/5xx
            const msg = await res.json().catch(() => ({message:'Server error'}));
            throw new Error(msg.message || 'Gagal membuat arsip');
        }
        return res.blob();
   })
   .then(blob => {
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href     = url;
        a.download = `files_${Date.now()}.zip`;
        document.body.appendChild(a).click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
   })
   .catch(err => {
    Swal.fire({ icon: 'error', title : 'Gagal mengunduh' })
   })

}