function renderTree(units, katDok, klasifikasi_id) {

  if (!Array.isArray(units) || !units.length) return '<p class="text-muted">Tidak ada data</p>';
  return `<ul class="file-tree-ul">
    ${units.map(u => `
      <li class="file-tree-li folder">
        <span>📂 ${u.name}</span>
        <ul class="file-tree-ul ms-1">
          ${u.sub_unit_kerja.map(s => `
            <li class="file-tree-li folder">
              <span>📂 ${s.name}</span>
              <ul class="file-tree-ul ms-1">
                ${katDok.map(k => `
                  <li class="file-tree-li folder">
                    <span class="kat-folder" onclick="loadFiles(this)"
                    data-path="${u.id}-${s.id}-${k.master_kategori_directory_id}"
                    data-unit="${u.id}"
                    data-sub="${s.id}"
                    data-kat="${k.master_kategori_directory_id}"
                    data-klas='${JSON.stringify(klasifikasi_id)}'">
                      📂 ${k.nama_kategori_directory}
                    </span>
                    <ul class="file-tree-ul" id="isi-${u.id}-${s.id}-${k.master_kategori_directory_id}" style="display:none"></ul>
                  </li>`).join('')}
              </ul>
            </li>`).join('')}
        </ul>
      </li>`).join('')}
  </ul>`;
}

async function loadFiles(e) {

    const ul = e.nextElementSibling;
    const unitId = $(e).data('unit')
    const subId = $(e).data('sub')
    const katId = $(e).data('kat')
    const klas = $(e).data('klas')

    const loaded = ul.getAttribute('data-loaded');

    if (loaded === '1') {              // toggle saja
        ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
        return;
    }

    ul.innerHTML = '<li><small class="text-muted">memuat...</small></li>';
    ul.style.display = 'block';

    try {
        const r = await fetch(`/getFile/${unitId}/${subId}/${katId}?klasifikasi=${klas}`);
        const res = await r.json();   // array kosong / ada isi
        const files = res.data || [];
        if (!Array.isArray(files) || !files.length) {
            ul.innerHTML = '<li><small class="text-muted">kosong</small></li>';
            ul.setAttribute('data-loaded', '1');
            return;
        }

        ul.innerHTML = files.map(f => {
        const name = f.file.split('/').pop();
        const by   = f.pegawai_nama_entry || 'Unknown';
        const at   = new Date(f.entry_at).toLocaleString('id-ID', {
                        day:'2-digit', month:'short', year:'numeric',
                        hour:'2-digit', minute:'2-digit'
                    });

        return `
            <li class="file-tree-li">
                    <!-- baris atas : nama + klasifikasi -->
                    <div class="">
                    📄 <a href="#" class="file-link"
                            data-file="${f.file}"
                            data-name_file="${name}"
                            data-id="${f.file_directory_id}"
                            data-upload="${by}"
                            data-time="${at}"
                            data-klasifikasi="${f.klasifikasi?.nama_klasifikasi_directory}"
                            title="Di-upload oleh: ${by} pada ${at}">
                        ${name}
                        </a>
                    <strong>(${f.klasifikasi?.nama_klasifikasi_directory})</strong>
                    </div>

                    <!-- baris bawah : pembuat & tanggal (kecil + italic) -->
                    <small class="text-muted fst-italic">
                   Upload by ${by} · ${at}
                    </small>
            </li>`;
        }).join('');

        ul.setAttribute('data-loaded', '1');
    } catch (e) {
        ul.innerHTML = '<li><small class="text-danger">gagal memuat</small></li>';
        console.error(e);
    }
}
function index(kategori_dok = [], unitKerja = null, subUnitKerja = [], klasifikasi_id = []) {

    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);

    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, klasifikasi_id);
                // 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 ||
        !unitKerja.length ||
        subUnitKerja.length === 0){
        Swal.fire({
            text: 'Lengkapi Isi form pencarian',
            icon: 'warning'
        })
        return
    }

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