{% extends "base.html" %}
{% block title %}Disk Tree · syspanel{% endblock %}
{% block heading %}Disk Tree Viewer{% endblock %}
{% block content %}
<div class="toolbar">
  <select id="drive-select" style="width:220px"><option>Detecting drives…</option></select>
  <input type="text" id="root-input" value="C:\" style="width:220px">
  <button id="scan-btn" class="primary">Scan</button>
</div>
<div class="breadcrumb" id="breadcrumb"></div>
<div class="card" style="padding:0;overflow:hidden">
  <div id="scan-loader" style="display:none"></div>
  <canvas id="treemap" style="width:100%;height:480px;display:block"></canvas>
</div>
<div class="card" style="margin-top:16px">
  <div class="table-scroll">
    <table class="data-table" id="table">
      <thead><tr><th style="width:75%">Name</th><th class="num" style="width:25%">Size</th></tr></thead>
      <tbody></tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
  import { api, formatBytes, connectWs, cacheGet, cacheSet } from "/static/js/core.js";
  import { renderTreemap } from "/static/js/treemap.js";

  let currentNode = null;
  let stack = [];

  // A folder is navigable if it has children we actually scanned (matches
  // the treemap's own click condition) — an empty or leaf-pruned folder has
  // nowhere further to descend into, so it stays plain text.
  function isNavigable(child) {
    return child.is_dir && child.children && child.children.length > 0;
  }

  function navigateInto(child) {
    if (!isNavigable(child)) return;
    stack.push(currentNode);
    showNode(child);
  }

  function showNode(node) {
    currentNode = node;
    hideScanLoader();
    const canvas = document.getElementById("treemap");
    renderTreemap(canvas, node, { formatBytes, onClick: navigateInto });

    const crumbs = [...stack, node].map((n, i) =>
      `<span data-idx="${i}" style="cursor:pointer">${n.name}</span>`).join("");
    document.getElementById("breadcrumb").innerHTML = crumbs;
    document.querySelectorAll("#breadcrumb span").forEach((el) => {
      el.addEventListener("click", () => {
        const idx = Number(el.dataset.idx);
        const target = [...stack, node][idx];
        stack = stack.slice(0, idx);
        showNode(target);
      });
    });

    const sortedChildren = (node.children || []).slice().sort((a, b) => b.size_bytes - a.size_bytes);
    const rows = sortedChildren.map((c, i) => {
      const nameHtml = isNavigable(c)
        ? `<a href="#" class="dir-link" data-idx="${i}" title="Open ${c.name}">📁 ${c.name}</a>`
        : `${c.is_dir ? "📁" : "📄"} ${c.name}`;
      return `<tr><td>${nameHtml}</td><td class="num">${formatBytes(c.size_bytes)}</td></tr>`;
    }).join("");
    document.querySelector("#table tbody").innerHTML = rows;

    document.querySelectorAll("#table .dir-link").forEach((el) => {
      el.addEventListener("click", (evt) => {
        evt.preventDefault();
        navigateInto(sortedChildren[Number(el.dataset.idx)]);
      });
    });
  }

  function showScanLoader(message, detail = "") {
    const canvas = document.getElementById("treemap");
    const loader = document.getElementById("scan-loader");
    canvas.style.display = "none";
    loader.style.display = "";
    loader.innerHTML = `
      <div class="loading-center">
        <span class="spinner spinner-lg"></span>
        <div>${message}</div>
        ${detail ? `<div class="loading-detail">${detail}</div>` : ""}
      </div>`;
  }

  function showScanError(message) {
    const loader = document.getElementById("scan-loader");
    loader.style.display = "";
    document.getElementById("treemap").style.display = "none";
    loader.innerHTML = `<div class="loading-center muted">${message}</div>`;
  }

  function hideScanLoader() {
    document.getElementById("scan-loader").style.display = "none";
    document.getElementById("treemap").style.display = "";
  }

  const LAST_ROOT_KEY = "systools-disk-last-root";
  const treeCacheKey = (root) => `disk-tree:${root.trim().toLowerCase()}`;

  // Attaches to a job's progress WebSocket — used both for a freshly started
  // scan and for reconnecting to one still running from before the page was
  // navigated away and back. The scan itself runs detached from any single
  // connection, so reconnecting just resumes watching it, never restarts it.
  function watchJob(root, jobId) {
    const ws = connectWs(`/api/v1/ws/scan/${jobId}`);
    ws.onmessage = (evt) => {
      const s = JSON.parse(evt.data);
      if (s.state === "running") {
        showScanLoader("Scanning…", `${s.scanned_files.toLocaleString()} files, ${formatBytes(s.scanned_bytes)} so far`);
      } else if (s.state === "done" && s.result) {
        cacheSet(treeCacheKey(root), s.result);
        showNode(s.result);
      } else if (s.state === "error") {
        showScanError(s.message || "Scan failed");
      } else if (s.state === "cancelled") {
        showScanError("Scan cancelled");
      }
    };
    ws.onerror = () => showScanError("Lost connection to scan progress");
  }

  async function startScan(root) {
    stack = [];
    document.querySelector("#table tbody").innerHTML = "";
    showScanLoader("Starting scan…", root);
    sessionStorage.setItem(LAST_ROOT_KEY, root);
    let status;
    try {
      status = await api("/disk/scan", { method: "POST", body: JSON.stringify({ root }) });
    } catch (e) {
      showScanError(e.message);
      return;
    }
    watchJob(root, status.job_id);
  }

  document.getElementById("scan-btn").addEventListener("click", () => {
    startScan(document.getElementById("root-input").value);
  });

  async function loadDrives() {
    const select = document.getElementById("drive-select");
    try {
      const drives = await api("/disk/drives");
      const currentRoot = document.getElementById("root-input").value;
      select.innerHTML = drives.map((d) => {
        const freeGb = (d.free_bytes / 1e9).toFixed(0);
        const totalGb = (d.total_bytes / 1e9).toFixed(0);
        return `<option value="${d.mountpoint}">${d.mountpoint} — ${freeGb} GB free of ${totalGb} GB</option>`;
      }).join("");
      const match = drives.find((d) => d.mountpoint.toLowerCase() === currentRoot.toLowerCase());
      select.value = match ? match.mountpoint : (drives[0] ? drives[0].mountpoint : "");
    } catch (e) {
      select.innerHTML = `<option>Drive detection failed</option>`;
    }
  }
  document.getElementById("drive-select").addEventListener("change", (evt) => {
    document.getElementById("root-input").value = evt.target.value;
  });
  loadDrives();

  // On load: render instantly from this session's last-known result for the
  // current root (if any) with no network wait at all, then reconcile in the
  // background — either against a scan still running server-side, or a
  // freshly re-scanned result. Only shows the loading widget when there is
  // truly nothing to show yet (first-ever load of this root this session).
  (async () => {
    const rootInput = document.getElementById("root-input");
    const lastRoot = sessionStorage.getItem(LAST_ROOT_KEY);
    if (lastRoot) rootInput.value = lastRoot;
    const root = rootInput.value;

    const cachedTree = cacheGet(treeCacheKey(root));
    if (cachedTree) {
      showNode(cachedTree.data);
    } else {
      showScanLoader("Loading…", root);
    }

    try {
      const latest = await api(`/disk/latest?root=${encodeURIComponent(root)}`);
      if (latest) {
        if (latest.state === "running") {
          showScanLoader("Scanning…", `${latest.scanned_files.toLocaleString()} files, ${formatBytes(latest.scanned_bytes)} so far`);
          watchJob(root, latest.job_id);
        } else if (latest.state === "done" && latest.result) {
          cacheSet(treeCacheKey(root), latest.result);
          showNode(latest.result);
        } else if (latest.state === "error" && !cachedTree) {
          showScanError(latest.message || "Scan failed");
        } else if (latest.state === "cancelled" && !cachedTree) {
          showScanError("Scan cancelled");
        }
        return;
      }
    } catch (e) {
      // Falls through to the on-disk cache below.
    }

    if (cachedTree) return; // already showing the last known result

    try {
      const cached = await api(`/disk/cached?root=${encodeURIComponent(root)}`);
      if (cached && cached.result) {
        cacheSet(treeCacheKey(root), cached.result);
        showNode(cached.result);
      }
    } catch (e) {
      // No cache yet is expected on first run; nothing to show.
    }
  })();
</script>
{% endblock %}