document.addEventListener('DOMContentLoaded', () => {
  const root = document.documentElement;
  const storedTheme = localStorage.getItem('archive-theme');
  const applyTheme = (theme) => {
    root.setAttribute('data-bs-theme', theme);
    document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
      const icon = button.querySelector('i');
      if (icon) {
        icon.className = theme === 'dark' ? 'bi bi-sun' : 'bi bi-moon-stars';
      }
    });
  };

  applyTheme(storedTheme === 'dark' ? 'dark' : 'light');

  document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
    button.addEventListener('click', () => {
      const nextTheme = root.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      localStorage.setItem('archive-theme', nextTheme);
      applyTheme(nextTheme);
    });
  });

  document.querySelectorAll('.toast').forEach((toastElement) => {
    const toast = new bootstrap.Toast(toastElement);
    toast.show();
  });

  const sidebarToggles = document.querySelectorAll('[data-sidebar-toggle]');
  sidebarToggles.forEach((button) => {
    button.addEventListener('click', () => {
      document.body.classList.toggle('sidebar-open');
    });
  });

  const folderSelect = document.getElementById('folder_path');
  const categoryInput = document.getElementById('category');
  document.querySelectorAll('[data-folder-select]').forEach((button) => {
    button.addEventListener('click', () => {
      const folder = button.getAttribute('data-folder') || '';
      const category = button.getAttribute('data-category') || '';
      if (folderSelect) {
        folderSelect.value = folder;
        folderSelect.dispatchEvent(new Event('change'));
        folderSelect.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
      if (categoryInput && categoryInput.value.trim() === '') {
        categoryInput.value = category;
      }
      document.querySelectorAll('.folder-select').forEach((node) => node.classList.remove('active'));
      const cardButton = button.classList.contains('folder-add') ? button.previousElementSibling : button;
      if (cardButton) {
        cardButton.classList.add('active');
      }
      document.getElementById('uploadCard')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      document.body.classList.remove('sidebar-open');
    });
  });

  const dropzone = document.querySelector('[data-dropzone]');
  const fileInput = document.getElementById('attachment');
  const fileLabel = document.querySelector('[data-file-label]');

  const updateFileLabel = (files) => {
    if (!fileLabel) return;
    if (!files || !files.length) {
      fileLabel.textContent = 'PDF, DOC, DOCX, JPG, PNG, MP4 · maksimum 10 MB';
      return;
    }
    const file = files[0];
    fileLabel.textContent = `${file.name} · ${Math.max(1, Math.round(file.size / 1024))} KB`;
  };

  if (dropzone && fileInput) {
    dropzone.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', () => updateFileLabel(fileInput.files));

    ['dragenter', 'dragover'].forEach((eventName) => {
      dropzone.addEventListener(eventName, (event) => {
        event.preventDefault();
        dropzone.classList.add('dragover');
      });
    });

    ['dragleave', 'drop'].forEach((eventName) => {
      dropzone.addEventListener(eventName, (event) => {
        event.preventDefault();
        dropzone.classList.remove('dragover');
      });
    });

    dropzone.addEventListener('drop', (event) => {
      const files = event.dataTransfer?.files;
      if (!files || !files.length) return;
      fileInput.files = files;
      updateFileLabel(files);
    });
  }

  const searchInput = document.getElementById('documentSearch');
  if (searchInput) {
    searchInput.addEventListener('input', () => {
      const query = searchInput.value.trim().toLowerCase();
      document.querySelectorAll('[data-search-row]').forEach((row) => {
        const haystack = row.getAttribute('data-search-row') || '';
        row.style.display = haystack.includes(query) ? '' : 'none';
      });
    });
  }
});