document.addEventListener('DOMContentLoaded', () => {
  function humanFileSize(size) {
    if (size === 0) {
      return "0 B";
    }
    if (size < 0) {
      return null;
    }
    const base = Math.floor(Math.log2(size) / 10)
    const unit = ["B", "KiB", "MiB", "GiB", "TiB"][base]
    const relative = size / 2**(10*base)
    return relative.toFixed(3) + " " + unit
  }

  function textToA(line) {
    let outerElement = document.createElement('div')
    outerElement.innerHTML = line
    return outerElement.getElementsByTagName('a')[0]
  }

  function parseLine(line) {
    const href = textToA(line).href
    const filename = href.substr(-1) === '/' ? decodeURIComponent(href.split('/').slice(-2, -1)[0]) : decodeURIComponent(href.split('/').pop())
    const size = line.split(' ').pop()
    return {
      href: href,
      filename: filename,
      size: size
    }
  }

  function processLine(line) {
    meta = parseLine(line)
    return `<tr><td><a href="${meta.href}">${meta.filename}</a></td><td>${meta.size === '-' ? '-' : humanFileSize(meta.size)}</td></tr>`
  }

  function addZebraStripes(rows) {
    // this should be done in CSS, but AFAIU it does not support limiting
    // :nth-child to elements matching a previous :not selector
    rows.forEach((row, idx) => {
      if (idx % 2 === 0) {
        row.classList.add("zebra-stripe")
      } else {
        row.classList.remove("zebra-stripe")
      }
    })
  }

  const collator = new Intl.Collator('kn', {numeric: true})

  // transform plain text to table
  document.querySelector('pre').outerHTML = '<table><thead><tr><th>Name</th><th>Size</th></tr></thead><tbody><tr><td><a href="..">..</a></td><td>-</td></tr>' + document.querySelector('pre').innerHTML
    .split('\n')
    .filter(line => line !== '')
    .filter(line => line !== '<a href="../">../</a>')
    .map(processLine)
    .sort(collator.compare)
    .join('\n') + '</tbody></table>'

  let searchField = document.createElement('input')
  searchField.id = 'search-field'
  searchField.autofocus = true
  document.querySelector('body').insertBefore(searchField, document.querySelector('table'))

  const rows = Array.from(document.querySelectorAll('tbody tr'))

  addZebraStripes(rows)

  document.querySelector('#search-field').addEventListener("input", e => {
    const searchValue = e.target.value.toLowerCase()
    rows.forEach(row => {
      const file = row.querySelector('td:nth-child(1) a').innerText
      if (!file.toLowerCase().includes(searchValue)) {
        row.classList.add("hidden")
      } else {
        row.classList.remove("hidden")
      }
    })

    const visibleRows = rows.filter(row => !row.classList.contains("hidden"))
    if (visibleRows.length === 1) {
      const target = visibleRows[0].querySelector('td a').href
      if (target.substr(-1) === '/') {
        window.location = target
      }
    }
    addZebraStripes(visibleRows)
  })
})