app.js

// Minimal, deployable browser app. No bundler required.
// Uses Zarrita via CDN only for store path utilities if needed; tree built from consolidated .zmetadata.

// Optional: try to import zarrita for URL helpers. If CDN fails, app still works.
let zarrita; // eslint-disable-line no-unused-vars
(async () => {
  try {
    zarrita = await import("https://esm.sh/zarrita@0.4?bundle");
  } catch (e) {
    // ignore; we don't strictly need zarrita to render metadata tree
  }
})();

const $ = (sel) => document.querySelector(sel);
const statusEl = () => $("#status");
const slideEl = () => $("#slide");
const sidebarEl = () => $("#sidebar");

const state = {
  baseUrl: "",
  tree: null, // { pathMap: Map<string, Node>, root: Node }
  activePath: "/",
  highlightVarPath: null,
};

/** Node shape
 * {
 *  path: string ("/" for root),
 *  type: "group" | "array",
 *  attrs?: object,
 *  zarray?: object, // for arrays
 *  children: string[] // child basenames sorted
 * }
 */

function normalizeBase(url) {
  // Ensure no trailing slash for consistent joins
  return url.replace(/\/$/, "");
}

function normalizePath(p) {
  if (!p) return "/";
  // Ensure leading slash, collapse repeats, remove trailing slash (except root)
  let s = p.replace(/\/+/g, "/");
  if (!s.startsWith("/")) s = "/" + s;
  if (s.length > 1) s = s.replace(/\/$/, "");
  return s;
}

async function fetchJson(url) {
  const res = await fetch(url, { mode: "cors" });
  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
  return res.json();
}

async function loadZmetadata(baseUrl) {
  const u = normalizeBase(baseUrl);
  const metaUrl = `${u}/.zmetadata`;
  setStatus(`Fetching .zmetadata from ${metaUrl} ...`);
  const jm = await fetchJson(metaUrl);
  if (!jm || typeof jm !== "object" || !jm.metadata) {
    throw new Error(".zmetadata missing 'metadata' key. Ensure store is consolidated.");
  }
  return { base: u, consolidated: jm };
}

// Zarr v3 consolidated: expect zarr.json with a metadata map.
// We'll adapt v3 keys ending with "/group.json", "/array.json", "/attrs.json" to v2-like
// ".zgroup", ".zarray", ".zattrs" so we can reuse buildTree().
async function loadZarrV3(baseUrl) {
  const u = normalizeBase(baseUrl);
  const url = `${u}/zarr.json`;
  setStatus(`Fetching zarr.json from ${url} ...`);
  const zj = await fetchJson(url);
  if (!zj || typeof zj !== 'object') throw new Error('Invalid zarr.json');
  console.debug('[zarr] zarr.json content keys:', Object.keys(zj || {}));
  return { base: u, zarr: zj };
}

function buildTreeFromV3(v3) {
  const zj = v3?.zarr;
  // Expect a consolidated-like map either in zarr.json.metadata OR zarr.json.consolidated_metadata.metadata
  const md = (zj && (zj.metadata || (zj.consolidated_metadata && zj.consolidated_metadata.metadata))) || null;
  if (!md || typeof md !== 'object') throw new Error('zarr.json missing metadata map (expected metadata or consolidated_metadata.metadata)');
  const mapped = {};
  let mode = null;
  for (const [key, value] of Object.entries(md)) {
    // Mode A: file-like keys ending in group.json/array.json/attrs.json
    if (typeof key === 'string' && /\.(json)$/.test(key)) {
      mode = mode || 'filelist';
      if (key.endsWith('group.json')) {
        const p = key.replace(/group\.json$/i, '.zgroup');
        mapped[p] = value;
      } else if (key.endsWith('array.json')) {
        const p = key.replace(/array\.json$/i, '.zarray');
        mapped[p] = value;
      } else if (key.endsWith('attrs.json')) {
        const p = key.replace(/attrs\.json$/i, '.zattrs');
        mapped[p] = value;
      } else if (/\.z(group|array|attrs)$/i.test(key)) {
        mapped[key] = value;
      }
      continue;
    }
    // Mode B: node-descriptor map: key is a path, value has node_type and attributes
    if (value && typeof value === 'object' && (value.node_type || value.attributes || value.consolidated_metadata)) {
      mode = mode || 'nodedesc';
      const path = String(key);
      const attrs = value.attributes || {};
      if (value.node_type === 'group') {
        mapped[`${path}/.zgroup`] = { zarr_format: 2 };
        if (attrs && Object.keys(attrs).length) mapped[`${path}/.zattrs`] = attrs;
      } else if (value.node_type === 'array') {
        // Try to find array metadata in descriptor if present; otherwise, create minimal placeholder
        const arrMeta = value.array || value.metadata || {};
        mapped[`${path}/.zarray`] = arrMeta;
        if (attrs && Object.keys(attrs).length) mapped[`${path}/.zattrs`] = attrs;
      }
      continue;
    }
  }
  console.debug('[zarr] v3 consolidated mode used:', mode, 'entries:', Object.keys(mapped).length);
  if (!Object.keys(mapped).length) throw new Error('zarr.json metadata did not contain recognizable entries');
  const consolidated = { metadata: mapped };
  return buildTree(consolidated);
}

function buildTree(consolidated) {
  const pathMap = new Map();
  // Ensure root exists
  ensureNode(pathMap, "/").type = "group";

  const meta = consolidated.metadata;
  for (const [key, value] of Object.entries(meta)) {
    // keys are like "foo/.zgroup", "foo/bar/.zarray", "foo/.zattrs"
    if (!key.endsWith(".zgroup") && !key.endsWith(".zarray") && !key.endsWith(".zattrs")) continue;
    const path = normalizePath("/" + key.replace(/\.z(group|array|attrs)$/i, ""));
    const node = ensureNode(pathMap, path);
    if (key.endsWith(".zgroup")) node.type = "group";
    if (key.endsWith(".zarray")) node.type = "array";
    if (key.endsWith(".zattrs")) node.attrs = value || {};
    if (key.endsWith(".zarray")) node.zarray = value || {};
  }

  // Infer missing parent groups and children lists
  for (const p of pathMap.keys()) {
    if (p === "/") continue;
    const parent = dirname(p);
    const base = basename(p);
    const parentNode = ensureNode(pathMap, parent);
    if (!parentNode.children.includes(base)) parentNode.children.push(base);
  }
  // Sort children for stable sibling navigation
  for (const node of pathMap.values()) node.children.sort((a, b) => a.localeCompare(b));

  return { pathMap, root: pathMap.get("/") };
}

function ensureNode(map, path) {
  const np = normalizePath(path);
  let node = map.get(np);
  if (!node) {
    node = { path: np, type: "group", attrs: {}, children: [] };
    map.set(np, node);
  }
  return node;
}

function dirname(p) {
  const np = normalizePath(p);
  if (np === "/") return "/";
  const parts = np.split("/").filter(Boolean);
  parts.pop();
  return "/" + parts.join("/");
}
function basename(p) {
  const np = normalizePath(p);
  if (np === "/") return "/";
  const parts = np.split("/").filter(Boolean);
  return parts[parts.length - 1] || "/";
}

function siblingsOf(tree, path) {
  // Operate among sibling GROUPS only
  const parent = dirname(path);
  const sibNames = tree.pathMap.get(parent)?.children || [];
  const sibGroups = sibNames
    .map((name) => tree.pathMap.get(join(parent, name)))
    .filter((n) => n && n.type === "group")
    .map((n) => basename(n.path));
  const idx = sibGroups.indexOf(basename(path));
  return { parent, list: sibGroups, index: idx };
}

function firstChildOf(tree, path) {
  const node = tree.pathMap.get(path);
  if (!node || !node.children.length) return null;
  // Choose first GROUP child only
  for (const name of node.children) {
    const child = tree.pathMap.get(join(path, name));
    if (child && child.type === "group") return child.path;
  }
  return null;
}

function join(parent, childBase) {
  const pp = normalizePath(parent);
  const out = pp === "/" ? `/${childBase}` : `${pp}/${childBase}`;
  return normalizePath(out);
}

function setStatus(msg) { statusEl().textContent = msg; }

function renderActive() {
  const { tree, activePath } = state;
  const el = slideEl();
  try {
    if (!tree) {
      el.innerHTML = `<div class="placeholder">Enter a Zarr store URL and click Load.</div>`;
      renderSidebar();
      return;
    }
    const node = tree.pathMap.get(activePath);
    if (!node) {
      el.innerHTML = `<div class="error">Path not found: ${escapeHtml(activePath)}</div>`;
      renderSidebar();
      return;
    }

  const crumbs = breadcrumb(activePath)
    .map((p, i, arr) => `<span>${escapeHtml(basename(p) || "/")}${i < arr.length - 1 ? " / " : ""}</span>`)
    .join("");

  const parts = [];
  parts.push(`<div class="breadcrumb">${crumbs}</div>`);
  // (header contains copy buttons; no in-content copy buttons)
  if (node.type === "array") {
    parts.push(`<div class="node-title">Array <span class="badge">${escapeHtml(activePath)}</span></div>`);
    const metaRows = [];
    metaRows.push(["type", "array"]);
    const za = node.zarray || {};
    if (za.shape) metaRows.push(["shape", JSON.stringify(za.shape)]);
    if (za.dtype) metaRows.push(["dtype", String(za.dtype)]);
    if (za.chunks) metaRows.push(["chunks", JSON.stringify(za.chunks)]);
    if (za.chunk_grid) metaRows.push(["chunk_grid", JSON.stringify(za.chunk_grid)]);
    if (za.codecs) metaRows.push(["codecs", JSON.stringify(za.codecs)]);
    if (za.compressor) metaRows.push(["compressor", JSON.stringify(za.compressor)]);
    parts.push(`<div class="meta">${metaRows.map(([k, v]) => `<div class="label">${escapeHtml(k)}</div><div class="value">${escapeHtml(v)}</div>`).join("")}</div>`);
    // Chunks and Attributes side-by-side
    const chunkMatrix = renderChunkMatrix(node);
    const hasAttrs = node.attrs && Object.keys(node.attrs).length;
    const chunksSection = chunkMatrix ? `
      <div class="section-row">
        <details open>
          <summary>Chunks</summary>
          ${chunkMatrix}
        </details>
      </div>
    ` : "";
    const attrsSection = `
      <div class="section-row">
        <details ${hasAttrs?"":"open"}>
          <summary>Attributes</summary>
          ${hasAttrs ? `<pre class="codeblock">${escapeHtml(JSON.stringify(node.attrs, null, 2))}</pre>` : `<div class="codeblock"><div class="small">(none)</div></div>`}
        </details>
      </div>
    `;
    parts.push(`
      <div class="section section-row">
        ${chunksSection}${attrsSection}
      </div>
    `);
    el.innerHTML = parts.join("");
    // Hide aggregated panel and two-col layout for arrays
    const agg = document.getElementById('aggPanel');
    const stage = document.querySelector('main.stage');
    if (agg) { agg.hidden = true; agg.innerHTML = ""; }
    if (stage) stage.classList.remove('two-col');
    updateHeaderControls();
    const inputEl = document.querySelector('#zarrUrl');
    if (inputEl && state.baseUrl) inputEl.value = humanReadableUri();
    return;
  }

  parts.push(`<div class="node-title">Group <span class="badge">${escapeHtml(activePath)}</span></div>`);
  // Apply naming spec to this group's direct subgroups (if any) before rendering cards
  applyNamingSpecIfAny(node.path);
  const groupView = renderGroupLikeXarray(state.tree, node);
  parts.push(groupView);
  el.innerHTML = parts.join("");
  // Render aggregated attributes in separate panel
  const agg = document.getElementById('aggPanel');
  const aggContainer = document.querySelector('.agg-panel-container');
  const stage = document.querySelector('main.stage');
  
  if (agg && aggContainer) {
    // Show the container first
    aggContainer.hidden = false;
    
    if (hasMultipleSubgroups(state.tree, node)) {
      const aggView = renderAggregatedGroupAttrs(state.tree, node);
      agg.hidden = false;
      agg.innerHTML = `<div class="node-title">Aggregated attributes <span class="badge">${escapeHtml(activePath)}</span></div>${aggView}`;
      if (stage) stage.classList.add('two-col');
    } else {
      aggContainer.hidden = true;
      agg.innerHTML = "";
      if (stage) stage.classList.remove('two-col');
    }
  }
  updateHeaderControls();
  const inputEl = document.querySelector('#zarrUrl');
  if (inputEl && state.baseUrl) inputEl.value = humanReadableUri();
  renderSidebar();
  } catch (e) {
    el.innerHTML = `<div class="error">Render error: ${escapeHtml(e.message || String(e))}</div>`;
  }
}

function renderAggregatedGroupAttrs(tree, grpNode) {
  if (!tree || !grpNode) return "";
  // Use only direct subgroup groups of the active group
  const children = (grpNode.children || [])
    .map((name) => tree.pathMap.get(join(grpNode.path, name)))
    .filter((n) => n && n.type === "group");
  if (!children.length) return "";
  const allKeys = new Set();
  for (const n of children) {
    const a = n.attrs || {};
    for (const k of Object.keys(a)) allKeys.add(k);
  }
  const keys = Array.from(allKeys).sort();
  // Unique values summary (previous view)
  const summaryRows = [];
  for (const k of keys) {
    const present = [];
    for (const n of children) {
      const a = n.attrs || {};
      if (Object.prototype.hasOwnProperty.call(a, k)) present.push(a[k]);
    }
    if (!present.length) continue;
    let allEqual = true;
    for (let i = 1; i < present.length; i++) {
      if (!deepEqualSimple(present[0], present[i])) { allEqual = false; break; }
    }
    let display;
    if (allEqual) {
      const v = present[0];
      if (v == null) display = "null";
      else if (typeof v === "object") display = JSON.stringify(v);
      else display = String(v);
    } else {
      const asKey = (v) => v == null ? "__NULL__" : (typeof v === "object" ? JSON.stringify(v) : String(v));
      const toDisp = (v) => v == null ? "null" : (typeof v === "object" ? JSON.stringify(v) : String(v));
      const seen = new Set();
      const uniques = [];
      for (const v of present) {
        const key = asKey(v);
        if (!seen.has(key)) { seen.add(key); uniques.push(toDisp(v)); }
      }
      display = uniques.join(", ");
    }
    summaryRows.push(`<div class="label">${escapeHtml(k)}</div><div class="value">${escapeHtml(display)}</div>`);
  }
  const summaryBody = summaryRows.length ? summaryRows.join("") : `<div class="small">(none)</div>`;
  const summaryHtml = `<div class="section"><h3>Unique values</h3><div class="codeblock"><div class="meta small">${summaryBody}</div></div></div>`;
  const selectOpt = (v, label) => `<option value="${escapeHtml(String(v))}">${escapeHtml(String(label))}</option>`;
  const controls = `
    <div class="section">
      <h3>Interactive table</h3>
      <div class="pivot-controls">
        <label>Rows
          <select id="rowAttrSel">
            ${selectOpt("", "(none)")}
            ${keys.map(k => selectOpt(k, k)).join("")}
          </select>
        </label>
        <label>Columns
          <select id="colAttrSel">
            ${selectOpt("", "(none)")}
            ${keys.map(k => selectOpt(k, k)).join("")}
          </select>
        </label>
      </div>
      <div id="pivotHost"></div>
    </div>
  `;
  queueMicrotask(() => bindAggPivot(children));
  return summaryHtml + controls;
}

function deepEqualSimple(a, b) {
  if (a === b) return true;
  if (typeof a !== typeof b) return false;
  if (a && b && typeof a === "object") {
    try { return JSON.stringify(a) === JSON.stringify(b); } catch { return false; }
  }
  return false;
}

// Convert zarr dtype tokens like "<f4" to human names like "float32"
function prettyDtype(dtype) {
  if (!dtype) return "";
  const s = String(dtype);
  if (s === 'bool' || s === '|b1') return 'bool';
  const core = s.replace(/[<>=|]/g, ''); // strip endianness
  const m = core.match(/^([fiu])?(\d+)$/);
  if (!m) return core;
  const kind = m[1] || '';
  const n = parseInt(m[2], 10);
  if (kind === 'f') return `float${n*8}`;
  if (kind === 'i') return `int${n*8}`;
  if (kind === 'u') return `uint${n*8}`;
  // Some encodings directly give bytes; assume integer
  if (!isNaN(n)) return `${n<=2?`int${n*8}`: n<=8?`int${n*8}`:`${core}`}`;
  return core;
}

function valueKey(v) {
  return v == null ? '__NULL__' : (typeof v === 'object' ? JSON.stringify(v) : String(v));
}

function valueLabel(v) {
  if (v == null) return 'null';
  if (typeof v === 'object') return JSON.stringify(v);
  return String(v);
}

function bindAggPivot(children) {
  const rowSel = document.getElementById('rowAttrSel');
  const colSel = document.getElementById('colAttrSel');
  const host = document.getElementById('pivotHost');
  if (!rowSel || !colSel || !host) return;
  const render = () => {
    const rowAttr = rowSel.value || '';
    const colAttr = colSel.value || '';
    host.innerHTML = renderPivotTable(children, rowAttr, colAttr);
    queueMicrotask(() => bindNavLinks());
  };
  rowSel.addEventListener('change', render);
  colSel.addEventListener('change', render);
  render();
}

function renderPivotTable(children, rowAttr, colAttr) {
  // Collect unique row/col values
  const rowValsSet = new Set();
  const colValsSet = new Set();
  const grid = new Map(); // rowKey -> Map(colKey -> nodes[])
  for (const n of children) {
    const a = n.attrs || {};
    const rv = rowAttr ? a[rowAttr] : '(all)';
    const cv = colAttr ? a[colAttr] : '(all)';
    const rk = valueKey(rv);
    const ck = valueKey(cv);
    rowValsSet.add(rk);
    colValsSet.add(ck);
    if (!grid.has(rk)) grid.set(rk, new Map());
    const rowMap = grid.get(rk);
    if (!rowMap.has(ck)) rowMap.set(ck, []);
    rowMap.get(ck).push(n);
  }
  const rowKeys = Array.from(rowValsSet);
  const colKeys = Array.from(colValsSet);
  rowKeys.sort();
  colKeys.sort();
  const headCols = colKeys.map(ck => `<th>${escapeHtml(ck === '__NULL__' ? 'null' : ck)}</th>`).join('');
  let bodyRows = '';
  for (const rk of rowKeys) {
    const cells = colKeys.map(ck => {
      const nodes = grid.get(rk)?.get(ck) || [];
      if (!nodes.length) return '<td></td>';
      const list = nodes.map(n => {
        const label = escapeHtml(basename(n.path));
        return `<div><span class="badge">group</span> <a href="#" data-path="${escapeHtml(n.path)}" class="navlink">${label}</a></div>`;
      }).join('');
      return `<td><details><summary>${nodes.length} group(s)</summary><div class="codeblock small">${list}</div></details></td>`;
    }).join('');
    bodyRows += `<tr><th class="rowhead">${escapeHtml(rk === '__NULL__' ? 'null' : rk)}</th>${cells}</tr>`;
  }
  return `
    <div class="pivot-wrap">
      <table class="pivot-table">
        <thead>
          <tr><th></th>${headCols}</tr>
        </thead>
        <tbody>
          ${bodyRows}
        </tbody>
      </table>
    </div>
  `;
}

function hasMultipleSubgroups(tree, grpNode) {
  const groupChildren = grpNode.children
    .map((name) => tree.pathMap.get(join(grpNode.path, name)))
    .filter((n) => n && n.type === "group");
  return groupChildren.length > 1;
}

function breadcrumb(path) {
  const parts = path.split("/").filter(Boolean);
  const acc = ["/"];
  let cur = "";
  for (const p of parts) {
    cur = cur ? `${cur}/${p}` : `/${p}`;
    acc.push(cur);
  }
  return acc;
}

function escapeHtml(v) {
  return String(v)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

// Load first and last values of a time array
async function loadTimeArrayValues(baseUrl, path) {
  try {
    // Ensure baseUrl ends with a slash
    const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
    const arrayUrl = `${normalizedBase}${path}`;
    
    // Import Zarrita dynamically
    const zarrita = await import("https://esm.sh/zarrita@0.4.0");
    
    // Open the store and get the array
    const store = zarrita.open({ url: arrayUrl });
    const arr = await zarrita.Array.open(store);
    
    // Get the length of the first dimension
    const length = arr.shape[0];
    if (length === 0) {
      return { first: null, last: null };
    }
    
    // Load first and last values
    const firstValue = await arr.get([0]);
    const lastValue = await arr.get([length - 1]);
    
    // Format date if it's a datetime64 value
    const formatIfDate = (value) => {
      if (value instanceof Date) {
        return value.toISOString();
      } else if (typeof value === 'number' && arr.dtype.startsWith('datetime64')) {
        // Handle numeric timestamps (common in netCDF/Zarr)
        return new Date(value).toISOString();
      }
      return value;
    };
    
    return { 
      first: formatIfDate(firstValue), 
      last: formatIfDate(lastValue) 
    };
  } catch (error) {
    console.error('Error loading time array:', error);
    return { error: error.message };
  }
}

// Handle time array button click
window.handleTimeArrayClick = async function(button, baseUrl, path) {
  const originalText = button.innerHTML;
  button.disabled = true;
  button.innerHTML = 'Loading...';
  
  try {
    const result = await loadTimeArrayValues(baseUrl, path);
    
    if (result.error) {
      button.innerHTML = `Error: ${result.error}`;
      return;
    }
    
    // Create a div to display the values
    const valuesDiv = document.createElement('div');
    valuesDiv.className = 'time-array-values';
    valuesDiv.innerHTML = `
      <div>First: ${escapeHtml(String(result.first))}</div>
      <div>Last: ${escapeHtml(String(result.last))}</div>
    `;
    
    // Insert after the button
    button.parentNode.insertBefore(valuesDiv, button.nextSibling);
    
    // Remove the button after showing values
    button.remove();
  } catch (error) {
    button.innerHTML = `Error: ${error.message}`;
    setTimeout(() => {
      button.innerHTML = originalText;
      button.disabled = false;
    }, 2000);
  }
};

function icon(kind = '') {
  const cls = `icon ${kind}`.trim();
  if (kind === 'group') {
    return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4h8a2 2 0 0 1 2 2v3h-9l-2-2H4V6a2 2 0 0 1 2-2h4zm12 7v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9h7l2 2h11z"/></svg>`;
  }
  if (kind === 'attr') {
    return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h6l10 10-6 6L5 11V7zm4 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>`;
  }
  if (kind === 'coord') {
    return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg>`;
  }
  if (kind === 'data') {
    return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6c0-2.21 3.58-4 8-4s8 1.79 8 4-3.58 4-8 4-8-1.79-8-4zm0 6c0 2.21 3.58 4 8 4s8-1.79 8-4m-16 6c0 2.21 3.58 4 8 4s8-1.79 8-4" fill="none" stroke="currentColor" stroke-width="2"/></svg>`;
  }
  if (kind === 'dim') {
    return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>`;
  }
  return `<svg class="${cls}" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>`;
}

// Toggle details sections
window.toggleDetails = function(id) {
  const details = document.getElementById(id);
  if (!details) return;
  
  // Get the var-container parent
  const container = details.closest('.var-container');
  if (!container) return;
  
  // Toggle the display of the details section
  const isVisible = details.style.display === 'block' || 
                  (details.style.display === '' && window.getComputedStyle(details).display === 'block');
  
  details.style.display = isVisible ? 'none' : 'block';
  
  // Update the button's aria-expanded attribute for accessibility
  const button = document.querySelector(`[data-target="${id}"]`);
  if (button) {
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !isExpanded);
    button.classList.toggle('active', !isExpanded);
  }
  
  // If another details section is open in the same container, close it
  if (!isVisible) {
    const otherDetails = container.querySelectorAll('.var-details');
    otherDetails.forEach(detail => {
      if (detail.id !== id && detail.style.display === 'block') {
        detail.style.display = 'none';
        // Update the other button's state
        const otherButton = document.querySelector(`[data-target="${detail.id}"]`);
        if (otherButton) {
          otherButton.setAttribute('aria-expanded', 'false');
          otherButton.classList.remove('active');
        }
      }
    });
  }
};

function setActive(path) {
  // Prevent setting arrays as active; keep only groups active
  const node = state.tree?.pathMap.get(path);
  const targetPath = node && node.type === "group" ? path : dirname(path);
  state.activePath = targetPath;
  state.highlightVarPath = node && node.type === "array" ? node.path : null;
  renderActive();
  // Update hash to include active subgroup
  if (state.baseUrl) {
    const hash = `${encodeURI(state.baseUrl)}|${encodeURI(state.activePath)}`;
    if (location.hash.slice(1) !== hash) location.hash = hash;
  }
}

function handleKeydown(ev) {
  if (!state.tree) return;
  const { key } = ev;
  if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key)) ev.preventDefault();

  if (key === "ArrowUp") {
    const parent = dirname(state.activePath);
    if (parent && parent !== state.activePath) setActive(parent);
  } else if (key === "ArrowDown") {
    const child = firstChildOf(state.tree, state.activePath);
    if (child) setActive(child);
  } else if (key === "ArrowLeft" || key === "ArrowRight") {
    const { parent, list, index } = siblingsOf(state.tree, state.activePath);
    if (!list.length) return;
    if (index < 0) return; // current not a group sibling (e.g., root) -> no-op
    const delta = key === "ArrowLeft" ? -1 : 1;
    const nextIdx = (index + delta + list.length) % list.length;
    const nextPath = join(parent, list[nextIdx]);
    setActive(nextPath);
  }
}

async function onLoadClick() {
  const input = $("#zarrUrl");
  const entered = (input.value || "").trim();
  const baseUrl = deriveBaseFromUrl(entered);
  if (!baseUrl) {
    setStatus("Please enter a Zarr store base URL.");
    input.focus();
    return;
  }
  await loadStore(baseUrl);
}

async function loadStore(baseUrl) {
  try {
    slideEl().focus();
    setStatus("Loading...");
    state.baseUrl = normalizeBase(baseUrl);
    // Try Zarr v3 first (zarr.json). On failure, fall back to v2 consolidated (.zmetadata)
    let tree = null;
    try {
      const v3 = await loadZarrV3(state.baseUrl);
      console.info('[zarr] v3 detected at', state.baseUrl, v3?.zarr);
      tree = buildTreeFromV3(v3);
      console.info('[zarr] v3 tree built successfully');
      setStatus('Loaded Zarr v3 (zarr.json).');
    } catch (e) {
      console.warn('[zarr] v3 load failed, falling back to v2 (.zmetadata). Reason:', e?.message || e);
      const { consolidated } = await loadZmetadata(state.baseUrl);
      console.info('[zarr] v2 consolidated loaded');
      tree = buildTree(consolidated);
      console.info('[zarr] v2 tree built successfully');
      setStatus('Loaded Zarr v2 (.zmetadata).');
    }
    state.tree = tree;
    state.activePath = "/";
    // Apply naming spec (if any) to root subgroups before rendering, so aggregated attrs include them
    applyNamingSpecIfAny('/');
    renderActive();
    // Update hash for deep-linking (store | path)
    const hash = `${encodeURI(state.baseUrl)}|${encodeURI(state.activePath)}`;
    if (location.hash.slice(1) !== hash) location.hash = hash;
  } catch (err) {
    console.error('[zarr] loadStore error:', err);
    slideEl().innerHTML = `<div class="error">${escapeHtml(err.message || String(err))}</div>`;
    setStatus("Error.");
  }
}

function init() {
  // Sidebar toggle functionality
  const sidebar = document.getElementById('sidebar');
  const sidebarToggle = document.getElementById('sidebarToggle');
  const aggPanel = document.getElementById('aggPanel');
  const aggPanelToggle = document.getElementById('aggPanelToggle');
  const aggPanelContainer = document.querySelector('.agg-panel-container');
  
  // Check for mobile view
  const isMobileView = window.matchMedia('(max-width: 900px)').matches;
  
  // Get saved states or use defaults based on view
  let isSidebarCollapsed = localStorage.getItem('sidebarCollapsed');
  let isAggPanelCollapsed = localStorage.getItem('aggPanelCollapsed');
  
  // If no saved state, use defaults based on view
  if (isSidebarCollapsed === null) {
    isSidebarCollapsed = isMobileView ? 'true' : 'false';
    localStorage.setItem('sidebarCollapsed', isSidebarCollapsed);
  }
  
  // Initialize aggPanel state if not set
  if (isAggPanelCollapsed === null) {
    isAggPanelCollapsed = 'false'; // Default to expanded
    localStorage.setItem('aggPanelCollapsed', isAggPanelCollapsed);
  }
  
  // Apply the collapsed states
  if (isSidebarCollapsed === 'true') {
    sidebar.classList.add('collapsed');
  } else {
    sidebar.classList.remove('collapsed');
  }
  
  if (aggPanelContainer) {
    if (isAggPanelCollapsed === 'true') {
      aggPanelContainer.classList.add('collapsed');
    } else {
      aggPanelContainer.classList.remove('collapsed');
    }
  }
  
  // Toggle sidebar on button click
  if (sidebarToggle) {
    sidebarToggle.addEventListener('click', () => {
      sidebar.classList.toggle('collapsed');
      // Save state to localStorage
      localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
    });
  }
  
  // Toggle aggPanel on button click
  if (aggPanelToggle && aggPanelContainer) {
    aggPanelToggle.addEventListener('click', () => {
      aggPanelContainer.classList.toggle('collapsed');
      // Save state to localStorage
      localStorage.setItem('aggPanelCollapsed', aggPanelContainer.classList.contains('collapsed'));
    });
  }

  $("#loadBtn").addEventListener("click", onLoadClick);
  $("#zarrUrl").addEventListener("keydown", (e) => { if (e.key === "Enter") onLoadClick(); });
  // Header controls
  const copyUriBtn = document.getElementById('copyUriBtn');
  if (copyUriBtn) {
    copyUriBtn.addEventListener('click', async () => {
      const uri = humanReadableUri();
      try { await navigator.clipboard.writeText(uri); setStatus('URI copied to clipboard.'); }
      catch { setStatus('Failed to copy URI.'); }
    });
  }
  const copyPyBtn = document.getElementById('copyPyBtn');
  if (copyPyBtn) {
    copyPyBtn.addEventListener('click', async () => {
      const code = buildPythonSnippet();
      try { await navigator.clipboard.writeText(code); setStatus('Python snippet copied to clipboard.'); }
      catch { setStatus('Failed to copy Python snippet.'); }
    });
  }
  const visualizeBtn = document.getElementById('visualizeBtn');
  if (visualizeBtn) {
    visualizeBtn.addEventListener('click', () => {
      const uri = humanReadableUri();
      const url = `https://gridlook.pages.dev/#${encodeURI(uri)}`;
      window.open(url, '_blank', 'noopener');
    });
  }
  const applyNamingBtn = document.getElementById('applyNamingBtn');
  if (applyNamingBtn) {
    applyNamingBtn.addEventListener('click', onApplyNamingSpec);
  }
  document.addEventListener("keydown", handleKeydown);
  // Auto-load from hash if present: format is <store>|<path>
  const initial = location.hash ? location.hash.slice(1) : "";
  if (initial) {
    const [storeEnc, pathEnc] = initial.split("|");
    const store = storeEnc ? decodeURI(storeEnc) : "";
    const path = pathEnc ? decodeURI(pathEnc) : "/";
    if (store) {
      const input = $("#zarrUrl");
      if (input) input.value = store;
      loadStore(store).then(() => {
        if (path) { state.activePath = normalizePath(path); renderActive(); }
      });
    }
  }
  // React to hash changes (e.g., user pastes a different store or subgroup)
  window.addEventListener("hashchange", () => {
    const raw = location.hash ? location.hash.slice(1) : "";
    if (!raw) return;
    const [storeEnc, pathEnc] = raw.split("|");
    const store = storeEnc ? decodeURI(storeEnc) : "";
    const path = pathEnc ? decodeURI(pathEnc) : "/";
    if (store && store !== state.baseUrl) {
      const input = $("#zarrUrl");
      if (input) input.value = store;
      loadStore(store).then(() => {
        if (path) { state.activePath = normalizePath(path); renderActive(); }
      });
    } else if (path && state.tree) {
      state.activePath = normalizePath(path);
      renderActive();
    }
  });
  renderActive();
}

init();

function renderSidebar() {
  const el = sidebarEl();
  if (!el) return;
  if (!state.tree) {
    el.innerHTML = `<div class="sidebar__placeholder small">Load a store to view the hierarchy</div>`;
    return;
  }
  const html = `<ul class="tree">${renderTreeNode(state.tree, "/")}</ul>`;
  el.innerHTML = html;
  // Bind clicks
  el.querySelectorAll("a[data-path]").forEach((a) => {
    a.addEventListener("click", (e) => {
      e.preventDefault();
      const p = a.getAttribute("data-path");
      if (!p) return;
      setActive(p);
    });
  });
  // Mark active
  const active = el.querySelector(`a[data-path="${CSS.escape(state.activePath)}"]`);
  if (active) active.classList.add("active");
}

function renderTreeNode(tree, path) {
  const node = tree.pathMap.get(normalizePath(path));
  if (!node) return "";
  const isGroup = node.type === "group";
  if (!isGroup) return ""; // exclude arrays from sidebar
  const label = path === "/" ? "/" : basename(path);
  const hasGroupKids = (node.children || []).some((name) => {
    const child = tree.pathMap.get(join(node.path, name));
    return child && child.type === 'group';
  });
  let li = `<li>`;
  if (hasGroupKids) {
    const open = isSubtreeOpen(node.path, state.activePath);
    li += `<details ${open ? 'open' : ''}>`;
    li += `<summary><a href="#" data-path="${escapeHtml(node.path)}">${escapeHtml(label)}</a></summary>`;
    const kids = node.children.map((name) => {
      const childPath = join(node.path, name);
      const child = tree.pathMap.get(childPath);
      return child && child.type === "group" ? renderTreeNode(tree, childPath) : "";
    }).join("");
    if (kids) li += `<ul>${kids}</ul>`;
    li += `</details>`;
  } else {
    li += `<a href="#" data-path="${escapeHtml(node.path)}">${escapeHtml(label)}</a>`;
  }
  li += `</li>`;
  return li;
}

function isSubtreeOpen(rootPath, activePath) {
  const a = normalizePath(rootPath);
  const b = normalizePath(activePath || '/');
  if (a === '/') return true;
  return b === a || b.startsWith(a + '/');
}

function renderGroupLikeXarray(tree, grpNode) {
  const arrays = collectArrays(tree, grpNode, 0, 0); // only variables directly in this group

  const dimsByVar = new Map();
  const sizesByVar = new Map();
  const attrsByVar = new Map();
  const allDims = new Set();
  const coordCandidates = new Map(); // name -> size for 1D arrays named after themselves

  for (const arr of arrays) {
    const dims = inferArrayDims(arr);
    dimsByVar.set(arr, dims);
    sizesByVar.set(arr, Array.isArray(arr.zarray?.shape) ? arr.zarray.shape : []);
    attrsByVar.set(arr, arr.attrs || {});
    dims.forEach((d) => allDims.add(d));
    // collect 1D arrays as potential coordinates
    const name = basename(arr.path);
    const shp = Array.isArray(arr.zarray?.shape) ? arr.zarray.shape : [];
    if (shp.length === 1 && Number.isFinite(shp[0])) {
      coordCandidates.set(name, shp[0]);
    }
  }

  // Build dim -> size mapping (prefer coords of same name, else first occurrence)
  const dimSizes = new Map();
  // First pass: from variables
  for (const arr of arrays) {
    const dims = dimsByVar.get(arr) || [];
    const shape = sizesByVar.get(arr) || [];
    dims.forEach((d, i) => {
      if (!dimSizes.has(d) && Number.isFinite(shape[i])) dimSizes.set(d, shape[i]);
    });
  }
  // Second pass: prefer coord arrays named after the dim
  for (const arr of arrays) {
    const name = basename(arr.path);
    const dims = dimsByVar.get(arr) || [];
    const shape = sizesByVar.get(arr) || [];
    if (dims.length === 1 && dims[0] === name && Number.isFinite(shape[0])) dimSizes.set(name, shape[0]);
  }
  // If no explicit dim names, derive from 1D coord candidates
  if (dimSizes.size === 0 && coordCandidates.size > 0) {
    for (const [n, sz] of coordCandidates.entries()) dimSizes.set(n, sz);
  }

  // If variable has no _ARRAY_DIMENSIONS, infer names by matching axis sizes to known coord sizes
  for (const arr of arrays) {
    const dims = dimsByVar.get(arr) || [];
    if (!dims.length || dims.every((d) => d.startsWith("dim_"))) {
      const shape = sizesByVar.get(arr) || [];
      const inferred = [];
      const used = new Set();
      for (const ax of shape) {
        let match = null;
        for (const [dn, sz] of dimSizes.entries()) {
          if (sz === ax && !used.has(dn)) { match = dn; break; }
        }
        inferred.push(match || `dim_${inferred.length}`);
        if (match) used.add(match);
      }
      dimsByVar.set(arr, inferred);
      inferred.forEach((d) => allDims.add(d));
    }
  }

  const coords = [];
  const dataVars = [];
  for (const arr of arrays) {
    const name = basename(arr.path);
    const dims = dimsByVar.get(arr) || [];
    const shape = sizesByVar.get(arr) || [];
    const isCoord = (shape.length === 1 && coordCandidates.has(name)) || (dims.length === 1 && (dims[0] === name || coordCandidates.has(name)));
    (isCoord ? coords : dataVars).push({ arr, name, dims, shape, attrs: attrsByVar.get(arr) || {} });
  }

  if (allDims.size === 0 && coordCandidates.size > 0) {
    for (const dn of coordCandidates.keys()) allDims.add(dn);
  }
  const dimList = Array.from(allDims);

  const sections = [];
  // Calculate total size in bytes
  let totalBytes = 0;
  arrays.forEach(arr => {
    if (arr.zarray?.shape && arr.zarray?.dtype) {
      const shape = Array.isArray(arr.zarray.shape) ? arr.zarray.shape : [arr.zarray.shape];
      const size = shape.reduce((a, b) => a * b, 1);
      
      // Get bytes per element from dtype
      const dtype = String(arr.zarray.dtype);
      let bytesPerElement = 4; // default to float32/float64 size
      if (dtype.includes('int8') || dtype.includes('uint8') || dtype.includes('bool')) {
        bytesPerElement = 1;
      } else if (dtype.includes('int16') || dtype.includes('uint16')) {
        bytesPerElement = 2;
      } else if (dtype.includes('int32') || dtype.includes('uint32') || dtype.includes('float32')) {
        bytesPerElement = 4;
      } else if (dtype.includes('int64') || dtype.includes('uint64') || dtype.includes('float64')) {
        bytesPerElement = 8;
      }
      
      totalBytes += size * bytesPerElement;
    }
  });

  // Format size with appropriate unit
  const formatSize = (bytes) => {
    if (bytes < 1024) return `${bytes} B`;
    const kb = bytes / 1024;
    if (kb < 1024) return `${kb.toFixed(1)} KB`;
    const mb = kb / 1024;
    if (mb < 1024) return `${mb.toFixed(1)} MB`;
    const gb = mb / 1024;
    return `${gb.toFixed(0)} GB`;
  };

  // Count coordinates
  const nCoords = arrays.filter((a) => {
    const name = basename(a.path);
    const shp = Array.isArray(a.zarray?.shape) ? a.zarray.shape : [];
    const dims = dimsByVar.get(a) || [];
    return (shp.length === 1 && coordCandidates.has(name)) || 
           (dims.length === 1 && (dims[0] === name || coordCandidates.has(name)));
  }).length;

  const nData = arrays.length - nCoords;
  const nDims = dimList.length;
  
  // Create summary line
  if (nDims > 0) {
    const summaryHtml = `
    <div class="xr-summary">
      Size: ${formatSize(totalBytes)} · Dimensions: ${nDims} · Coordinates: ${nCoords} · Data variables: ${nData}
    </div>
  `;
    sections.push(summaryHtml);
  }
  // Dimensions
  const dimRows = dimList.length ? dimList.map((d) => `<div class="label">${escapeHtml(d)}</div><div class="value">${escapeHtml(dimSizes.get(d) ?? "?")}</div>`).join("") : `<div class="small">(none)</div>`;
  sections.push(`<div class="section"><h3>${icon('dim')}Dimensions</h3><div class="meta">${dimRows}</div></div>`);

  // Function to render time array button
  const renderTimeArrayButton = (name, path) => {
    if (name.toLowerCase().includes('time') && state.baseUrl) {
      return `
        <button class="btn-time-array" 
                onclick="handleTimeArrayClick(this, '${escapeHtml(state.baseUrl)}', '${escapeHtml(path)}')"
                title="Load first and last time values">
          Load time values
        </button>`;
    }
    return '';
  };

  // Coordinates (collapsible)
  const coordItems = coords.map(({ name, dims, shape, arr }, i) => {
    const dt = prettyDtype(arr?.zarray?.dtype);
    const dtBadge = dt ? `<span class="type-badge">${escapeHtml(dt)}</span>` : '';
    const varId = `var-${i}-${Math.random().toString(36).substr(2, 9)}`;
    const timeButton = renderTimeArrayButton(name, arr.path || name);
    
    return `
      <div class="var-container">
        <div class="varline ${i % 2 === 0 ? 'even' : 'odd'}">
          <div class="var-info">
            <span class="var-header-text">
              <span class="var-name">${escapeHtml(name)}</span>
              <span class="var-dims">${formatDimsNames(dims)}</span>
              ${dtBadge}
              <span class="btn-icon">
                <button class="btn-icon-single" 
                  aria-label="Toggle attributes"
                  data-target="attrs-${varId}"
                  onclick="toggleDetails('attrs-${varId}')">
                  <svg class="icon attr" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M3 7a2 2 0 0 1 2-2h6l10 10-6 6L5 11V7zm4 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                  </svg>
                </button>
                <button class="btn-icon-single" 
                        aria-label="Toggle chunk details"
                        data-target="chunks-${varId}"
                        onclick="toggleDetails('chunks-${varId}')">
                  <svg class="icon data" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M4 6c0-2.21 3.58-4 8-4s8 1.79 8 4-3.58 4-8 4-8-1.79-8-4zm0 6c0 2.21 3.58 4 8 4s8-1.79 8-4m-16 6c0 2.21 3.58 4 8 4s8-1.79 8-4" fill="none" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>              
              </span>
            </span>
            <span class="var-actions">
              ${renderVarAttrsDetails(varId, arr)}
              ${renderVarChunkDetails(varId, arr)}
            </span>
          </div>
          ${timeButton ? `<div class="time-array-container">${timeButton}</div>` : ''}
        </div>
      </div>`;
  }).join("") || `<div class="small">(none)</div>`;
  const hasCoords = nCoords > 0;
  sections.push(`
  <div class="section">
    <details ${hasCoords ? 'open' : ''}>
      <summary>${icon('coord')}Coordinates</summary>
      <div class="codeblock">${coordItems}</div>
    </details>
  </div>
`);
    
    
  // Data variables (collapsible)
  const dataItems = dataVars.map(({ name, dims, shape, arr }, i) => {
    const dt = prettyDtype(arr?.zarray?.dtype);
    const dtBadge = dt ? `<span class="type-badge">${escapeHtml(dt)}</span>` : '';
    const varId = `var-${i + 1000}-${Math.random().toString(36).substr(2, 9)}`;
    return `
      <div class="var-container">
        <div class="varline ${i % 2 === 0 ? 'even' : 'odd'}">
          <div class="var-info">
            <span class="var-header-text">
              <span class="varname">${escapeHtml(name)}</span>
              ${formatDimsNames(dims)}
              ${dtBadge}
              <span class="btn-icon">
                <button class="btn-icon-single" 
                  aria-label="Toggle attributes"
                  data-target="attrs-${varId}"
                  onclick="toggleDetails('attrs-${varId}')">
                  <svg class="icon attr" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M3 7a2 2 0 0 1 2-2h6l10 10-6 6L5 11V7zm4 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                  </svg>
                </button>
                <button class="btn-icon-single" 
                        aria-label="Toggle chunk details"
                        data-target="chunks-${varId}"
                        onclick="toggleDetails('chunks-${varId}')">
                  <svg class="icon data" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M4 6c0-2.21 3.58-4 8-4s8 1.79 8 4-3.58 4-8 4-8-1.79-8-4zm0 6c0 2.21 3.58 4 8 4s8-1.79 8-4m-16 6c0 2.21 3.58 4 8 4s8-1.79 8-4" fill="none" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>   
              </span>
            </span>
            <div class="var-actions">
              ${renderVarAttrsDetails(varId, arr)}
              ${renderVarChunkDetails(varId, arr)}
            </div>
          </div>
        </div>
      </div>`;
  }).join("") || `<div class="small">(none)</div>`;
  const hasDataItems = nData > 0;
  sections.push(`
  <div class="section">
    <details ${hasDataItems ? "open":""}>
      <summary>${icon('data')}Data variables</summary>
      <div class="codeblock">${dataItems}</div>
    </details>
  </div>
`);
  // Child groups (always show immediate child groups)
  const groupChildren = grpNode.children
    .map((name) => tree.pathMap.get(join(grpNode.path, name)))
    .filter((n) => n && n.type === "group");
  if (groupChildren.length > 0) {
    const groupItems = groupChildren.map((g, i) => `
      <div class="varline ${i % 2 === 0 ? 'even' : 'odd'}">
        <a href="#" data-path="${escapeHtml(g.path)}" class="navlink">${icon('group')}${escapeHtml(basename(g.path) || "/")}</a>
      </div>`).join("");
    sections.push(`<div class="section"><h3>${icon('group')}Groups</h3><div class="codeblock">${groupItems}</div></div>`);
  }

  // Attributes (collapsible; show even if none) rendered as key=value lines
  const attrsBlock = grpNode.attrs && Object.keys(grpNode.attrs).length
    ? renderKeyValueMeta(grpNode.attrs)
    : `<div class="codeblock"><div class="small">(none)</div></div>`;
  sections.push(`
    <div class="section">
      <details>
        <summary>${icon('attr')}Attributes</summary>
        ${attrsBlock}
      </details>
    </div>
  `);

  const html = sections.join("");
  queueMicrotask(() => bindNavLinks());
  return html;
}

function collectArrays(tree, grpNode, depth = 0, maxDepth = 1) {
  const found = [];
  // arrays directly under this group
  for (const name of grpNode.children) {
    const n = tree.pathMap.get(join(grpNode.path, name));
    if (n && n.type === "array") found.push(n);
  }
  if (depth < maxDepth) {
    for (const name of grpNode.children) {
      const n = tree.pathMap.get(join(grpNode.path, name));
      if (n && n.type === "group") found.push(...collectArrays(tree, n, depth + 1, maxDepth));
    }
  }
  return found;
}

function inferArrayDims(arr) {
  const attrs = arr.attrs || {};
  const dimsAttr = attrs["_ARRAY_DIMENSIONS"]; // common with xarray zarr
  if (Array.isArray(dimsAttr) && dimsAttr.every((d) => typeof d === "string")) return dimsAttr;
  const rank = Array.isArray(arr.zarray?.shape) ? arr.zarray.shape.length : 0;
  const fallback = Array.from({ length: rank }, (_, i) => `dim_${i}`);
  return fallback;
}

function formatDimsWithSizes(dims, shape) {
  const pairs = dims.map((d, i) => `${d}: ${shape[i] ?? "?"}`);
  return `(${pairs.join(", ")})`;
}

function formatDimsNames(dims) {
  return `(${(dims || []).join(", ")})`;
}

function bindNavLinks() {
  document.querySelectorAll("a.navlink[data-path]").forEach((a) => {
    a.addEventListener("click", (e) => {
      e.preventDefault();
      const p = a.getAttribute("data-path");
      if (p) setActive(p);
    });
  });
}

function formatVarAttrsInline(attrs = {}) {
  const keys = ["standard_name", "long_name", "units"];
  const parts = keys.map((k) => attrs && attrs[k] ? `${k}=${escapeHtml(String(attrs[k]))}` : null).filter(Boolean);
  return parts.length ? `| ${parts.join(" ")}` : "";
}

function renderVarAttrsDetails(varId, arr) {
  if (!arr?.attrs) return '';
  const count = Object.keys(arr.attrs).length;
  if (count === 0) return '';
  
  const attrsHtml = Object.entries(arr.attrs)
    .map(([k, v]) => {
      const val = typeof v === 'string' ? `"${escapeHtml(v)}"` : JSON.stringify(v);
      return `<div>${escapeHtml(k)}: <span class="value">${val}</span></div>`;
    })
    .join('');
    
  return `
    <div id="attrs-${varId}" class="var-details" hidden>
      <div class="var-details-content">
        ${attrsHtml}
      </div>
    </div>`;
}

function renderVarChunkDetails(varId, arr) {
  if (!arr?.zarray?.chunks) return '';
  const chunks = Array.isArray(arr.zarray.chunks) ? arr.zarray.chunks : [arr.zarray.chunks];
  if (!chunks || chunks.length === 0) return '';
  
  const chunkStr = chunks.join('×');
  return `
    <div id="chunks-${varId}" class="var-details" hidden>
      <div class="var-details-content">
        <div>Chunks: <span class="value">${chunkStr}</span></div>
        <div>Shape: <span class="value">${arr.zarray.shape?.join('×') || '?'}</span></div>
        <div>Compressor: <span class="value">${arr.zarray.compressor?.id || 'none'}</span></div>
      </div>
    </div>`;
}

function renderKeyValueMeta(obj = {}) {
  const rows = Object.entries(obj).map(([k, v]) => {
    let val;
    if (v == null) val = "null";
    else if (typeof v === "object") val = JSON.stringify(v);
    else val = String(v);
    return `<div class="label">${escapeHtml(k)}</div><div class="value">${escapeHtml(val)}</div>`;
  }).join("");
  return `<div class="codeblock"><div class="meta small">${rows}</div></div>`;
}

function renderChunkViz(arr) {
  const za = arr.zarray || {};
  const shape = Array.isArray(za.shape) ? za.shape : [];
  const chunks = Array.isArray(za.chunks) ? za.chunks : null;
  if (!shape.length || !chunks || chunks.length !== shape.length) return "";
  const counts = chunkCounts(shape, chunks);
  // Visualize like Dask: show grid with counts and labels
  const labelDims = (arr.attrs && Array.isArray(arr.attrs._ARRAY_DIMENSIONS)) ? arr.attrs._ARRAY_DIMENSIONS : shape.map((_, i) => `dim_${i}`);
  const countsRounded = counts.map((c) => Math.ceil(c));
  if (counts.length === 1) {
    const n = countsRounded[0];
    const cap = Math.min(n, 200);
    const cells = Array.from({ length: cap }, () => `<div class="chunk-cell" title="1D chunk"></div>`).join("");
    const more = n > cap ? `<span class="small"> +${n-cap} more</span>` : "";
    const sizeLbl = `${labelDims[0]}: ${shape[0]} (chunks of ${chunks[0]}) → ${n}`;
    return `<div class="chunkviz chunkviz-1d"><div class="axis-label">${escapeHtml(sizeLbl)}</div><div class="chunk-row">${cells}</div>${more}</div>`;
  }
  if (counts.length === 2) {
    const [ny, nx] = countsRounded;
    const [dy, dx] = [labelDims[0], labelDims[1]];
    const maxX = Math.min(nx, 50);
    const maxY = Math.min(ny, 30);
    const topLabel = `${dx}: ${shape[1]} (chunks of ${chunks[1]}) → ${nx}`;
    const leftLabel = `${dy}: ${shape[0]} (chunks of ${chunks[0]}) → ${ny}`;
    let rows = "";
    for (let y = 0; y < maxY; y++) {
      const rowCells = Array.from({ length: maxX }, () => `<div class="chunk-cell" title="2D chunk"></div>`).join("");
      rows += `<div class="chunk-row">${rowCells}${nx>maxX?`<span class=\\"small\\"> +${nx-maxX} →</span>`:""}</div>`;
    }
    const moreY = ny > maxY ? `<div class="small">+${ny-maxY} rows more ↓</div>` : "";
    return `<div class="chunkviz chunkviz-2d"><div class="axis-label">${escapeHtml(topLabel)}</div>${rows}<div class="axis-label">${escapeHtml(leftLabel)}</div>${moreY}</div>`;
  }
  // Higher dims: show summary only
  const summary = countsRounded.join("x");
  return `<span class="small">chunks: ${escapeHtml(summary)}</span>`;
}

function chunkCounts(shape, chunks) {
  return shape.map((s, i) => (chunks[i] ? Math.ceil(s / chunks[i]) : 1));
}

function renderChunkMatrix(arr) {
  const za = arr.zarray || {};
  const shape = Array.isArray(za.shape) ? za.shape : [];
  const chunks = Array.isArray(za.chunks) ? za.chunks : null;
  if (!shape.length) return "";
  const item = dtypeItemsize(za.dtype);
  const totalElems = product(shape);
  const totalBytes = item * totalElems;
  const chunkElems = Array.isArray(chunks) && chunks.length === shape.length ? product(chunks) : null;
  const chunkBytes = chunkElems != null ? item * chunkElems : null;
  const bytesFmt = (n) => n == null ? "?" : humanBytes(n);
  const shapeFmt = (a) => a ? `[${a.join(", ")}]` : "?";
  const arrayShape = shapeFmt(shape);
  const chunkShape = shapeFmt(chunks && chunks.length === shape.length ? chunks : null);
  return `
    <div class="matrix2x2">
      <div></div><div class="head">array</div><div class="head">chunk</div>
      <div class="rowhead">bytes</div><div>${bytesFmt(totalBytes)}</div><div>${bytesFmt(chunkBytes)}</div>
      <div class="rowhead">shape</div><div>${escapeHtml(arrayShape)}</div><div>${escapeHtml(chunkShape)}</div>
    </div>
  `;
}

function product(a) { return Array.isArray(a) ? a.reduce((p, v) => p * (Number.isFinite(v)?v:1), 1) : 0; }

function dtypeItemsize(dtype) {
  if (!dtype) return 0;
  // Common patterns like "<f4", "<f8", "|u1", "i4", "u2", "f4", "bool"
  if (dtype === 'bool' || dtype === '|b1') return 1;
  const m = String(dtype).match(/(\d+)$/);
  if (m) {
    const bytes = parseInt(m[1], 10);
    // If match is number of bits (like b1?), many dtypes encode bytes directly (1,2,4,8,16)
    // Heuristic: if value <= 16 assume it's bytes; if >16 treat as bits
    return bytes > 16 ? Math.ceil(bytes / 8) : bytes;
  }
  return 0;
}

function humanBytes(n) {
  if (n == null || !isFinite(n)) return "?";
  const units = ['B','KB','MB','GB','TB'];
  let x = n; let i = 0;
  while (x >= 1024 && i < units.length-1) { x /= 1024; i++; }
  return `${x.toFixed(x>=10?0: x>=1?1:2)} ${units[i]}`;
}

// Build the full active URI and decode to human-readable form (no %xx)
function humanReadableUri() {
  if (!state.baseUrl) return "";
  const base = normalizeBase(state.baseUrl);
  const path = normalizePath(state.activePath || "/");
  const full = path === "/" ? base : `${base}${path}`;
  try { return decodeURI(full); } catch { return full; }
}

// Heuristic: derive store base from a full URI that may include subgroup paths
function deriveBaseFromUrl(url) {
  if (!url) return "";
  try {
    // v2: if it includes ".zarr", cut to the .zarr folder
    const idx = url.indexOf('.zarr');
    if (idx !== -1) return normalizeBase(url.slice(0, idx + 5));
    // v3: if it points directly to zarr.json, strip the filename
    const z3 = url.replace(/[/#?].*$/, '') // strip query/hash for detection
    if (z3.endsWith('zarr.json')) {
      return normalizeBase(url.replace(/\/zarr\.json([?#].*)?$/i, ''));
    }
    return normalizeBase(url);
  } catch {
    return url;
  }
}

// Auto-apply naming spec from #namingSpec to root's direct subgroup groups (all-or-nothing)
function applyNamingSpecIfAny(targetPath) {
  try {
    const input = document.getElementById('namingSpec');
    const spec = (input?.value || '').trim();
    if (!spec || !state.tree) return;
    const keys = spec.split('_').filter(Boolean);
    if (!keys.length) return;
    const p = targetPath || state.activePath || '/';
    const grp = state.tree.pathMap.get(p) || state.tree.root;
    if (!grp || grp.type !== 'group') return;
    const children = (grp.children || [])
      .map((name) => state.tree.pathMap.get(join(grp.path, name)))
      .filter((n) => n && n.type === 'group');
    if (!children.length) return;
    const parsed = [];
    for (const child of children) {
      const name = basename(child.path);
      const parts = name.split('_');
      if (parts.length !== keys.length) {
        setStatus('Naming scheme not applied: spec tokens do not match all subgroup names.');
        return; // abort if any mismatch
      }
      const record = {};
      for (let i = 0; i < keys.length; i++) record[keys[i]] = parts[i];
      parsed.push({ node: child, attrs: record });
    }
    for (const { node, attrs } of parsed) {
      if (!node.attrs || typeof node.attrs !== 'object') node.attrs = {};
      for (const [k, v] of Object.entries(attrs)) node.attrs[k] = v;
    }
    if (parsed.length) setStatus(`Naming scheme applied to ${parsed.length} subgroup(s).`);
  } catch (e) {
    // ignore auto-apply errors
  }
}

function updateHeaderControls() {
  const codeEl = document.getElementById('pyCode');
  if (codeEl) {
    codeEl.textContent = buildPythonSnippet();
  }
  const vizBtn = document.getElementById('visualizeBtn');
  if (vizBtn) {
    const node = state.tree?.pathMap.get(state.activePath);
    if (!node || node.type !== 'group') { vizBtn.style.display = 'none'; return; }
    const directGroupChildren = (node.children || [])
      .map((name) => state.tree?.pathMap.get(join(node.path, name)))
      .filter((n) => n && n.type === 'group');
    vizBtn.style.display = directGroupChildren.length === 0 ? 'inline-block' : 'none';
  }
}

function buildPythonSnippet() {
  const uri = humanReadableUri();
  const node = state.tree?.pathMap.get(state.activePath);
  const isParent = node && node.type === 'group' && hasMultipleSubgroups(state.tree, node);
  if (isParent) {
    return `import xarray as xr\n` +
           `xr.open_datatree(\n` +
           `    ${JSON.stringify(uri)},\n` +
           `    engine=\"zarr\"\n` +
           `)`;
  }
  return `import xarray as xr\n` +
         `xr.open_zarr(${JSON.stringify(uri)})`;
}

function onApplyNamingSpec() {
  if (!state.tree) { setStatus('Load a store first.'); return; }
  const input = document.getElementById('namingSpec');
  const spec = (input?.value || '').trim();
  if (!spec) { setStatus('Enter a naming spec (e.g., frequency_cell-methods_zoomlevel_realm).'); return; }
  const keys = spec.split('_').filter(Boolean);
  if (!keys.length) { setStatus('Invalid naming spec.'); return; }
  const grp = state.tree.pathMap.get(state.activePath);
  if (!grp || grp.type !== 'group') { setStatus('Active node is not a group.'); return; }
  const children = (grp.children || [])
    .map((name) => state.tree.pathMap.get(join(grp.path, name)))
    .filter((n) => n && n.type === 'group');
  if (!children.length) { setStatus('No subgroup children to apply spec.'); return; }
  const parsed = [];
  for (const child of children) {
    const name = basename(child.path);
    const parts = name.split('_');
    if (parts.length !== keys.length) { setStatus('Parsing failed: not all subgroup names match the spec.'); return; }
    const record = {};
    for (let i = 0; i < keys.length; i++) record[keys[i]] = parts[i];
    parsed.push({ node: child, attrs: record });
  }
  for (const { node, attrs } of parsed) {
    if (!node.attrs || typeof node.attrs !== 'object') node.attrs = {};
    for (const [k, v] of Object.entries(attrs)) node.attrs[k] = v;
  }
  setStatus(`Applied naming spec to ${parsed.length} subgroup(s).`);
  renderActive();
}