<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jude's Invoice Vault</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg: #0c0e13;
    --surface: #14161d;
    --surface-hover: #1a1d27;
    --surface-active: #1f2230;
    --border: #252835;
    --border-hover: #3a3e52;
    --text: #e4e6f0;
    --text-muted: #7a7f96;
    --text-dim: #4e5268;
    --accent: #6c8aff;
    --accent-soft: rgba(108, 138, 255, 0.12);
    --accent-glow: rgba(108, 138, 255, 0.25);
    --danger: #ff6b6b;
    --success: #5eead4;
    --radius: 10px;
    --radius-lg: 16px;
  }

  html { font-size: 15px; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ─── Ambient background ─── */
  body::before {
    content: '';
    position: fixed;
    top: -40%; left: -20%;
    width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(108,138,255,0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  body::after {
    content: '';
    position: fixed;
    bottom: -30%; right: -15%;
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(94,234,212,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* ─── LOGIN SCREEN ─── */
  #login-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    background: var(--bg);
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  #login-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

  .login-card {
    width: 380px;
    padding: 48px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
    animation: loginFloat 0.8s ease-out;
  }
  @keyframes loginFloat {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .login-icon {
    width: 56px; height: 56px;
    margin: 0 auto 24px;
    border-radius: 14px;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(108,138,255,0.15);
  }
  .login-icon svg { width: 26px; height: 26px; color: var(--accent); }

  .login-card h1 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .login-card p {
    color: var(--text-muted);
    font-size: 0.87rem;
    margin-bottom: 28px;
  }

  .password-field {
    position: relative;
    margin-bottom: 16px;
  }
  .password-field input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .password-field input:focus { border-color: var(--accent); }
  .password-field input.error { border-color: var(--danger); animation: shake 0.4s ease; }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
  }

  .toggle-vis {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
  }
  .toggle-vis:hover { color: var(--text-muted); }

  .login-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .login-btn:hover { background: #5a7aef; box-shadow: 0 4px 24px var(--accent-glow); }

  .error-msg {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .error-msg.visible { opacity: 1; }

  #app {
    display: none;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.6s ease-out;
  }
  #app.active { display: block; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
  }
  .app-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .app-header h1 span { color: var(--accent); }

  .file-count {
    font-size: 0.82rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
  }

  .toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
  }

  .search-box {
    flex: 1;
    min-width: 220px;
    position: relative;
  }
  .search-box svg {
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--text-dim);
    pointer-events: none;
  }
  .search-box input {
    width: 100%;
    padding: 11px 16px 11px 42px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .search-box input:focus {
    border-color: var(--accent);
    background: var(--surface-hover);
  }
  .search-box input::placeholder { color: var(--text-dim); }

  .filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
  }
  .filter-row label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
  }
  .date-input {
    padding: 9px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    color-scheme: dark;
  }
  .date-input:focus {
    border-color: var(--accent);
    background: var(--surface-hover);
  }
  .date-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .clear-dates-btn {
    padding: 9px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .clear-dates-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-muted);
  }

  .sort-btn, .select-all-btn {
    padding: 11px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .sort-btn:hover, .select-all-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
    background: var(--surface-hover);
  }
  .sort-btn svg, .select-all-btn svg { width: 16px; height: 16px; }

  .batch-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--accent-soft);
    border: 1px solid rgba(108,138,255,0.2);
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: fadeUp 0.3s ease-out;
  }
  .batch-bar.active { display: flex; }
  .batch-bar-info {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem; font-weight: 500; color: var(--accent);
  }
  .batch-bar-actions { display: flex; gap: 8px; }

  .btn-zip {
    padding: 8px 18px;
    background: var(--accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.84rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .btn-zip:hover { background: #5a7aef; box-shadow: 0 4px 20px var(--accent-glow); }
  .btn-zip:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-zip svg { width: 16px; height: 16px; }

  .btn-clear {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(108,138,255,0.25);
    border-radius: 8px;
    color: var(--accent);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-clear:hover { background: rgba(108,138,255,0.08); }

  .file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .file-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
  }
  .file-item:hover {
    background: var(--surface-hover);
    border-color: var(--border);
  }
  .file-item.selected {
    background: var(--accent-soft);
    border-color: rgba(108,138,255,0.2);
  }

  .file-checkbox {
    width: 20px; height: 20px;
    border: 2px solid var(--border-hover);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .file-item.selected .file-checkbox {
    background: var(--accent);
    border-color: var(--accent);
  }
  .file-checkbox svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 0.15s; }
  .file-item.selected .file-checkbox svg { opacity: 1; }

  .file-icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff4444 0%, #cc2233 100%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .file-icon span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .file-info { flex: 1; min-width: 0; }
  .file-name {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
  }
  .file-item:hover .file-name { color: var(--accent); }
  .file-meta {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 2px;
    display: flex; gap: 12px;
  }

  .file-download {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 14px;
    color: var(--text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .file-download:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
  .file-download svg { width: 14px; height: 14px; }

  .state-msg {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-dim);
  }
  .state-msg svg { width: 48px; height: 48px; margin-bottom: 16px; color: var(--text-dim); opacity: 0.5; }
  .state-msg h3 { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
  .state-msg p { font-size: 0.85rem; }

  .progress-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(12,14,19,0.85);
    backdrop-filter: blur(8px);
    z-index: 200;
    align-items: center; justify-content: center;
  }
  .progress-overlay.active { display: flex; }

  .progress-card {
    width: 360px;
    padding: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
  }
  .progress-card h3 { font-size: 1rem; margin-bottom: 20px; font-weight: 600; }
  .progress-track {
    width: 100%;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
  }
  .progress-label { font-size: 0.82rem; color: var(--text-muted); }

  @media (max-width: 600px) {
    .toolbar { flex-direction: column; }
    .search-box { min-width: unset; }
    .app-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .file-download span { display: none; }
    .batch-bar { flex-direction: column; gap: 12px; text-align: center; }
  }
  .site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px 24px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    z-index: 1;
    pointer-events: none;
    background-color: #222;
  }
</style>
</head>
<body>
<div id="login-screen">
  <div class="login-card">
    <div class="login-icon">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/>
      </svg>
    </div>
    <h1>Jude's Invoice Vault</h1>
    <p>Enter the access password to continue</p>
    <div class="password-field">
      <input type="password" id="password-input" placeholder="Password" autocomplete="off">
      <button class="toggle-vis" onclick="togglePasswordVis()" title="Toggle visibility">
        <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
        </svg>
      </button>
    </div>
    <button class="login-btn" onclick="attemptLogin()">Unlock</button>
    <div class="error-msg" id="login-error">Incorrect password. Please try again.</div>
  </div>
</div>

<!-- ═══ MAIN APP ═══ -->
<div id="app">
  <div class="app-header">
    <h1>Jude's <span>Invoice Vault</span></h1>
    <div class="file-count" id="file-count">Loading...</div>
  </div>

  <div class="toolbar">
    <div class="search-box">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
      </svg>
      <input type="text" id="search-input" placeholder="Search documents…" oninput="filterFiles()">
    </div>
    <button class="sort-btn" onclick="cycleSort()" id="sort-btn" title="Sort files">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path d="M11 5h10M11 9h7M11 13h4M3 17l4 4 4-4M7 3v18"/>
      </svg>
      <span>Name ↑</span>
    </button>
    <button class="select-all-btn" onclick="toggleSelectAll()" id="select-all-btn" title="Select all visible files">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/>
      </svg>
      <span>Select All</span>
    </button>
  </div>

  <div class="filter-row">
    <div class="date-group">
      <label>From</label>
      <input type="date" class="date-input" id="date-from" onchange="filterFiles()">
    </div>
    <div class="date-group">
      <label>To</label>
      <input type="date" class="date-input" id="date-to" onchange="filterFiles()">
    </div>
    <button class="clear-dates-btn" onclick="clearDates()" title="Clear date filters">Clear dates</button>
  </div>

  <div class="batch-bar" id="batch-bar">
    <div class="batch-bar-info">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="18" height="18">
        <path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/>
      </svg>
      <span id="selected-count">0 files selected</span>
    </div>
    <div class="batch-bar-actions">
      <button class="btn-clear" onclick="clearSelection()">Clear</button>
      <button class="btn-zip" onclick="downloadZip()" id="zip-btn">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
        </svg>
        Download ZIP
      </button>
    </div>
  </div>

  <div class="file-list" id="file-list"></div>
</div>

<!-- ═══ PROGRESS OVERLAY ═══ -->
<div class="progress-overlay" id="progress-overlay">
  <div class="progress-card">
    <h3>Creating ZIP archive…</h3>
    <div class="progress-track"><div class="progress-fill" id="progress-fill"></div></div>
    <div class="progress-label" id="progress-label">Preparing…</div>
  </div>
</div>

<script>
const CONFIG = {
  artform: 'Jude!!20.26',
  pdfDirectory: '/docs/',
  zipFileName: 'documents.zip',
};
let allFiles = [];
let filteredFiles = [];
let selectedFiles = new Set();
let sortMode = 1; // 0: Name↑, 1: Name↓, 2: Date↑(oldest), 3: Date↓(newest)
const sortLabels = ['Name ↑', 'Name ↓', 'Date ↑', 'Date ↓'];
const passInput = document.getElementById('password-input');
passInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') attemptLogin(); });

function attemptLogin() {
  const val = passInput.value;
  const errEl = document.getElementById('login-error');
  if (val === CONFIG.artform) {
    errEl.classList.remove('visible');
    document.getElementById('login-screen').classList.add('hidden');
    document.getElementById('app').classList.add('active');
    loadFiles();
  } else {
    passInput.classList.add('error');
    errEl.classList.add('visible');
    setTimeout(() => passInput.classList.remove('error'), 400);
  }
}

function togglePasswordVis() {
  passInput.type = passInput.type === 'password' ? 'text' : 'password';
}
async function loadFiles() {
  const listEl = document.getElementById('file-list');
  listEl.innerHTML = `
    <div class="state-msg">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>
      <h3>Loading documents…</h3>
      <p>Fetching file list from server</p>
    </div>`;

  try {
    const res = await fetch(CONFIG.pdfDirectory);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();

    // nginx autoindex JSON returns: [{name, type, mtime, size}, ...]
    allFiles = data
      .filter(f => f.type === 'file' && f.name.toLowerCase().endsWith('.pdf'))
      .map(f => ({
        name: f.name,
        size: f.size || 0,
        mtime: f.mtime ? new Date(f.mtime) : null,
        url: CONFIG.pdfDirectory + encodeURIComponent(f.name),
      }));

    sortFiles();
    filterFiles();
  } catch (err) {
    console.error('Failed to load files:', err);
    listEl.innerHTML = `
      <div class="state-msg">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
        <h3>Could not load files</h3>
        <p>Make sure nginx autoindex is enabled with JSON format on <code>${CONFIG.pdfDirectory}</code></p>
        <p style="margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--text-dim);">${err.message}</p>
      </div>`;
  }
}
function sortFiles() {
  allFiles.sort((a, b) => {
    if (sortMode <= 1) {
      const cmp = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
      return sortMode === 0 ? cmp : -cmp;
    } else {
      const da = a.mtime ? a.mtime.getTime() : 0;
      const db = b.mtime ? b.mtime.getTime() : 0;
      return sortMode === 2 ? da - db : db - da;
    }
  });
}

function cycleSort() {
  sortMode = (sortMode + 1) % 4;
  document.getElementById('sort-btn').querySelector('span').textContent = sortLabels[sortMode];
  sortFiles();
  filterFiles();
}

function clearDates() {
  document.getElementById('date-from').value = '';
  document.getElementById('date-to').value = '';
  filterFiles();
}

function filterFiles() {
  const query = document.getElementById('search-input').value.toLowerCase().trim();
  const fromVal = document.getElementById('date-from').value;
  const toVal = document.getElementById('date-to').value;
  const fromDate = fromVal ? new Date(fromVal + 'T00:00:00') : null;
  const toDate = toVal ? new Date(toVal + 'T23:59:59') : null;

  filteredFiles = allFiles.filter(f => {
    if (query && !f.name.toLowerCase().includes(query)) return false;
    if (f.mtime) {
      if (fromDate && f.mtime < fromDate) return false;
      if (toDate && f.mtime > toDate) return false;
    } else {
      // If file has no date and a date filter is active, exclude it
      if (fromDate || toDate) return false;
    }
    return true;
  });

  renderFiles();
}

function renderFiles() {
  const listEl = document.getElementById('file-list');
  document.getElementById('file-count').textContent = `${filteredFiles.length} of ${allFiles.length} documents`;

  if (filteredFiles.length === 0) {
    listEl.innerHTML = `
      <div class="state-msg">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <h3>No documents found</h3>
        <p>Try adjusting your search query or date filters</p>
      </div>`;
    updateBatchBar();
    return;
  }

  listEl.innerHTML = filteredFiles.map(f => `
    <div class="file-item ${selectedFiles.has(f.name) ? 'selected' : ''}"
         data-name="${escHtml(f.name)}"
         onclick="toggleSelect('${escJs(f.name)}', event)">
      <div class="file-checkbox">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>
      </div>
      <div class="file-icon"><span>PDF</span></div>
      <div class="file-info">
        <div class="file-name" title="${escHtml(f.name)}">${escHtml(f.name)}</div>
        <div class="file-meta">
          ${f.size ? `<span>${formatSize(f.size)}</span>` : ''}
          ${f.mtime ? `<span>${formatDate(f.mtime)}</span>` : ''}
        </div>
      </div>
      <button class="file-download" onclick="downloadSingle('${escJs(f.name)}', event)" title="Download this file">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
        <span>Download</span>
      </button>
    </div>`).join('');

  updateBatchBar();
}
function toggleSelect(name, e) {
  // Don't toggle if they clicked the download button
  if (e && e.target.closest('.file-download')) return;

  if (selectedFiles.has(name)) {
    selectedFiles.delete(name);
  } else {
    selectedFiles.add(name);
  }
  renderFiles();
}

function toggleSelectAll() {
  const allVisible = filteredFiles.map(f => f.name);
  const allSelected = allVisible.every(n => selectedFiles.has(n));

  if (allSelected) {
    allVisible.forEach(n => selectedFiles.delete(n));
  } else {
    allVisible.forEach(n => selectedFiles.add(n));
  }
  renderFiles();
}

function clearSelection() {
  selectedFiles.clear();
  renderFiles();
}

function updateBatchBar() {
  const bar = document.getElementById('batch-bar');
  const count = selectedFiles.size;
  if (count > 0) {
    bar.classList.add('active');
    document.getElementById('selected-count').textContent = `${count} file${count !== 1 ? 's' : ''} selected`;
  } else {
    bar.classList.remove('active');
  }
}
function downloadSingle(name, e) {
  if (e) { e.stopPropagation(); e.preventDefault(); }
  const file = allFiles.find(f => f.name === name);
  if (!file) return;

  const a = document.createElement('a');
  a.href = file.url;
  a.download = file.name;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

async function downloadZip() {
  if (selectedFiles.size === 0) return;

  const overlay = document.getElementById('progress-overlay');
  const fill = document.getElementById('progress-fill');
  const label = document.getElementById('progress-label');
  const zipBtn = document.getElementById('zip-btn');

  overlay.classList.add('active');
  zipBtn.disabled = true;
  fill.style.width = '0%';

  const zip = new JSZip();
  const names = [...selectedFiles];
  let done = 0;

  try {
    for (const name of names) {
      const file = allFiles.find(f => f.name === name);
      if (!file) continue;

      label.textContent = `Downloading ${name}…`;
      const res = await fetch(file.url);
      if (!res.ok) throw new Error(`Failed to fetch ${name}`);
      const blob = await res.blob();
      zip.file(name, blob);

      done++;
      fill.style.width = `${Math.round((done / names.length) * 80)}%`;
    }

    label.textContent = 'Compressing…';
    fill.style.width = '85%';

    const content = await zip.generateAsync({ type: 'blob' }, (meta) => {
      fill.style.width = `${85 + Math.round(meta.percent * 0.15)}%`;
    });

    fill.style.width = '100%';
    label.textContent = 'Done!';

    const url = URL.createObjectURL(content);
    const a = document.createElement('a');
    a.href = url;
    a.download = CONFIG.zipFileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    setTimeout(() => {
      overlay.classList.remove('active');
      zipBtn.disabled = false;
    }, 600);

  } catch (err) {
    console.error('ZIP creation failed:', err);
    label.textContent = `Error: ${err.message}`;
    fill.style.background = 'var(--danger)';
    setTimeout(() => {
      overlay.classList.remove('active');
      zipBtn.disabled = false;
      fill.style.background = '';
    }, 2500);
  }
}
function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / 1048576).toFixed(1) + ' MB';
}

function formatDate(d) {
  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
}

function escHtml(s) {
  const el = document.createElement('span');
  el.textContent = s;
  return el.innerHTML;
}

function escJs(s) {
  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
}
</script>

<footer class="site-footer">
  Confidential Documents - Unauthorized distribution prohibited.<br>&copy; <script>document.write(new Date().getFullYear())</script> HUB. Lda. All rights reserved.
</footer>

</body>
</html>