{% extends "base.html" %}
{% block title %}Blob Storage Browser — Flask Showcase{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Blob Storage Browser</h1>
  <p class="page-subtitle">Browse and inspect files in Datatailr blob storage</p>
</div>
<div id="blob-tree" class="card" style="padding: 1.5em; min-height: 400px;">
  <!-- File tree will be rendered here -->
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
async function fetchBlobTree() {
  const resp = await axios.get("{{ prefix }}/api/blob-tree");
  renderTree(resp.data, document.getElementById('blob-tree'));
}

function renderTree(node, container) {
  container.innerHTML = '';
  const table = document.createElement('table');
  table.className = 'blob-tree-table';
  const thead = document.createElement('thead');
  thead.innerHTML = '<tr><th>Name</th><th class="size-col">Size</th><th class="mod-col">Last Modified</th></tr>';
  table.appendChild(thead);
  const tbody = document.createElement('tbody');
  renderTreeRows(node, tbody, '', 0);
  table.appendChild(tbody);
  container.appendChild(table);
}

function isBlobDirectory(node) {
  if (!node) return false;
  if (Object.prototype.hasOwnProperty.call(node, 'is_file')) {
    return !node.is_file;
  }
  return node.type === 'dir';
}

function formatDateRawOrEpoch(val) {
  if (!val) return '';
  // If it's a number or a string of digits, treat as epoch seconds
  if (typeof val === 'number' || /^\d+$/.test(val)) {
    const epoch = typeof val === 'number' ? val : parseInt(val, 10);
    if (!isNaN(epoch)) {
      const d = new Date(epoch * 1000);
      return d.toLocaleString(undefined, { timeZone: 'UTC' });
    }
  }
  // Otherwise, return as-is
  return val;
}

function renderTreeRows(node, parent, prefix = '', depth = 0, insertAfter = null) {
  const indent = (depth * 0.5) + 'em';
  const isDir = isBlobDirectory(node);

  function insertRow(tr) {
    if (insertAfter && insertAfter.nextSibling) {
      parent.insertBefore(tr, insertAfter.nextSibling);
    } else {
      parent.appendChild(tr);
    }
  }

  if (isDir) {
    const tr = document.createElement('tr');
    tr.classList.add('dir-row');

    const tdName = document.createElement('td');
    tdName.style.paddingLeft = indent;
    const wrap = document.createElement('span');
    wrap.className = 'blob-dir';
    const icon = document.createElement('span');
    icon.className = 'folder-icon';
    icon.textContent = '📁';
    const nameEl = document.createElement('span');
    nameEl.className = 'folder-name';
    nameEl.textContent = node.name;
    wrap.appendChild(icon);
    wrap.appendChild(nameEl);
    tdName.appendChild(wrap);

    const tdSize = document.createElement('td');
    tdSize.className = 'size-col';
    if (typeof node.size === 'number') tdSize.textContent = formatSize(node.size);

    const tdMod = document.createElement('td');
    tdMod.className = 'mod-col';
    if (node.last_modified) tdMod.textContent = formatDateRawOrEpoch(node.last_modified);

    tr.appendChild(tdName);
    tr.appendChild(tdSize);
    tr.appendChild(tdMod);
    insertRow(tr);

    let expanded = false;
    const listPrefix = node.path != null && node.path !== '' ? node.path : '/';

    const toggle = async (e) => {
      if (e) {
        e.preventDefault();
        e.stopPropagation();
      }
      expanded = !expanded;
      if (expanded) {
        if (node.children == null) {
          try {
            const resp = await axios.get("{{ prefix }}/api/blob-tree", { params: { prefix: listPrefix } });
            node.children = resp.data.children || [];
          } catch (err) {
            expanded = false;
            alert('Failed to load folder: ' + (err.message || String(err)));
            return;
          }
        }
        let lastInserted = tr;
        (node.children || []).forEach(child => {
          lastInserted = renderTreeRows(child, parent, prefix, depth + 1, lastInserted);
        });
      } else {
        let next = tr.nextSibling;
        while (next && (next.classList.contains('dir-row') || (next.querySelector && next.querySelector('.blob-file')))) {
          const pad = next.firstChild && next.firstChild.style && next.firstChild.style.paddingLeft;
          if (pad && parseFloat(pad) > parseFloat(indent)) {
            const toRemove = next;
            next = next.nextSibling;
            parent.removeChild(toRemove);
          } else {
            break;
          }
        }
      }
    };

    tr.addEventListener('click', toggle);
    return tr;
  }

  const tr = document.createElement('tr');
  const blobPath = node.path || ((prefix ? prefix + '/' : '') + node.name);

  const tdName = document.createElement('td');
  tdName.style.paddingLeft = indent;
  const fileSpan = document.createElement('span');
  fileSpan.className = 'blob-file';
  fileSpan.title = 'Click to copy path';
  fileSpan.textContent = '📄 ' + node.name;
  tdName.appendChild(fileSpan);

  const tdSize = document.createElement('td');
  tdSize.className = 'size-col';
  if (typeof node.size === 'number') tdSize.textContent = formatSize(node.size);

  const tdMod = document.createElement('td');
  tdMod.className = 'mod-col';
  if (node.last_modified) tdMod.textContent = formatDateRawOrEpoch(node.last_modified);

  tr.appendChild(tdName);
  tr.appendChild(tdSize);
  tr.appendChild(tdMod);

  fileSpan.addEventListener('click', async (e) => {
    e.preventDefault();
    e.stopPropagation();
    try {
      await navigator.clipboard.writeText(blobPath);
      fileSpan.classList.add('copied');
      fileSpan.textContent = '📄 ' + node.name + ' (copied!)';
      setTimeout(() => {
        fileSpan.classList.remove('copied');
        fileSpan.textContent = '📄 ' + node.name;
      }, 1200);
    } catch (err) {
      alert('Failed to copy path');
    }
  });

  insertRow(tr);
  return tr;
}

function formatSize(bytes) {
  if (typeof bytes !== 'number' || isNaN(bytes)) return '';
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

document.addEventListener('DOMContentLoaded', fetchBlobTree);
</script>
<style>
.blob-tree-root, .blob-tree-root ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.blob-dir { cursor: pointer; font-weight: bold; }
.folder-icon { margin-right: 0.35em; }
tr.dir-row { cursor: pointer; }
.blob-file { color: #4a90e2; cursor: pointer; }
.blob-file.copied { color: #7ed957; }
.blob-size {
  float: right;
  color: #b0b0b0;
  font-size: 0.95em;
  margin-left: 1em;
  font-variant-numeric: tabular-nums;
}
.blob-size-col {
  display: inline-block;
  min-width: 80px;
  text-align: right;
  color: #b0b0b0;
  font-size: 0.95em;
  margin-left: 1em;
  font-variant-numeric: tabular-nums;
}
li { background: none; color: #e0e0e0; min-width: 300px; }
.blob-tree-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  color: #222;
}
.blob-tree-table th, .blob-tree-table td {
  padding: 0.4em 0.7em;
  border: none;
}
.blob-tree-table tr {
  border-bottom: 1px solid #e0e0e0; /* subtle light gray line */
}
.blob-tree-table tr:last-child {
  border-bottom: none;
}
.blob-tree-table th.size-col, .blob-tree-table td.size-col {
  width: 120px;
  text-align: right;
  color: #b0b0b0;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.blob-tree-table th.mod-col, .blob-tree-table td.mod-col {
  width: 150px;
  text-align: right;
  color: #b0b0b0;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.dir-row > td {
  font-weight: bold;
  background: transparent;
  cursor: pointer;
}
.child-row > td {
  background: transparent;
}
.blob-file.copied {
  color: #4a90e2;
}
</style>
{% endblock %}