{% extends 'base.html' %}
{% block content %}
<div class="container py-3">
  <div class="d-flex align-items-end justify-content-between mb-3">
    <div>
      <h3 class="mb-0">Company Documents</h3>
      <div class="text-muted small">Browse, search, and preview.</div>
    </div>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-secondary btn-sm" id="expandAll">Expand all</button>
      <button class="btn btn-outline-secondary btn-sm" id="collapseAll">Collapse all</button>
    </div>
  </div>

  <!-- Search + Filter -->
  <div class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-center">
        <div class="col-md-6">
          <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input id="docSearch" type="text" class="form-control" placeholder="Search documents or categories…">
          </div>
        </div>
        <div class="col-md-3">
          <select id="typeFilter" class="form-select">
            <option value="">All types</option>
            <option value="pdf">PDF</option>
            <option value="image">Images</option>
            <option value="doc">Word/Docs</option>
            <option value="xls">Spreadsheets</option>
            <option value="ppt">Presentations</option>
          </select>
        </div>
        <div class="col-md-3 text-end small text-muted">
          <span id="visibleCount">0</span> shown
        </div>
      </div>
    </div>
  </div>

  <!-- Categories & Docs -->
  <div class="accordion" id="docsAccordion">
    {% for cat in categories %}
    {% set doc_count = cat.documents|length %}
    <div class="accordion-item" data-cat>
      <h2 class="accordion-header" id="heading-{{ cat.id }}">
        <button class="accordion-button collapsed" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapse-{{ cat.id }}" aria-expanded="false">
          <div class="w-100 d-flex align-items-center justify-content-between">
            <div class="fw-semibold">
              <span class="me-2">{{ cat.name }}</span>
              <span class="badge bg-secondary-subtle text-secondary border">{{ doc_count }}</span>
            </div>
            <small class="text-muted ms-3">{{ cat.description or '' }}</small>
          </div>
        </button>
      </h2>
      <div id="collapse-{{ cat.id }}" class="accordion-collapse collapse" data-bs-parent="#docsAccordion">
        <div class="accordion-body p-0">
          {% if doc_count == 0 %}
            <div class="p-3 text-muted">No documents in this category.</div>
          {% else %}
            <ul class="list-group list-group-flush">
              {% for d in cat.documents %}
              <li class="list-group-item d-flex align-items-center justify-content-between"
                  data-doc
                  data-title="{{ d.filename|e }}"
                  data-mime="{{ d._mime|lower }}"
                  data-cat-name="{{ cat.name|e }}">
                <div class="d-flex align-items-center gap-3">
                  <span class="fs-5">
                    {{ "📕" if "pdf" in d._mime|lower
                       else ("🖼️" if d._mime.startswith("image/")
                       else ("📝" if "word" in d._mime or "doc" in d._mime
                       else ("📊" if "excel" in d._mime or "sheet" in d._mime or "csv" in d._mime or "xls" in d._mime
                       else ("📽️" if "powerpoint" in d._mime or "presentation" in d._mime or "ppt" in d._mime
                       else "📄")))) }}
                  </span>
                  <div>
                    <div class="fw-semibold doc-title">{{ d.filename }}</div>
                    <div class="text-muted small">
                      {{ (d._size or 0) | human_size }} • {{ d._mtime | human_date }}
                    </div>
                  </div>
                </div>
                <div class="btn-group">
                  <button class="btn btn-outline-primary btn-sm preview-btn"
                          data-preview="{{ url_for('documents.preview_document', doc_id=d.id) }}"
                          data-download="{{ url_for('documents.download_document', doc_id=d.id) }}">
                    <i class="bi bi-eye"></i> Preview
                  </button>
                  <a class="btn btn-outline-secondary btn-sm"
                     href="{{ url_for('documents.download_document', doc_id=d.id) }}">
                    <i class="bi bi-download"></i> Download
                  </a>
                </div>
              </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewTitle">Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body p-0" style="min-height:60vh; position:relative;">
        <!-- Spinner overlay -->
        <div id="previewSpinner" class="preview-spinner">
          <div class="text-center">
            <div class="spinner-border" role="status" aria-hidden="true"></div>
            <div class="mt-2">Loading…</div>
          </div>
        </div>

        <!-- PDF/Office -->
        <iframe id="previewFrame" title="Document preview" class="d-none"></iframe>

        <!-- Images -->
        <img id="previewImage" alt="Image preview" class="d-none">

        <!-- Fallback -->
        <div id="previewFallback" class="p-4 d-none">
          <p class="mb-2" id="fallbackMsg">Can’t preview this file here. You can download it instead:</p>
          <a id="previewDownloadFallback" class="btn btn-primary" href="#" download>
            <i class="bi bi-download"></i> Download
          </a>
        </div>
      </div>

      <div class="modal-footer">
        <a id="previewDownload" class="btn btn-primary" href="#" download>
          <i class="bi bi-download"></i> Download
        </a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  // --- environment detection for Office viewer ---
  const IS_LOCAL = ['localhost','127.0.0.1'].includes(location.hostname) || location.protocol !== 'https:';

  function bucket(m){
    m = (m||'').toLowerCase();
    if (m.includes('pdf')) return 'pdf';
    if (m.startsWith('image/')) return 'image';
    if (m.includes('powerpoint') || m.includes('presentation') || m.includes('ppt')) return 'ppt';
    if (m.includes('excel') || m.includes('sheet') || m.includes('spreadsheet') || m.includes('csv') || m.includes('xls')) return 'xls';
    if (m.includes('word') || m.includes('doc')) return 'doc';
    return '';
  }
  function absUrl(path){ return /^https?:\/\//i.test(path) ? path : (window.location.origin + path); }

  // Elements
  const accordion = document.getElementById('docsAccordion');
  const modalEl   = document.getElementById('previewModal');
  const frameEl   = document.getElementById('previewFrame');
  const imgEl     = document.getElementById('previewImage');
  const spinner   = document.getElementById('previewSpinner');
  const fallback  = document.getElementById('previewFallback');
  const fbMsg     = document.getElementById('fallbackMsg');
  const dlMain    = document.getElementById('previewDownload');
  const dlFb      = document.getElementById('previewDownloadFallback');
  const titleEl   = document.getElementById('previewTitle');
  const bsModal   = new bootstrap.Modal(modalEl);

  let tHide = null, tFallback = null;

  // Always hide the spinner after N ms, no matter what.
  function armHideSpinner(ms=1200){
    if (tHide) clearTimeout(tHide);
    tHide = setTimeout(() => spinner.classList.add('d-none'), ms);
  }
  function armFallback(downloadURL, ms=5000, message){
    if (tFallback) clearTimeout(tFallback);
    tFallback = setTimeout(() => showFallback(downloadURL, message), ms);
  }
  function resetUI(){
    if (tHide) clearTimeout(tHide);
    if (tFallback) clearTimeout(tFallback);
    spinner.classList.remove('d-none');
    fallback.classList.add('d-none');
    imgEl.classList.add('d-none'); imgEl.src = '';
    frameEl.classList.add('d-none'); frameEl.src = 'about:blank';
  }
  function showFallback(href, message){
    spinner.classList.add('d-none');
    frameEl.classList.add('d-none');
    imgEl.classList.add('d-none');
    if (message) fbMsg.textContent = message; else fbMsg.textContent = "Can’t preview this file here. You can download it instead:";
    fallback.classList.remove('d-none');
    dlFb.href = href;
  }

  // Search + filter
  const search = document.getElementById('docSearch');
  const typeFilter = document.getElementById('typeFilter');
  const visibleCount = document.getElementById('visibleCount');

  function applyFilter(){
    const q = (search.value || '').trim().toLowerCase();
    const t = typeFilter.value;
    let total = 0;
    document.querySelectorAll('[data-cat]').forEach(cat => {
      let showCat = 0;
      cat.querySelectorAll('[data-doc]').forEach(li => {
        const title = (li.dataset.title || '').toLowerCase();
        const catName = (li.dataset.catName || '').toLowerCase();
        const b = bucket(li.dataset.mime);
        const show = (!q || title.includes(q) || catName.includes(q)) && (!t || t===b);
        li.style.display = show ? '' : 'none';
        if (show) { showCat++; total++; }
      });
      cat.style.display = showCat ? '' : 'none';
    });
    visibleCount.textContent = total;
  }
  search.addEventListener('input', applyFilter);
  typeFilter.addEventListener('change', applyFilter);
  applyFilter();

  // Expand / collapse
  document.getElementById('expandAll')?.addEventListener('click', () => {
    document.querySelectorAll('.accordion-collapse').forEach(c => new bootstrap.Collapse(c, {show:true, toggle:true}));
  });
  document.getElementById('collapseAll')?.addEventListener('click', () => {
    document.querySelectorAll('.accordion-collapse.show').forEach(c => new bootstrap.Collapse(c, {hide:true, toggle:true}));
  });

  // Preview handler
  accordion.addEventListener('click', (e) => {
    const btn = e.target.closest('.preview-btn');
    if (!btn) return;

    const li   = btn.closest('[data-doc]');
    const name = li?.dataset?.title || 'Preview';
    const m    = li?.dataset?.mime || '';
    const b    = bucket(m);

    const previewURL  = btn.dataset.preview;   // same-origin
    const downloadURL = btn.dataset.download;  // same-origin
    const downloadAbs = absUrl(downloadURL);

    resetUI();
    titleEl.textContent = name;
    dlMain.href = downloadURL;
    bsModal.show();

    // Always hide spinner soon, independent of events.
    armHideSpinner(1200);

    if (b === 'image') {
      imgEl.src = previewURL;
      imgEl.onload  = () => spinner.classList.add('d-none');
      imgEl.onerror = () => showFallback(downloadURL);
      imgEl.classList.remove('d-none');
      return;
    }

    if (b === 'pdf') {
      frameEl.src = previewURL + '#toolbar=1&navpanes=0&scrollbar=1';
      frameEl.onload  = () => spinner.classList.add('d-none');
      frameEl.onerror = () => showFallback(downloadURL);
      frameEl.classList.remove('d-none');
      // If plugin never fires onload, show fallback after 6s just in case.
      armFallback(downloadURL, 6000);
      return;
    }

    // Office files
    if (b === 'doc' || b === 'xls' || b === 'ppt') {
      if (IS_LOCAL) {
        showFallback(downloadURL, "Preview for Office files isn’t available on localhost/HTTP. Please download:");
        return;
      }
      // Office viewer attempt
      const officeURL = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(downloadAbs);
      frameEl.src = officeURL;
      frameEl.onload  = () => spinner.classList.add('d-none');
      frameEl.onerror = () => showFallback(downloadURL);
      frameEl.classList.remove('d-none');
      // Guard: if viewer can’t fetch your URL (firewall, auth), fallback
      armFallback(downloadURL, 7000, "Couldn’t load the online viewer. Please download:");
      return;
    }

    // Unknown type
    showFallback(downloadURL);
  });

  // Cleanup on close
  modalEl.addEventListener('hidden.bs.modal', () => {
    if (tHide) clearTimeout(tHide);
    if (tFallback) clearTimeout(tFallback);
    frameEl.src = 'about:blank';
    imgEl.src   = '';
  });
})();
</script>

<style>
.bg-secondary-subtle{ background:#f0f2f5; color:#495057; }
#previewFrame{
  width:100%;
  height:70vh;
  border:0;
}
#previewImage{
  max-width:100%;
  height:auto;
  display:block;
}
.preview-spinner{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.85);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>
{% endblock %}