// Usage: what is using a disk, WizTree-style. (The tab was called Space until 2026-09-24;
// the Go package and the /api/space endpoints behind it still carry the old name.) Pick a disk, scan it (a parallel walk of every
// filesystem the disk backs, as root when the host allows), then read the result two ways:
// a tree of folders largest-first, and a treemap of whatever folder is selected, where every
// file is a tile sized by what it takes on disk and coloured by what kind of thing it is.
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { api, SpaceFile, SpaceTarget, SpaceTree } from './api'
import { fmtBytes } from './fmt'
import { useHashSel } from './hashsel'
import { useRefreshMs } from './prefs'
import { Btn, Loading, Spinner, askYes, toast, useEscape } from './ui'

// ---- what kind of file a tile is: the colour it wears (the validated categorical set, dark and light) ----

interface Kind { id: string; label: string; dark: string; light: string; ext: string[] }
const KINDS: Kind[] = [
  { id: 'video', label: 'Video', dark: '#9085e9', light: '#4a3aa7', ext: ['mp4', 'mkv', 'avi', 'mov', 'webm', 'm4v', 'ts', 'wmv', 'flv', 'mpg', 'mpeg', 'vob', 'm2ts'] },
  { id: 'image', label: 'Images', dark: '#d55181', light: '#e87ba4', ext: ['jpg', 'jpeg', 'png', 'gif', 'heic', 'heif', 'webp', 'raw', 'dng', 'cr2', 'nef', 'arw', 'tif', 'tiff', 'bmp', 'svg', 'psd'] },
  { id: 'audio', label: 'Audio', dark: '#199e70', light: '#1baf7a', ext: ['mp3', 'flac', 'm4a', 'aac', 'ogg', 'opus', 'wav', 'wma', 'aiff'] },
  { id: 'archive', label: 'Archives & images', dark: '#d95926', light: '#eb6834', ext: ['zip', 'tar', 'gz', 'tgz', 'xz', 'zst', 'bz2', '7z', 'rar', 'iso', 'img', 'qcow2', 'vmdk', 'vdi', 'vhd', 'vhdx', 'deb', 'rpm', 'apk', 'jar', 'whl'] },
  { id: 'doc', label: 'Documents', dark: '#c98500', light: '#eda100', ext: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'odt', 'ods', 'txt', 'md', 'epub', 'mobi', 'rtf', 'csv'] },
  { id: 'code', label: 'Code & config', dark: '#3987e5', light: '#2a78d6', ext: ['js', 'mjs', 'ts', 'tsx', 'jsx', 'go', 'py', 'rs', 'c', 'h', 'cpp', 'java', 'sh', 'css', 'html', 'json', 'yaml', 'yml', 'toml', 'xml', 'sql', 'wasm', 'so', 'a', 'o', 'node'] },
  { id: 'data', label: 'Databases & logs', dark: '#e66767', light: '#e34948', ext: ['db', 'sqlite', 'sqlite3', 'log', 'ldb', 'sst', 'wal', 'journal', 'bin', 'dat', 'idx', 'pack', 'ibd', 'frm', 'mdb', 'rdb', 'aof'] },
  { id: 'other', label: 'Other', dark: '#008300', light: '#008300', ext: [] },
]
const BY_EXT = new Map<string, Kind>()
for (const k of KINDS) for (const e of k.ext) BY_EXT.set(e, k)
function kindOf(name: string): Kind {
  const dot = name.lastIndexOf('.')
  const ext = dot > 0 ? name.slice(dot + 1).toLowerCase() : ''
  return (ext && BY_EXT.get(ext)) || KINDS[KINDS.length - 1]
}
function lightTheme(): boolean {
  const bg = getComputedStyle(document.documentElement).getPropertyValue('--bg').trim()
  return /^#[0-9a-f]{6}$/i.test(bg) && parseInt(bg.slice(1, 3), 16) > 128
}
function cssVar(name: string): string { return getComputedStyle(document.documentElement).getPropertyValue(name).trim() }

const fmtN = (n: number) => n.toLocaleString()
const fmtWhen = (t: number) => (t ? new Date(t * 1000).toLocaleDateString() : '')
const ago = (iso?: string) => {
  if (!iso) return ''
  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000)
  return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : `${Math.floor(s / 86400)} d ago`
}
const fmtDur = (a: string, b?: string) => { const ms = (b ? new Date(b).getTime() : Date.now()) - new Date(a).getTime(); return ms < 1000 ? `${ms} ms` : ms < 60000 ? `${(ms / 1000).toFixed(1)} s` : `${Math.floor(ms / 60000)} min ${Math.round((ms % 60000) / 1000)} s` }
const parentOf = (p: string) => (p === '/' ? '/' : p.slice(0, p.lastIndexOf('/')) || '/')

export default function Usage() {
  const [targets, setTargets] = useState<SpaceTarget[] | null>(null)
  const [err, setErr] = useState('')
  const [sel, setSel] = useHashSel('usage')
  const [tab, setTab] = useState<'tree' | 'files'>('tree')
  const rate = useRefreshMs()

  const load = useCallback(async () => {
    try { const r = await api.space(); setTargets(r.targets); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
  }, [])
  useEffect(() => { load() }, [load])
  const target = targets?.find((t) => t.id === sel) ?? targets?.find((t) => t.roots.length > 0) ?? targets?.[0]
  useEffect(() => { if (target && target.id !== sel) setSel(target.id) }, [target, sel, setSel])
  const scan = target?.scan
  // while a scan runs its status alone is polled at the refresh rate (the target list means
  // lsblk and zpool, which need not run twice a second); the list is read again when it ends
  useEffect(() => {
    if (!scan?.running || !target) return
    const id = target.id
    const t = setInterval(async () => {
      try {
        const st = await api.spaceStatus(id)
        setTargets((ts) => ts?.map((x) => (x.id === id ? { ...x, scan: st } : x)) ?? ts)
      } catch { /* the next tick */ }
    }, Math.max(250, rate))
    return () => clearInterval(t)
  }, [scan?.running, target, rate])

  const start = async () => { if (!target) return; try { await api.spaceScan(target.id); await load() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } }
  const cancel = async () => { if (!target) return; try { await api.spaceCancel(target.id); await load() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } }
  const forget = async () => { if (!target || !await askYes(`Forget the saved scan of ${target.name}? The next scan reads everything again.`)) return; try { await api.spaceForget(target.id); await load() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } }
  // the target list is not polled during a scan; when one ends it is read again, so the
  // picker's "scanned … ago" and the new tree come in together
  const wasRunning = useRef(false)
  useEffect(() => { if (wasRunning.current && !scan?.running) load(); wasRunning.current = !!scan?.running }, [scan?.running, load])

  if (err && !targets) return <div className="dash"><div className="error">{err}</div></div>
  if (!targets) return <div className="dash"><Loading label="Looking at the disks…" /></div>
  // a result to show: the last finished one, kept while a refresh of it runs
  const have = !!scan && !scan.loading && scan.files > 0 && (!scan.error || scan.error === 'cancelled')
  const done = have && !scan.running
  return (
    <div className="space">
      <div className="space-bar">
        <div className="space-pick-row">
          <TargetPicker targets={targets} current={target ?? null} onPick={(t) => setSel(t.id)} />
          {target && (
            <div className="space-status">
              {scan?.running ? (
                <>
                  <Spinner /><span className="mono small">{fmtN(scan.progress.files)} files · {fmtBytes(scan.progress.bytes)} · {fmtDur(scan.started)}{scan.progress.reused ? ` · ${fmtN(scan.progress.reused)} folders kept, ${fmtN(scan.progress.dirs)} read` : ''}</span>
                  <Btn className="btn danger" onClick={cancel}>Cancel</Btn>
                </>
              ) : scan?.loading ? (
                <><Spinner /><span className="muted small">reading the last scan back…</span></>
              ) : (
                <>
                  {done && <span className="small" title={scan.by_root ? Object.entries(scan.by_root).map(([r, how]) => `${r}: ${how}`).join('\n') : undefined}>
                    <b>{fmtBytes(scan.size)}</b> in {fmtN(scan.files)} files, {fmtN(scan.dirs)} folders · {scan.partial ? <span className="warn">partly scanned, {fmtN(scan.partial_dirs)} folders not yet read</span> : `scanned ${ago(scan.finished)}`} in {fmtDur(scan.started, scan.finished)}
                    {scan.method && scan.method !== 'full' ? ` · ${scan.method === 'resume' ? 'resumed' : 'refreshed'}: ${fmtN(scan.read)} folders read, ${fmtN(scan.reused)} kept` : ''}
                    {scan.as_root ? '' : ' · not as root, so some folders were skipped'}{scan.denied ? ` · ${fmtN(scan.denied)} unreadable` : ''}
                  </span>}
                  {scan?.error && scan.error !== 'cancelled' && <span className="error small">{scan.error}</span>}
                  <Btn className="btn on" disabled={target.roots.length === 0} onClick={start} title={done ? (scan.partial ? 'reads the folders the cancelled scan did not get to' : 'reads only what changed since the last scan (zfs diff on a pool with snapshots; folder times elsewhere)') : undefined}>{done ? (scan.partial ? 'Resume' : 'Rescan') : 'Scan'}</Btn>
                  {done && <Btn className="btn" onClick={forget} title="drop the saved result; the next scan reads everything">Forget</Btn>}
                </>
              )}
            </div>
          )}
        </div>
        {target && <div className="muted small space-about">{describe(target)}{scan?.running && scan.progress.current && <span className="mono cur" title={scan.progress.current}> · {scan.progress.current}</span>}</div>}
      </div>
      {target && have && (
        <>
          <div className="chips space-tabs">
            <button className={'chip' + (tab === 'tree' ? ' on' : '')} onClick={() => setTab('tree')}>Folders</button>
            <button className={'chip' + (tab === 'files' ? ' on' : '')} onClick={() => setTab('files')}>Largest files</button>
          </div>
          {tab === 'tree' ? <Explorer key={target.id + (scan?.finished ?? '')} disk={target.id} /> : <LargestFiles key={target.id + (scan?.finished ?? '')} disk={target.id} />}
        </>
      )}
      {target && !have && !scan?.running && !scan?.loading && <div className="svc-empty muted">{target.roots.length === 0 ? 'Nothing is mounted from it, so there is nothing to scan.' : scan?.error && scan.error !== 'cancelled' ? 'The last scan failed. Scan again.' : `Scan the ${target.kind} to see what is on it.`}</div>}
      {target && !have && scan?.running && <div className="svc-empty muted">Scanning…</div>}
      {target && scan?.loading && <div className="svc-empty muted">Reading the last scan back…</div>}
    </div>
  )
}

// What a target is, in a line: "ZFS pool · raidz2 · 8 disks: sda sdb … · 29 TiB, 13 TiB used · scans /tank and 9 more"
function describe(t: SpaceTarget): string {
  const parts: string[] = []
  if (t.kind === 'pool') {
    parts.push(`ZFS pool${t.layout ? ' · ' + t.layout : ''}${t.health && t.health !== 'ONLINE' ? ' · ' + t.health : ''}`)
    if (t.disks?.length) parts.push(`${t.disks.length} disk${t.disks.length === 1 ? '' : 's'}: ${t.disks.join(' ')}`)
    parts.push(`${fmtBytes(t.size)}${t.used ? `, ${fmtBytes(t.used)} used` : ''}`)
  } else {
    parts.push(`disk${t.model ? ' · ' + t.model : ''} · ${fmtBytes(t.size)}`)
  }
  if (t.roots.length === 0) parts.push('nothing mounted')
  else if (t.roots.length <= 3) parts.push('scans ' + t.roots.join(', '))
  else parts.push(`scans ${t.roots.slice(0, 2).join(', ')} and ${t.roots.length - 2} more`)
  return parts.join(' · ')
}

// The dropdown of what can be scanned: pools first, each with its layout and members, then
// disks on their own. A disk with nothing mounted is listed but can't be picked.
function TargetPicker({ targets, current, onPick }: { targets: SpaceTarget[]; current: SpaceTarget | null; onPick: (t: SpaceTarget) => void }) {
  const [open, setOpen] = useState(false)
  const box = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const h = (e: MouseEvent) => { if (box.current && !box.current.contains(e.target as Node)) setOpen(false) }
    window.addEventListener('click', h)
    return () => window.removeEventListener('click', h)
  }, [])
  useEscape(() => setOpen(false), open)
  const state = (t: SpaceTarget) => t.scan?.running ? 'scanning' : t.scan?.finished && !t.scan.error ? `scanned ${ago(t.scan.finished)}` : t.roots.length === 0 ? 'nothing mounted' : 'not scanned'
  const icon = (t: SpaceTarget) => (t.kind === 'pool' ? '⛁' : '▤')
  return (
    <div className="tpick" ref={box}>
      <button className="tpick-btn" onClick={() => setOpen(!open)} title="pick a disk or pool">
        {current ? <><span className="ticon">{icon(current)}</span><b>{current.name}</b><span className="muted small">{current.kind === 'pool' ? `ZFS pool${current.layout ? ' · ' + current.layout : ''}` : current.model || 'disk'} · {fmtBytes(current.size)}</span>{current.scan?.running && <Spinner size={10} />}</> : <span className="muted">no disks</span>}
        <span className="chev">▾</span>
      </button>
      {open && (
        <div className="tmenu">
          {targets.map((t) => (
            <button key={t.id} className={'titem' + (current?.id === t.id ? ' on' : '') + (t.roots.length === 0 ? ' off' : '')} disabled={t.roots.length === 0} onClick={() => { setOpen(false); onPick(t) }}>
              <span className="ticon">{icon(t)}</span>
              <span className="tmain">
                <span className="tname"><b>{t.name}</b><span className="muted small"> · {t.kind === 'pool' ? `ZFS pool${t.layout ? ' · ' + t.layout : ''}${t.health && t.health !== 'ONLINE' ? ' · ' + t.health : ''}` : t.model || 'disk'} · {fmtBytes(t.size)}</span></span>
                <span className="muted small tsub">{t.kind === 'pool' && t.disks?.length ? `${t.disks.length} disks: ${t.disks.join(' ')}` : t.roots.length ? t.roots.slice(0, 3).join(' ') + (t.roots.length > 3 ? ` +${t.roots.length - 3}` : '') : 'nothing mounted'}</span>
              </span>
              <span className="muted small tstate">{state(t)}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

// ---- the folder tree and the treemap of the selected folder ----

interface Row { t: SpaceTree; depth: number; kind: 'node' | 'small' | 'more'; parent: number }

function Explorer({ disk }: { disk: string }) {
  const [cache, setCache] = useState<Record<string, SpaceTree>>({}) // one level per folder, for the rows
  const [maps, setMaps] = useState<Record<string, SpaceTree>>({}) // deep, pruned to what a tile could show, for the map
  const [open, setOpen] = useState<Set<string>>(() => new Set(['/']))
  const [focus, setFocus] = useState('/')
  const pending = useRef(new Set<string>())

  const fetch = useCallback(async (path: string) => {
    if (pending.current.has(path)) return
    pending.current.add(path)
    try { const t = await api.spaceTree(disk, path, 1, 200); setCache((c) => ({ ...c, [path]: t })) }
    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
    finally { pending.current.delete(path) }
  }, [disk])
  // The map of a folder reaches as deep as there is room to draw: everything under a
  // four-thousandth of the folder would be a tile smaller than a few pixels, so it is left out.
  const fetchMap = useCallback(async (path: string, size: number) => {
    const key = 'map:' + path
    if (pending.current.has(key)) return
    pending.current.add(key)
    try { const t = await api.spaceTree(disk, path, 24, 300, Math.max(1, Math.floor(size / 6000))); setMaps((m) => ({ ...m, [path]: t })) }
    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
    finally { pending.current.delete(key) }
  }, [disk])
  useEffect(() => { if (!cache['/']) fetch('/') }, [cache, fetch])
  useEffect(() => { if (!cache[focus]) fetch(focus) }, [focus, cache, fetch])
  useEffect(() => { const c = cache[focus]; if (c && !maps[focus]) fetchMap(focus, c.size) }, [focus, cache, maps, fetchMap])

  const toggle = (path: string) => {
    setOpen((o) => { const n = new Set(o); if (n.has(path)) n.delete(path); else { n.add(path); if (!cache[path]) fetch(path) } return n })
  }
  const select = (path: string) => {
    setFocus(path)
    // open every folder down to it so the row is on screen
    setOpen((o) => { const n = new Set(o); let p = path; while (p !== '/') { p = parentOf(p); n.add(p) } return n })
    if (!cache[path]) fetch(path)
  }

  const rows = useMemo(() => {
    const out: Row[] = []
    const walk = (t: SpaceTree, depth: number) => {
      out.push({ t, depth, kind: 'node', parent: t.size })
      if (!t.dir || !open.has(t.path)) return
      const full = cache[t.path] ?? t // the row's own fetch has the full list; the parent's cut copy does until then
      for (const c of full.children ?? []) walk(c, depth + 1)
      if (full.small_n) out.push({ t: { ...full, name: `${fmtN(full.small_n)} smaller files`, dir: false, size: full.small_size ?? 0, files: full.small_n, path: full.path + '/*' }, depth: depth + 1, kind: 'small', parent: full.size })
      if (full.more_n) out.push({ t: { ...full, name: `${fmtN(full.more_n)} more items`, dir: false, size: full.more_size ?? 0, path: full.path + '/…' }, depth: depth + 1, kind: 'more', parent: full.size })
    }
    if (cache['/']) walk(cache['/'], 0)
    // parent sizes for the bars: each row's share of the folder it sits in
    const stack: number[] = []
    for (const r of out) { stack.length = r.depth; r.parent = stack[r.depth - 1] ?? r.t.size; stack[r.depth] = r.t.size }
    return out
  }, [cache, open])

  const root = cache['/']
  if (!root) return <Loading label="Reading the scan…" />
  const focused = cache[focus]
  const map = maps[focus]
  return (
    <div className="space-split">
      <div className="space-tree">
        <div className="space-row head">
          <span className="n">Name</span><span className="r">Size</span><span className="pct">of parent</span><span className="r c">Files</span><span className="r c">Folders</span><span className="r d">Modified</span>
        </div>
        <div className="space-rows">
          {rows.map((r) => {
            const t = r.t
            const pct = r.parent > 0 ? (t.size / r.parent) * 100 : 0
            const isOpen = open.has(t.path)
            return (
              <div key={t.path} className={'space-row' + (t.path === focus ? ' active' : '') + (r.kind !== 'node' ? ' agg' : '')} style={{ paddingLeft: 8 + r.depth * 16 }}
                onClick={() => { if (r.kind === 'node') { if (t.dir) { select(t.path); if (!isOpen) toggle(t.path) } else select(parentOf(t.path)) } }}>
                <span className="n">
                  {t.dir && r.kind === 'node' ? <button className="tw" onClick={(e) => { e.stopPropagation(); toggle(t.path) }}>{isOpen ? '▾' : '▸'}</button> : <span className="tw" />}
                  <span className="ico" style={r.kind === 'node' && !t.dir ? { background: lightTheme() ? kindOf(t.name).light : kindOf(t.name).dark } : undefined}>{t.dir && r.kind === 'node' ? '▰' : ''}</span>
                  <span className="nm" title={t.path}>{t.name}{t.mount && t.dir && r.kind === 'node' ? <span className="muted small"> mount</span> : ''}{t.denied ? <span className="muted small"> unreadable</span> : ''}{t.partial ? <span className="warn small"> not yet read</span> : ''}</span>
                </span>
                <span className="r mono">{fmtBytes(t.size)}</span>
                <span className="pct"><span className="bar"><span style={{ width: `${Math.min(100, pct)}%` }} /></span><span className="muted small">{pct >= 10 ? pct.toFixed(0) : pct.toFixed(1)}%</span></span>
                <span className="r c muted">{t.dir && r.kind === 'node' ? fmtN(t.files) : r.kind === 'small' ? fmtN(t.files) : ''}</span>
                <span className="r c muted">{t.dir && r.kind === 'node' ? fmtN(t.dirs) : ''}</span>
                <span className="r d muted small">{r.kind === 'node' ? fmtWhen(t.mtime) : ''}</span>
              </div>
            )
          })}
        </div>
      </div>
      <div className="space-map">
        <div className="space-crumbs">
          <button className="btn" disabled={focus === '/'} title="up one folder" onClick={() => select(parentOf(focus))}>↑</button>
          {crumbs(focus).map((c) => <button key={c.path} className={'crumb' + (c.path === focus ? ' on' : '')} onClick={() => select(c.path)}>{c.name}</button>)}
          <span className="spacer" />
          {focused && <span className="muted small">{fmtBytes(focused.size)} · {root.size > 0 ? ((focused.size / root.size) * 100).toFixed(1) : 0}% of the disk's {fmtBytes(root.size)}</span>}
        </div>
        {map ? <Treemap tree={map} onOpen={select} /> : <Loading label="Laying it out…" />}
        <div className="space-legend">
          {KINDS.map((k) => <span key={k.id}><i style={{ background: lightTheme() ? k.light : k.dark }} />{k.label}</span>)}
          <span><i className="dir" />Folder</span><span><i className="small" />Smaller files</span>
        </div>
      </div>
    </div>
  )
}

function crumbs(path: string): { name: string; path: string }[] {
  const out = [{ name: '/', path: '/' }]
  let p = ''
  for (const part of path.split('/').filter(Boolean)) { p += '/' + part; out.push({ name: part, path: p }) }
  return out
}

// ---- the treemap: every file a tile, grouped by folder, drawn on a canvas ----
//
// WizTree's picture: the whole area is files, sized by what they take and coloured by kind,
// and folders are only the grouping — a thin line, and a name on the biggest ones directly
// under the folder being looked at. No folder gets a box of its own deeper down, because a
// box costs a header and padding at every level, and a chain of single-child folders (as
// every Linux system has) turned the picture into a staircase of headers with nothing inside.

interface Tile { x: number; y: number; w: number; h: number; t: SpaceTree; agg?: 'small' | 'more'; depth: number; head: number }

// squarify lays items (largest first) into rect, keeping tiles as square as it can.
function squarify(items: { size: number; t: SpaceTree; agg?: 'small' | 'more' }[], x: number, y: number, w: number, h: number, depth: number, out: Tile[]) {
  const total = items.reduce((a, b) => a + b.size, 0)
  if (total <= 0 || w <= 1 || h <= 1) return
  let i = 0
  let cx = x, cy = y, cw = w, ch = h
  while (i < items.length) {
    const vertical = cw < ch // lay the next row along the shorter side
    const side = vertical ? cw : ch
    const scale = (cw * ch) / items.slice(i).reduce((a, b) => a + b.size, 0)
    let row: typeof items = []
    let rowSum = 0
    let worst = Infinity
    for (let j = i; j < items.length; j++) {
      const s = items[j].size * scale
      if (s <= 0) { i = j + 1; continue }
      const sum = rowSum + s
      const thick = sum / side
      let wst = 0
      for (const r of [...row, items[j]]) { const len = (r.size * scale) / thick; wst = Math.max(wst, len / thick, thick / len) }
      if (row.length && wst > worst) break
      row.push(items[j]); rowSum = sum; worst = wst
    }
    if (row.length === 0) break
    const thick = rowSum / side
    let off = 0
    for (const r of row) {
      const len = (r.size * scale) / thick
      const tile: Tile = vertical ? { x: cx, y: cy + off, w: thick, h: len, t: r.t, agg: r.agg, depth, head: 0 } : { x: cx + off, y: cy, w: len, h: thick, t: r.t, agg: r.agg, depth, head: 0 }
      out.push(tile)
      off += len
    }
    if (vertical) { cy += thick; ch -= thick } else { cx += thick; cw -= thick }
    i += row.length
  }
}

function layout(tree: SpaceTree, x: number, y: number, w: number, h: number, depth: number, out: Tile[]) {
  const items: { size: number; t: SpaceTree; agg?: 'small' | 'more' }[] = (tree.children ?? []).filter((c) => c.size > 0).map((c) => ({ size: c.size, t: c }))
  if (tree.small_n && tree.small_size) items.push({ size: tree.small_size, t: { ...tree, name: `${fmtN(tree.small_n)} smaller files`, dir: false, path: tree.path + '/*', children: undefined }, agg: 'small' })
  if (tree.more_n && tree.more_size) items.push({ size: tree.more_size, t: { ...tree, name: `${fmtN(tree.more_n)} more items`, dir: false, path: tree.path + '/…', children: undefined }, agg: 'more' })
  items.sort((a, b) => b.size - a.size)
  const tiles: Tile[] = []
  squarify(items, x, y, w, h, depth, tiles)
  for (const t of tiles) {
    out.push(t)
    const kids = (t.t.children?.length ?? 0) + (t.t.small_size ? 1 : 0) + (t.t.more_size ? 1 : 0)
    if (!t.t.dir || kids === 0 || t.w < 3 || t.h < 3) continue
    // the folders directly under the one being looked at get a name strip when there is room;
    // everything deeper is grouping only
    t.head = depth === 0 && t.h >= 34 && t.w >= 50 ? 14 : 0
    const pad = depth === 0 ? 1 : 0
    layout(t.t, t.x + pad, t.y + pad + t.head, t.w - 2 * pad, t.h - 2 * pad - t.head, depth + 1, out)
  }
}

function Treemap({ tree, onOpen }: { tree: SpaceTree; onOpen: (path: string) => void }) {
  const box = useRef<HTMLDivElement>(null)
  const canvas = useRef<HTMLCanvasElement>(null)
  const tiles = useRef<Tile[]>([])
  const [size, setSize] = useState({ w: 0, h: 0 })
  const [hover, setHover] = useState<{ x: number; y: number; tile: Tile } | null>(null)

  useEffect(() => {
    const el = box.current
    if (!el) return
    const ro = new ResizeObserver(() => setSize({ w: el.clientWidth, h: el.clientHeight }))
    ro.observe(el)
    setSize({ w: el.clientWidth, h: el.clientHeight })
    return () => ro.disconnect()
  }, [])

  useEffect(() => {
    const c = canvas.current
    if (!c || size.w === 0 || size.h === 0) return
    const dpr = window.devicePixelRatio || 1
    c.width = Math.round(size.w * dpr); c.height = Math.round(size.h * dpr)
    const g = c.getContext('2d')
    if (!g) return
    g.scale(dpr, dpr)
    const light = lightTheme()
    const bg = cssVar('--bg2') || '#171b21', border = cssVar('--border') || '#2a313b', fg = cssVar('--fg') || '#d0d7de', muted = cssVar('--muted') || '#7d8590'
    g.fillStyle = bg
    g.fillRect(0, 0, size.w, size.h)
    const out: Tile[] = []
    layout(tree, 0, 0, size.w, size.h, 0, out)
    tiles.current = out
    const font = cssVar('--font') || 'system-ui, sans-serif'
    const dirFill = light ? '#dfe3e8' : '#1c2229'
    for (const t of out) {
      if (t.w < 0.5 || t.h < 0.5) continue
      const isDir = t.t.dir && !t.agg
      if (isDir) {
        // the folder's own colour shows only where its children don't cover it: the strip,
        // the padding, and anything too small to have been asked for
        g.fillStyle = dirFill
        g.fillRect(t.x, t.y, t.w, t.h)
        if (t.depth <= 1 && t.w >= 4 && t.h >= 4) { g.strokeStyle = border; g.lineWidth = 1; g.strokeRect(t.x + 0.5, t.y + 0.5, t.w - 1, t.h - 1) }
        if (t.head) {
          g.save()
          g.beginPath(); g.rect(t.x + 1, t.y + 1, t.w - 2, t.head - 1); g.clip()
          g.font = `600 11px ${font}`; g.fillStyle = fg; g.textBaseline = 'top'
          const label = t.t.name
          g.fillText(label, t.x + 4, t.y + 1, t.w - 8)
          const sz = fmtBytes(t.t.size)
          if (t.w > g.measureText(label).width + g.measureText(sz).width + 20) { g.font = `10px ${font}`; g.fillStyle = muted; g.textAlign = 'right'; g.fillText(sz, t.x + t.w - 4, t.y + 2) }
          g.restore()
        }
        continue
      }
      let fill: string
      if (t.agg) fill = t.agg === 'small' ? (light ? '#c4cad1' : '#39424c') : (light ? '#d3d8de' : '#2f3740')
      else { const k = kindOf(t.t.name); fill = light ? k.light : k.dark }
      g.fillStyle = fill
      g.fillRect(t.x, t.y, t.w, t.h)
      if (t.w >= 3 && t.h >= 3) { g.strokeStyle = bg; g.lineWidth = 1; g.strokeRect(t.x + 0.5, t.y + 0.5, t.w - 1, t.h - 1) }
      if (t.w >= 46 && t.h >= 14) {
        g.save()
        g.beginPath(); g.rect(t.x + 1, t.y + 1, t.w - 2, t.h - 2); g.clip()
        g.font = `11px ${font}`; g.textBaseline = 'top'
        g.fillStyle = t.agg ? muted : (light ? '#111' : '#fff')
        g.fillText(t.t.name, t.x + 4, t.y + 2, t.w - 8)
        if (t.h >= 28) { g.font = `10px ${font}`; g.fillStyle = t.agg ? muted : (light ? 'rgba(0,0,0,.7)' : 'rgba(255,255,255,.8)'); g.fillText(fmtBytes(t.t.size), t.x + 4, t.y + 15, t.w - 8) }
        g.restore()
      }
    }
  }, [tree, size])

  const at = (e: React.MouseEvent) => {
    const r = canvas.current!.getBoundingClientRect()
    const x = e.clientX - r.left, y = e.clientY - r.top
    // the deepest tile under the pointer
    let best: Tile | null = null
    for (const t of tiles.current) if (x >= t.x && x < t.x + t.w && y >= t.y && y < t.y + t.h && (!best || t.depth > best.depth)) best = t
    return { x, y, tile: best }
  }
  // a path relative to the folder being looked at, for the tooltip
  const within = (p: string) => { const base = tree.path === '/' ? '' : tree.path; return p.startsWith(base + '/') ? p.slice(base.length + 1) : p }
  return (
    <div className="space-canvas" ref={box}>
      <canvas ref={canvas} style={{ width: size.w, height: size.h }}
        onMouseMove={(e) => { const h = at(e); setHover(h.tile ? { x: h.x, y: h.y, tile: h.tile } : null) }}
        onMouseLeave={() => setHover(null)}
        onClick={(e) => { const h = at(e); if (!h.tile) return; const t = h.tile.t; onOpen(t.dir && !h.tile.agg ? t.path : parentOf(t.path)) }} />
      {hover && (
        <div className="space-tip" style={{ left: Math.min(hover.x + 12, size.w - 280), top: Math.min(hover.y + 12, size.h - 70) }}>
          <div className="mono small" style={{ wordBreak: 'break-all' }}>{hover.tile.agg ? hover.tile.t.name + ' in ' + (within(parentOf(hover.tile.t.path)) || '.') : within(hover.tile.t.path)}</div>
          <div><b>{fmtBytes(hover.tile.t.size)}</b> <span className="muted">· {tree.size > 0 ? ((hover.tile.t.size / tree.size) * 100).toFixed(1) : 0}% of {tree.name === '/' ? 'the disk' : tree.name}</span></div>
          {hover.tile.t.dir && !hover.tile.agg && <div className="muted small">{fmtN(hover.tile.t.files)} files · {fmtN(hover.tile.t.dirs)} folders · click to open</div>}
          {!hover.tile.t.dir && !hover.tile.agg && <div className="muted small">{kindOf(hover.tile.t.name).label} · {fmtWhen(hover.tile.t.mtime)}{hover.tile.t.apparent !== hover.tile.t.size ? ` · ${fmtBytes(hover.tile.t.apparent)} apparent` : ''}</div>}
        </div>
      )}
    </div>
  )
}

// ---- the largest files on the disk ----

function LargestFiles({ disk }: { disk: string }) {
  const [files, setFiles] = useState<SpaceFile[] | null>(null)
  const [filter, setFilter] = useState('')
  useEffect(() => { api.spaceLargest(disk, 1000).then(setFiles).catch((e) => toast(e instanceof Error ? e.message : 'failed', 'err')) }, [disk])
  if (!files) return <Loading label="Finding the largest files…" />
  const q = filter.toLowerCase()
  const shown = q ? files.filter((f) => f.path.toLowerCase().includes(q)) : files
  const top = shown[0]?.size ?? 1
  return (
    <div className="space-files">
      <div className="dash-bar"><input className="filter" placeholder="filter by path" value={filter} onChange={(e) => setFilter(e.target.value)} spellCheck={false} /><span className="muted small">the {fmtN(files.length)} largest files{q ? ` · ${fmtN(shown.length)} match` : ''}</span></div>
      <div className="space-rows">
        {shown.map((f) => (
          <div key={f.path} className="space-row file">
            <span className="n"><span className="ico" style={{ background: lightTheme() ? kindOf(f.path).light : kindOf(f.path).dark }} /><span className="nm mono" title={f.path}>{f.path}</span></span>
            <span className="r mono">{fmtBytes(f.size)}</span>
            <span className="pct"><span className="bar"><span style={{ width: `${(f.size / top) * 100}%` }} /></span></span>
            <span className="r d muted small">{fmtWhen(f.mtime)}</span>
          </div>
        ))}
      </div>
    </div>
  )
}