const HF_BASE = "https://huggingface.co/datasets/notamitgamer/usercontent";
const RAW_BASE = `${HF_BASE}/resolve/main`;
const HF_API_BASE = "https://huggingface.co/api/datasets/notamitgamer/usercontent/tree/main";

export default {
  async fetch(request, env, ctx) {
    // ====================================================================
    // KV-BASED IP THROTTLE (100 requests per minute per IP)
    // ====================================================================
    const clientIp = request.headers.get("cf-connecting-ip");
    
    // Only run if the KV namespace is properly bound
    if (clientIp && env.THROTTLE_KV) {
      // Create a time window key (changes every 60 seconds)
      const windowMin = Math.floor(Date.now() / 60000);
      const throttleKey = `rl:${clientIp}:${windowMin}`;
      
      // Get current request count for this IP in this minute
      const reqCount = parseInt(await env.THROTTLE_KV.get(throttleKey) || "0", 10);

      if (reqCount >= 100) {
        return new Response(
          JSON.stringify({ error: "429 Too Many Requests", message: "Rate limit exceeded. Please try again in a minute." }),
          { status: 429, headers: { "Content-Type": "application/json", "Retry-After": "60" } }
        );
      }
      
      // Asynchronously update the count so we don't slow down the user's request
      // Minimum expirationTtl in CF KV is 60 seconds, perfectly cleaning up our old keys
      ctx.waitUntil(env.THROTTLE_KV.put(throttleKey, (reqCount + 1).toString(), { expirationTtl: 60 }));
    }

    // ====================================================================
    // STANDARD ROUTING LOGIC
    // ====================================================================
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    const hostname = url.hostname;

    const isPagesDev = hostname.endsWith(".pages.dev");
    const isTestUiMode = url.searchParams.get("ui") === "true";

    const isRefreshReq = url.searchParams.get("refresh") === "true";

    if (isRefreshReq) {
      const pwd = url.searchParams.get("pwd");
      if (pwd !== "notamitgamer") {
        return new Response(
          "<script>alert('Incorrect refresh password!'); window.history.back();</script>",
          { headers: { "Content-Type": "text/html; charset=utf-8" }, status: 401 }
        );
      }
    }

    const cacheBuster = isRefreshReq ? `?t=${Date.now()}` : "";

    // ====================================================================
    // SECRET ROUTE: Proxy for global search to keep HF hidden from clients
    // ====================================================================
    if (url.pathname === "/_hf_global_tree") {
      const recursiveUrl = `${HF_API_BASE}?recursive=true${cacheBuster}`;
      const response = await fetch(recursiveUrl);
      const headers = new Headers(response.headers);
      headers.set("Access-Control-Allow-Origin", "*");
      return new Response(response.body, { status: response.status, headers });
    }

    // ====================================================================
    // ROUTE 1: EXPLORER & FILE VIEWER
    // ====================================================================
    if (hostname === "usercontent.amit.is-a.dev" || hostname === "usercontent.amit.is-not.cool" || (isPagesDev && isTestUiMode)) {
      const apiUrl = (key ? `${HF_API_BASE}/${key}` : HF_API_BASE) + cacheBuster;
      const apiResponse = await fetch(apiUrl);
      
      const uiHeaders = new Headers({ "Content-Type": "text/html; charset=utf-8" });
      uiHeaders.set("Cache-Control", "no-cache, max-age=0");

      if (!apiResponse.ok) {
        // It's not a folder, do a HEAD request to check if it's a file
        const rawUrl = `${RAW_BASE}/${key}${cacheBuster}`;
        const rawCheck = await fetch(rawUrl, { method: "HEAD" });
        if (rawCheck.ok) {
          const contentLength = rawCheck.headers.get("content-length");
          const html = generateFileViewerHtml(key, isPagesDev, hostname, contentLength, Date.now());
          return new Response(html, { headers: uiHeaders });
        }

        return new Response("404 - File or Folder Not Found", { status: 404 });
      }

      const items = await apiResponse.json();
      const html = generateExplorerHtml(key, items, isPagesDev, hostname, Date.now());
      return new Response(html, { headers: uiHeaders });
    }

    // ====================================================================
    // ROUTE 2: RAW VIEW (Standard Reverse Proxy)
    // ====================================================================
    if (hostname === "raw.usercontent.amit.is-a.dev" || hostname === "raw.usercontent.amit.is-not.cool" || (isPagesDev && !isTestUiMode)) {
      if (!key) return new Response("No file path provided.", { status: 400 });
      if (key.includes("..")) return new Response("Invalid path.", { status: 403 });

      const upstreamUrl = `${RAW_BASE}/${key}${cacheBuster}`;
      // Fetch purely from upstream (stripping problematic client headers implicitly)
      const upstream = await fetch(upstreamUrl, { method: request.method });

      if (!upstream.ok) {
        return new Response(`Upstream error: ${upstream.statusText}`, { status: upstream.status });
      }

      const headers = new Headers(upstream.headers);
      
      // CRITICAL FIX: Delete compression & length headers to prevent browser stream corruption
      headers.delete("content-encoding");
      headers.delete("content-length");
      
      // Let Cloudflare's default network edge cache handle everything naturally!
      headers.set("Cache-Control", "public, max-age=86400, s-maxage=86400");
      headers.set("Access-Control-Allow-Origin", "*");
      headers.set("X-Content-Type-Options", "nosniff");

      return new Response(upstream.body, { status: upstream.status, headers });
    }

    return new Response("Service active. Please use your custom domains.", { status: 200 });
  }
};

// ====================================================================
// HELPERS
// ====================================================================

function formatBytes(bytes) {
  if (!bytes || bytes === 0) return "—";
  const k = 1024, sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
}

function getFileType(name) {
  const ext = name.split(".").pop().toLowerCase();
  if (["png","jpg","jpeg","gif","webp","svg","ico","bmp","avif"].includes(ext)) return "image";
  if (["mp4","webm","ogg","mov","avi","mkv"].includes(ext)) return "video";
  if (["mp3","wav","flac","aac","opus"].includes(ext)) return "audio";
  if (["js","ts","jsx","tsx","py","html","css","json","yaml","yml","toml","xml","sh","bash","md","txt","env","rs","go","java","c","cpp","php","rb"].includes(ext)) return "code";
  if (["zip","tar","gz","rar","7z"].includes(ext)) return "archive";
  return "file";
}

function getFileIcon(type) {
  return { image: "image", video: "movie", audio: "music_note", code: "code", archive: "folder_zip", file: "insert_drive_file" }[type] || "insert_drive_file";
}

function getFileColor(type) {
  return {
    image:   { bg: "#dbeafe", fg: "#1d4ed8" },
    video:   { bg: "#ede9fe", fg: "#7c3aed" },
    audio:   { bg: "#fce7f3", fg: "#be185d" },
    code:    { bg: "#fef3c7", fg: "#b45309" },
    archive: { bg: "#fee2e2", fg: "#b91c1c" },
    file:    { bg: "#e7e9e4", fg: "#404943" },
  }[type] || { bg: "#e7e9e4", fg: "#404943" };
}

function generateBreadcrumbs(currentPath, qp) {
  const parts = currentPath ? currentPath.split("/") : [];
  let html = `<a href="/${qp}" class="crumb"><span class="ms">home</span></a>`;
  let acc = "";
  for (let i = 0; i < parts.length; i++) {
    acc += (i === 0 ? "" : "/") + parts[i];
    html += `<span class="crumb-sep">/</span>`;
    if (i === parts.length - 1) {
      html += `<span class="crumb crumb-current">${parts[i]}</span>`;
    } else {
      html += `<a href="/${acc}${qp}" class="crumb">${parts[i]}</a>`;
    }
  }
  return html;
}

// ====================================================================
// SHARED CSS
// ====================================================================
const BASE_CSS = `
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:         #f5f7f4;
  --surface:    #ffffff;
  --surf-low:   #f0f2ee;
  --surf-mid:   #e8eae6;
  --surf-hi:    #e0e3df;
  --on-surf:    #181c1a;
  --on-mute:    #50564f;
  --primary:    #006b54;
  --on-pri:     #ffffff;
  --pri-cont:   #d0f5e5;
  --outline:    #c6cac5;
  --outline-lo: #dde0da;
  --error:      #ba1a1a;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent !important; }
* { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--on-surf); min-height: 100vh; }
.ms {
  font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal;
  font-size: 20px; line-height: 1; display: inline-block; white-space: nowrap;
  direction: ltr; -webkit-font-smoothing: antialiased; user-select: none;
}
*:focus { outline: none !important; }
button, a, input { -webkit-tap-highlight-color: transparent !important; outline: none !important; user-select: none; }

/* HEADER */
.site-header {
  background: var(--surface); border-bottom: 1px solid var(--outline-lo);
  padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.logo {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--primary); font-weight: 600; font-size: 15px; flex-shrink: 0;
}
.logo-icon {
  width: 32px; height: 32px; background: var(--primary); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: white;
}
.logo-icon .ms { font-size: 18px; }
.version-badge {
  font-size: 11px; font-family: 'DM Mono', monospace; font-weight: 500;
  color: var(--on-mute); padding-top: 2px;
}
.breadcrumb-bar {
  flex: 1; display: flex; align-items: center; gap: 2px;
  font-size: 14px; overflow: hidden;
}
.crumb {
  display: flex; align-items: center; gap: 4px; color: var(--on-mute);
  text-decoration: none; padding: 4px 6px; border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s; white-space: nowrap; font-weight: 500;
}
.crumb:hover { background: var(--surf-low); color: var(--primary); }
.crumb-current { color: var(--on-surf); cursor: default; }
.crumb-current:hover { background: transparent; color: var(--on-surf); }
.crumb-sep { color: var(--outline); font-size: 16px; padding: 0 1px; }
.header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-md); border: none;
  background: transparent; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--on-mute); transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surf-low); color: var(--on-surf); }
.icon-btn .ms { font-size: 20px; }

/* MAIN */
main { max-width: 960px; margin: 28px auto; padding: 0 20px; }

/* CARD */
.card { background: var(--surface); border: 1px solid var(--outline-lo); border-radius: var(--r-xl); }

/* STATS BAR */
.stats-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--outline-lo); background: var(--surf-low);
  font-size: 13px; color: var(--on-mute);
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}
.stats-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stats-right { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--outline); }
.stat-item { display: flex; align-items: center; gap: 5px; }
.stat-item .ms { font-size: 15px; color: var(--primary); }
.stat-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--outline); }

/* SEARCH */
.search-wrap { padding: 13px 16px 9px; border-bottom: 1px solid var(--outline-lo); }
.search-inner { position: relative; }
.search-inner .ms { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-mute); font-size: 18px; pointer-events: none; }
.search-input {
  width: 100%; padding: 9px 14px 9px 40px; border: 1px solid var(--outline);
  border-radius: var(--r-lg); background: var(--bg); color: var(--on-surf);
  font-family: 'DM Sans', sans-serif; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,107,84,0.12); background: var(--surface); }
.search-input::placeholder { color: var(--on-mute); }

/* FILE TABLE */
.file-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.file-table th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-mute); padding: 8px 16px; text-align: left;
  border-bottom: 1px solid var(--outline-lo); background: var(--surf-low);
}
.th-size { width: 90px; }
.th-actions { width: 130px; }
.file-row td { border-bottom: 1px solid var(--outline-lo); }
.file-row { transition: background 0.12s; cursor: pointer; }
.file-row:last-child td { border-bottom: none; }
.file-row:last-child td:first-child { border-bottom-left-radius: calc(var(--r-xl) - 1px); }
.file-row:last-child td:last-child { border-bottom-right-radius: calc(var(--r-xl) - 1px); }
.file-row:hover { background: #f0faf7; }
.file-row:hover .row-actions { opacity: 1; }
.td-name {
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--on-surf);
}
td.size-td {
  padding: 10px 16px; font-size: 13px; color: var(--on-mute);
  font-family: 'DM Mono', monospace; white-space: nowrap; vertical-align: middle;
}
td.actions-td { padding: 10px 16px; vertical-align: middle; text-align: right; width: 1%; white-space: nowrap; }
.file-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.file-name { font-size: 14px; font-weight: 500; color: var(--on-surf); transition: color 0.15s; }
.file-row:hover .file-name { color: var(--primary); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.act-btn {
  display: flex; align-items: center; gap: 4px; padding: 5px 10px;
  border-radius: var(--r-md); border: 1px solid var(--outline); background: var(--surface);
  color: var(--on-mute); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.act-btn .ms { font-size: 14px; }
.act-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--pri-cont); }
.act-btn.copied { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }

/* MOBILE ACTIONS & DROPDOWN */
.desktop-actions { display: flex; }
.mobile-actions { display: none; position: relative; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--outline-lo); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: var(--r-md); padding: 4px; z-index: 50; flex-direction: column; min-width: 140px; margin-top: 4px; }
.dropdown-menu.show { display: flex; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: transparent; border: none; color: var(--on-surf); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; border-radius: 6px; text-align: left; }
.dropdown-item:hover { background: var(--surf-low); color: var(--primary); }
.dropdown-item .ms { font-size: 16px; color: var(--on-mute); }

@media (max-width: 600px) {
  .desktop-actions { display: none !important; }
  .mobile-actions { display: block !important; opacity: 1 !important; }
  .file-row .row-actions { opacity: 1; }
  .th-size, .size-td { display: none; }
}

.go-up-row td a {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  text-decoration: none; color: var(--on-mute); font-size: 14px; font-weight: 500; transition: color 0.15s;
}
.go-up-row:hover td a { color: var(--primary); }
.go-up-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surf-mid);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* EMPTY */
.empty-state { padding: 72px 24px; text-align: center; color: var(--on-mute); border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.empty-state .ms { font-size: 48px; color: var(--outline); margin-bottom: 12px; display: block; }
.empty-state p { margin: 6px 0 0; font-size: 14px; }

/* FILE VIEWER */
.viewer-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--outline-lo);
  background: var(--surf-low); gap: 12px; flex-wrap: wrap;
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
}
.viewer-file-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.viewer-file-name { font-size: 15px; font-weight: 600; color: var(--on-surf); font-family: 'DM Mono', monospace; }
.ext-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--surf-mid); color: var(--on-mute);
}
.size-badge { font-size: 12px; color: var(--on-mute); font-family: 'DM Mono', monospace; }
.viewer-actions { display: flex; align-items: center; gap: 8px; }
.btn-outlined {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
  border-radius: var(--r-lg); border: 1px solid var(--outline); background: var(--surface);
  color: var(--on-surf); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-outlined .ms { font-size: 16px; }
.btn-outlined:hover { border-color: var(--primary); color: var(--primary); }
.btn-filled {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
  border-radius: var(--r-lg); border: none; background: var(--primary); color: var(--on-pri);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: opacity 0.15s;
}
.btn-filled .ms { font-size: 16px; }
.btn-filled:hover { opacity: 0.88; }

/* FILE CONTENT WRAPPERS */
.img-container {
  padding: 40px 24px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#e0e3df 0% 25%, var(--surface) 0% 50%) 0 0 / 20px 20px;
  min-height: 200px; border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px);
}
.img-container img { max-width: 100%; max-height: 70vh; border-radius: var(--r-md); box-shadow: 0 8px 32px rgba(0,0,0,0.18); }

.video-container { padding: 32px 24px; background: #000; display: flex; justify-content: center; border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.video-container video { max-width: 100%; max-height: 70vh; border-radius: var(--r-md); }

.code-wrap { position: relative; background: #1e2228; border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); overflow: hidden; }
.copy-fab {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 34px; height: 34px; border-radius: var(--r-sm); border: none;
  background: rgba(255,255,255,0.1); color: #c9d1d9;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s;
}
.copy-fab:hover { background: rgba(255,255,255,0.2); }
.copy-fab .ms { font-size: 16px; }
#loading-indicator { padding: 40px; text-align: center; color: #8b949e; font-family: 'DM Mono', monospace; font-size: 13px; }
.CodeMirror { height: auto !important; min-height: 300px; font-family: 'DM Mono', monospace !important; font-size: 13px !important; line-height: 1.6 !important; padding: 16px 0; background: #1e2228 !important; color: #c9d1d9 !important; }
.CodeMirror-gutters { background: #161b22 !important; border-right: 1px solid #30363d !important; }
.CodeMirror-linenumber { color: #484f58 !important; }

/* UNSUPPORTED */
.unsupported-state { padding: 72px 24px; text-align: center; border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.unsupported-state .ms { font-size: 52px; color: var(--outline); display: block; margin-bottom: 16px; }
.unsupported-state h3 { margin: 0 0 8px; font-size: 17px; }
.unsupported-state p { margin: 0 0 24px; color: var(--on-mute); font-size: 14px; }

/* TOAST */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #1e2228; color: #fff; padding: 12px 20px; border-radius: var(--r-lg);
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s;
  opacity: 0; z-index: 999; white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast .ms { font-size: 18px; color: #4ade80; }

@keyframes spin { 100% { transform: rotate(360deg); } }
`;

// ====================================================================
// EXPLORER PAGE
// ====================================================================
function generateExplorerHtml(currentPath, items, isPagesDev, hostname, renderTimeMs) {
  const qp = isPagesDev ? "?ui=true" : "";
  const refreshParam = isPagesDev ? "?ui=true&refresh=true" : "?refresh=true";
  const breadcrumbsHtml = generateBreadcrumbs(currentPath, qp);

  const folders = items.filter(i => i.type === "directory");
  const files = items.filter(i => i.type !== "directory");
  const totalSize = files.reduce((a, i) => a + (i.size || 0), 0);

  const statsHtml = `
    <div class="stats-bar">
      <div class="stats-left">
        <span class="stat-item"><span class="ms">folder</span>${folders.length} folder${folders.length !== 1 ? "s" : ""}</span>
        <span class="stat-dot"></span>
        <span class="stat-item"><span class="ms">insert_drive_file</span>${files.length} file${files.length !== 1 ? "s" : ""}</span>
        ${totalSize > 0 ? `<span class="stat-dot"></span><span class="stat-item"><span class="ms">scale</span>${formatBytes(totalSize)}</span>` : ""}
      </div>
      <div class="stats-right">
        <span class="stat-item"><span class="ms" style="font-size:14px;margin-right:2px;color:var(--outline);">schedule</span>Fetched: <span class="local-time" data-time="${renderTimeMs}"></span></span>
      </div>
    </div>`;

  let goUpHtml = "";
  if (currentPath) {
    const parentPath = currentPath.split("/").slice(0, -1).join("/");
    goUpHtml = `
      <tr class="file-row go-up-row">
        <td colspan="3">
          <a href="/${parentPath}${qp}">
            <div class="go-up-icon"><span class="ms" style="font-size:18px;color:var(--on-mute)">arrow_upward</span></div>
            ..
          </a>
        </td>
      </tr>`;
  }

  const rowsHtml = items.map(item => {
    const isDir = item.type === "directory";
    const name = item.path.split("/").pop();
    const link = `/${item.path}${qp}`;
    const type = isDir ? "folder" : getFileType(name);
    const icon = isDir ? "folder" : getFileIcon(type);
    const color = isDir ? { bg: "#d0f5e5", fg: "#006b54" } : getFileColor(type);
    const sizeStr = isDir ? "—" : formatBytes(item.size);
    const rawDomain = "raw." + hostname.replace(/^raw\./, "");
    const rawFileUrl = isPagesDev ? `/${item.path}` : `https://${rawDomain}/${item.path}`;

    const actionsHtml = !isDir ? `
      <div class="row-actions desktop-actions">
        <button class="act-btn" onclick="event.stopPropagation();copyUrl('https://${hostname}/${item.path}',this)">
          <span class="ms">link</span> Copy URL
        </button>
        <a class="act-btn" href="${rawFileUrl}" target="_blank" onclick="event.stopPropagation()">
          <span class="ms">open_in_new</span> Raw
        </a>
      </div>
      <div class="row-actions mobile-actions">
        <button class="icon-btn" onclick="event.stopPropagation(); toggleDropdown(this)" style="width:28px;height:28px;"><span class="ms">more_vert</span></button>
        <div class="dropdown-menu">
          <button class="dropdown-item" onclick="event.stopPropagation(); copyUrl('https://${hostname}/${item.path}', this)"><span class="ms">link</span> Copy URL</button>
          <a class="dropdown-item" href="${rawFileUrl}" target="_blank" onclick="event.stopPropagation()"><span class="ms">open_in_new</span> Raw</a>
        </div>
      </div>` : `<div class="row-actions desktop-actions"></div><div class="row-actions mobile-actions"></div>`;

    return `
      <tr class="file-row" onclick="window.location='${link}'">
        <td style="padding:0">
          <a class="td-name" href="${link}" onclick="event.preventDefault()">
            <div class="file-icon" style="background:${color.bg}">
              <span class="ms" style="color:${color.fg}">${icon}</span>
            </div>
            <span class="file-name">${name}</span>
          </a>
        </td>
        <td class="size-td">${sizeStr}</td>
        <td class="actions-td">${actionsHtml}</td>
      </tr>`;
  }).join("");

  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${currentPath || "Home"} · usercontent</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,300,0,0" />
  <style>${BASE_CSS}</style>
</head>
<body>
  <header class="site-header">
    <a href="/${qp}" class="logo">
      <div class="logo-icon"><span class="ms" style="font-size:18px">folder_open</span></div>
      usercontent <span class="version-badge">v1.5</span>
    </a>
    <div class="breadcrumb-bar">${breadcrumbsHtml}</div>
    <div class="header-right">
      <button class="icon-btn" onclick="promptRefresh('${refreshParam}')" title="Refresh data">
        <span class="ms">refresh</span>
      </button>
    </div>
  </header>
  <main>
    <div class="card">
      ${statsHtml}
      <div class="search-wrap">
        <div class="search-inner">
          <span class="ms">search</span>
          <input type="text" id="searchInput" class="search-input" placeholder="Search globally in the entire repo..." autocomplete="off">
        </div>
      </div>
      <table class="file-table">
        <thead>
          <tr>
            <th>Name</th>
            <th class="th-size">Size</th>
            <th class="th-actions"></th>
          </tr>
        </thead>
        <tbody id="fileList">
          ${goUpHtml}
          ${rowsHtml || `<tr><td colspan="3"><div class="empty-state"><span class="ms">folder_open</span><strong>This folder is empty</strong><p>No files found here.</p></div></td></tr>`}
        </tbody>
      </table>
    </div>
  </main>
  <div id="toast"><span class="ms">check_circle</span> <span id="toast-msg">URL copied!</span></div>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelectorAll('.local-time').forEach(el => {
        const dateObj = new Date(parseInt(el.dataset.time));
        el.textContent = dateObj.toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
      });
    });

    let globalTree = null;
    let isFetching = false;
    async function fetchGlobalTree() {
      if(globalTree || isFetching) return;
      isFetching = true;
      try {
        const res = await fetch("/_hf_global_tree");
        globalTree = await res.json();
      } catch(e) {}
    }
    fetchGlobalTree();

    function getFileIconJs(type) {
      const map = { image: "image", video: "movie", audio: "music_note", code: "code", archive: "folder_zip", file: "insert_drive_file" };
      return map[type] || "insert_drive_file";
    }
    function getFileColorJs(type) {
      const map = {
        image:   { bg: "#dbeafe", fg: "#1d4ed8" },
        video:   { bg: "#ede9fe", fg: "#7c3aed" },
        audio:   { bg: "#fce7f3", fg: "#be185d" },
        code:    { bg: "#fef3c7", fg: "#b45309" },
        archive: { bg: "#fee2e2", fg: "#b91c1c" },
        file:    { bg: "#e7e9e4", fg: "#404943" },
      };
      return map[type] || { bg: "#e7e9e4", fg: "#404943" };
    }
    function formatBytesJs(bytes) {
      if (!bytes || bytes === 0) return "—";
      const k = 1024, sizes = ["B", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
    }
    function getFileTypeJs(name) {
      const ext = name.split(".").pop().toLowerCase();
      if (["png","jpg","jpeg","gif","webp","svg","ico","bmp","avif"].includes(ext)) return "image";
      if (["mp4","webm","ogg","mov","avi","mkv"].includes(ext)) return "video";
      if (["mp3","wav","flac","aac","opus"].includes(ext)) return "audio";
      if (["js","ts","jsx","tsx","py","html","css","json","yaml","yml","toml","xml","sh","bash","md","txt","env","rs","go","java","c","cpp","php","rb"].includes(ext)) return "code";
      if (["zip","tar","gz","rar","7z"].includes(ext)) return "archive";
      return "file";
    }

    document.getElementById('searchInput').addEventListener('input', function() {
      const term = this.value.toLowerCase();
      const mainList = document.getElementById('fileList');
      let searchList = document.getElementById('searchList');

      if (!term) {
        mainList.style.display = '';
        if(searchList) searchList.style.display = 'none';
        return;
      }

      mainList.style.display = 'none';
      if (!searchList) {
        searchList = document.createElement('tbody');
        searchList.id = 'searchList';
        mainList.parentNode.appendChild(searchList);
      }
      searchList.style.display = '';

      if (!globalTree) {
        searchList.innerHTML = '<tr><td colspan="3"><div class="empty-state"><span class="ms" style="animation:spin 1s linear infinite">sync</span><strong>Indexing...</strong><p>Loading global directory map.</p></div></td></tr>';
        return;
      }

      const results = globalTree.filter(i => i.path.toLowerCase().includes(term));
      if (results.length === 0) {
        searchList.innerHTML = '<tr><td colspan="3"><div class="empty-state"><span class="ms">search_off</span><strong>No results</strong><p>Could not find files matching "'+term+'".</p></div></td></tr>';
        return;
      }

      searchList.innerHTML = results.slice(0, 75).map(item => {
        const isDir = item.type === "directory";
        const name = item.path.split("/").pop();
        const link = "/" + item.path + "${qp}";
        const type = isDir ? "folder" : getFileTypeJs(name);
        const icon = isDir ? "folder" : getFileIconJs(type);
        const color = isDir ? { bg: "#d0f5e5", fg: "#006b54" } : getFileColorJs(type);
        const sizeStr = isDir ? "—" : formatBytesJs(item.size);
        const rawDomain = "raw." + "${hostname}".replace(/^raw\./, "");
        const rawFileUrl = ${isPagesDev} ? "/" + item.path : "https://" + rawDomain + "/" + item.path;

        const actionsHtml = !isDir ?
          '<div class="row-actions desktop-actions">' +
            '<button class="act-btn" onclick="event.stopPropagation();copyUrl(\\'https://${hostname}/' + item.path + '\\',this)">' +
              '<span class="ms">link</span> Copy URL' +
            '</button>' +
            '<a class="act-btn" href="' + rawFileUrl + '" target="_blank" onclick="event.stopPropagation()">' +
              '<span class="ms">open_in_new</span> Raw' +
            '</a>' +
          '</div>' +
          '<div class="row-actions mobile-actions">' +
            '<button class="icon-btn" onclick="event.stopPropagation(); toggleDropdown(this)" style="width:28px;height:28px;"><span class="ms">more_vert</span></button>' +
            '<div class="dropdown-menu">' +
              '<button class="dropdown-item" onclick="event.stopPropagation(); copyUrl(\\'https://${hostname}/' + item.path + '\\', this)"><span class="ms">link</span> Copy URL</button>' +
              '<a class="dropdown-item" href="' + rawFileUrl + '" target="_blank" onclick="event.stopPropagation()"><span class="ms">open_in_new</span> Raw</a>' +
            '</div>' +
          '</div>'
        : '<div class="row-actions desktop-actions"></div><div class="row-actions mobile-actions"></div>';

        return '<tr class="file-row" onclick="window.location=\\'' + link + '\\'">' +
            '<td style="padding:0">' +
              '<a class="td-name" href="' + link + '" onclick="event.preventDefault()">' +
                '<div class="file-icon" style="background:' + color.bg + '">' +
                  '<span class="ms" style="color:' + color.fg + '">' + icon + '</span>' +
                '</div>' +
                '<div>' +
                  '<span class="file-name">' + name + '</span>' +
                  '<div style="font-size:11px;color:var(--on-mute);margin-top:2px;">' + item.path + '</div>' +
                '</div>' +
              '</a>' +
            '</td>' +
            '<td class="size-td">' + sizeStr + '</td>' +
            '<td class="actions-td">' + actionsHtml + '</td>' +
          '</tr>';
      }).join('');
    });

    function toggleDropdown(btn) {
      const menu = btn.nextElementSibling;
      const isShowing = menu.classList.contains('show');
      document.querySelectorAll('.dropdown-menu.show').forEach(m => m.classList.remove('show'));
      if(!isShowing) menu.classList.add('show');
    }
    document.addEventListener('click', () => {
      document.querySelectorAll('.dropdown-menu.show').forEach(m => m.classList.remove('show'));
    });

    function copyUrl(url, btn) {
      navigator.clipboard.writeText(url).then(() => {
        if(btn.classList.contains('act-btn')) {
          btn.classList.add('copied');
          btn.innerHTML = '<span class="ms">check</span> Copied!';
          setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = '<span class="ms">link</span> Copy URL'; }, 2000);
        }
        showToast('CDN URL copied to clipboard');
      });
    }
    function showToast(msg) {
      const t = document.getElementById('toast');
      document.getElementById('toast-msg').textContent = msg;
      t.classList.add('show');
      clearTimeout(t._timer);
      t._timer = setTimeout(() => t.classList.remove('show'), 2500);
    }
    function promptRefresh(base) {
      const pwd = prompt('Enter password to refresh data:');
      if (pwd) window.location.href = base + '&pwd=' + encodeURIComponent(pwd);
    }
  </script>
</body>
</html>`;
}

// ====================================================================
// FILE VIEWER PAGE
// ====================================================================
function generateFileViewerHtml(currentPath, isPagesDev, hostname, fileSizeStr, renderTimeMs) {
  const qp = isPagesDev ? "?ui=true" : "";
  const refreshParam = isPagesDev ? "?ui=true&refresh=true" : "?refresh=true";
  const breadcrumbsHtml = generateBreadcrumbs(currentPath, qp);
  const fileName = currentPath.split("/").pop();
  const ext = fileName.includes(".") ? fileName.split(".").pop().toLowerCase() : "";
  const fileSize = parseInt(fileSizeStr, 10) || 0;

  const rawDomain = "raw." + hostname.replace(/^raw\./, "");
  const rawUrl = isPagesDev ? `/${currentPath}` : `https://${rawDomain}/${currentPath}`;
  const cdnUrl = isPagesDev ? `/${currentPath}` : `https://${hostname}/${currentPath}`;

  const type = getFileType(fileName);
  const color = getFileColor(type);
  const icon = getFileIcon(type);
  const isImage = type === "image";
  const isVideo = type === "video";
  const isUnsupported = type === "archive" || ["pdf","doc","docx","xls","xlsx","ppt","pptx","exe","bin","apk","iso"].includes(ext);
  const MAX_TEXT = 512 * 1024;

  let viewerContent = "";

  if (isUnsupported || (!isImage && !isVideo && fileSize > MAX_TEXT)) {
    viewerContent = `
      <div class="unsupported-state">
        <span class="ms">description</span>
        <h3>Preview not available</h3>
        <p>This file type can't be previewed. Download it to open locally.</p>
        <a href="${rawUrl}" target="_blank" class="btn-filled">
          <span class="ms">download</span> Download / View Raw
        </a>
      </div>`;
  } else if (isImage) {
    viewerContent = `
      <div class="img-container">
        <img src="${rawUrl}" alt="${fileName}" />
      </div>`;
  } else if (isVideo) {
    viewerContent = `
      <div class="video-container">
        <video controls src="${rawUrl}"></video>
      </div>`;
  } else {
    viewerContent = `
      <div class="code-wrap">
        <button class="copy-fab" id="copy-code-btn" title="Copy code">
          <span class="ms">content_copy</span>
        </button>
        <div id="loading-indicator">Loading ${fileName}…</div>
        <div id="editor-host"></div>
      </div>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/one-dark.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"><\/script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/mode/loadmode.min.js"><\/script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/meta.min.js"><\/script>
      <script>
        fetch("${rawUrl}")
          .then(r => { if (!r.ok) throw new Error(); return r.text(); })
          .then(text => {
            document.getElementById('loading-indicator').style.display = 'none';
            CodeMirror.modeURL = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/%N/%N.min.js";
            const cm = CodeMirror(document.getElementById('editor-host'), {
              value: text, lineNumbers: true, readOnly: "nocursor",
              viewportMargin: Infinity, theme: "one-dark"
            });
            const info = CodeMirror.findModeByExtension("${ext}");
            if (info && info.mode) CodeMirror.requireMode(info.mode, () => cm.setOption("mode", info.mime));
            document.getElementById('copy-code-btn').addEventListener('click', () => {
              navigator.clipboard.writeText(text).then(() => {
                const btn = document.getElementById('copy-code-btn');
                btn.querySelector('.ms').textContent = 'check';
                setTimeout(() => btn.querySelector('.ms').textContent = 'content_copy', 2000);
              });
            });
          })
          .catch(() => { document.getElementById('loading-indicator').textContent = 'Failed to load file.'; });
      <\/script>`;
  }

  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${fileName} · usercontent</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,300,0,0" />
  <style>${BASE_CSS}</style>
</head>
<body>
  <header class="site-header">
    <a href="/${qp}" class="logo">
      <div class="logo-icon"><span class="ms" style="font-size:18px">folder_open</span></div>
      usercontent <span class="version-badge">v1.5</span>
    </a>
    <div class="breadcrumb-bar">${breadcrumbsHtml}</div>
    <div class="header-right">
      <button class="icon-btn" onclick="promptRefresh('${refreshParam}')" title="Refresh data">
        <span class="ms">refresh</span>
      </button>
    </div>
  </header>
  <main>
    <div class="card">
      <div class="viewer-topbar">
        <div class="viewer-file-info">
          <div class="file-icon" style="background:${color.bg};width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <span class="ms" style="color:${color.fg}">${icon}</span>
          </div>
          <span class="viewer-file-name">${fileName}</span>
          ${ext ? `<span class="ext-badge">${ext}</span>` : ""}
          <span class="size-badge" style="margin-left:8px; display:inline-flex; align-items:center;"><span class="ms" style="font-size:16px;margin-right:4px;">schedule</span>Fetched:&nbsp;<span class="local-time" data-time="${renderTimeMs}"></span></span>
        </div>
        <div class="viewer-actions">
          <button class="btn-outlined" id="copy-cdn-btn" onclick="copyCdn('${cdnUrl}')">
            <span class="ms">link</span> Copy URL
          </button>
          <a href="${rawUrl}" target="_blank" class="btn-filled">
            <span class="ms">open_in_new</span> View Raw
          </a>
        </div>
      </div>
      ${viewerContent}
    </div>
  </main>
  <div id="toast"><span class="ms">check_circle</span> <span id="toast-msg">Copied!</span></div>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelectorAll('.local-time').forEach(el => {
        const dateObj = new Date(parseInt(el.dataset.time));
        el.textContent = dateObj.toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
      });
    });

    function copyCdn(url) {
      navigator.clipboard.writeText(url).then(() => {
        const btn = document.getElementById('copy-cdn-btn');
        btn.innerHTML = '<span class="ms">check</span> Copied!';
        showToast('CDN URL copied to clipboard');
        setTimeout(() => { btn.innerHTML = '<span class="ms">link</span> Copy URL'; }, 2000);
      });
    }
    function showToast(msg) {
      const t = document.getElementById('toast');
      document.getElementById('toast-msg').textContent = msg;
      t.classList.add('show');
      clearTimeout(t._timer);
      t._timer = setTimeout(() => t.classList.remove('show'), 2500);
    }
    function promptRefresh(base) {
      const pwd = prompt('Enter password to refresh data:');
      if (pwd) window.location.href = base + '&pwd=' + encodeURIComponent(pwd);
    }
  <\/script>
</body>
</html>`;
}