const state = {
  events: [],
  selectedId: undefined,
  filter: '',
  connected: false,
  followLatest: true,
  maxEvents: 500,
}

const elements = {
  batchCount: document.querySelector('#batchCount'),
  itemCount: document.querySelector('#itemCount'),
  byteCount: document.querySelector('#byteCount'),
  lastBatch: document.querySelector('#lastBatch'),
  packetRate: document.querySelector('#packetRate'),
  packetList: document.querySelector('#packetList'),
  itemTable: document.querySelector('#itemTable'),
  rawPayload: document.querySelector('#rawPayload'),
  jsonMeta: document.querySelector('#jsonMeta'),
  expandJsonButton: document.querySelector('#expandJsonButton'),
  copyRawButton: document.querySelector('#copyRawButton'),
  jsonModal: document.querySelector('#jsonModal'),
  jsonModalBackdrop: document.querySelector('#jsonModalBackdrop'),
  jsonModalTitle: document.querySelector('#jsonModalTitle'),
  jsonModalPayload: document.querySelector('#jsonModalPayload'),
  copyModalJsonButton: document.querySelector('#copyModalJsonButton'),
  closeJsonModalButton: document.querySelector('#closeJsonModalButton'),
  detailTitle: document.querySelector('#detailTitle'),
  detailMeta: document.querySelector('#detailMeta'),
  connectionStatus: document.querySelector('#connectionStatus'),
  filterInput: document.querySelector('#filterInput'),
  followButton: document.querySelector('#followButton'),
  copyButton: document.querySelector('#copyButton'),
  clearButton: document.querySelector('#clearButton'),
}

const numberFormatter = new Intl.NumberFormat('ru-RU')
const byteFormatter = new Intl.NumberFormat('ru-RU', {
  maximumFractionDigits: 1,
})

function formatBytes(bytes) {
  if (bytes < 1024) {
    return `${bytes} B`
  }

  if (bytes < 1024 * 1024) {
    return `${byteFormatter.format(bytes / 1024)} KB`
  }

  return `${byteFormatter.format(bytes / 1024 / 1024)} MB`
}

function formatTime(timestamp) {
  return new Intl.DateTimeFormat('ru-RU', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  }).format(new Date(timestamp))
}

function getSelectedEvent() {
  return state.events.find((event) => event.id === state.selectedId)
}

function getSelectedJson() {
  const selected = getSelectedEvent()
  return selected ? JSON.stringify(selected.payload, null, 2) : ''
}

async function copySelectedJson(button) {
  const json = getSelectedJson()

  if (!json) {
    return
  }

  const originalText = button.textContent
  await navigator.clipboard.writeText(json)
  button.textContent = 'Copied'
  setTimeout(() => {
    button.textContent = originalText
  }, 900)
}

function openJsonModal() {
  const selected = getSelectedEvent()

  if (!selected) {
    return
  }

  elements.jsonModalTitle.textContent = `${selected.count} values - ${formatTime(
    selected.receivedAt,
  )}`
  elements.jsonModalPayload.textContent = getSelectedJson()
  elements.jsonModal.classList.add('open')
  elements.jsonModal.setAttribute('aria-hidden', 'false')
  document.body.classList.add('modal-open')
}

function closeJsonModal() {
  elements.jsonModal.classList.remove('open')
  elements.jsonModal.setAttribute('aria-hidden', 'true')
  document.body.classList.remove('modal-open')
}

function setConnectionStatus(status) {
  state.connected = status === 'live'
  elements.connectionStatus.className = `status ${status}`
  elements.connectionStatus.querySelector('span:last-child').textContent = status
}

function applySnapshot(snapshot) {
  const previousSelectedId = state.selectedId
  state.events = snapshot.events ?? []
  state.maxEvents = snapshot.maxEvents ?? state.maxEvents
  const latest = state.events[state.events.length - 1]
  const selectedStillExists = state.events.some(
    (event) => event.id === previousSelectedId,
  )

  if (state.followLatest && latest) {
    state.selectedId = latest.id
  } else if (!selectedStillExists && latest) {
    state.selectedId = latest.id
  } else if (state.events.length === 0) {
    state.selectedId = undefined
  }

  elements.batchCount.textContent = numberFormatter.format(snapshot.receivedBatches ?? 0)
  elements.itemCount.textContent = numberFormatter.format(snapshot.receivedItems ?? 0)
  elements.byteCount.textContent = formatBytes(snapshot.receivedBytes ?? 0)
  elements.packetRate.textContent = `${numberFormatter.format(
    snapshot.recentBatchesPerMinute ?? 0,
  )}/min`
  elements.lastBatch.textContent = snapshot.latest
    ? `${snapshot.latest.count} items`
    : 'none'

  render()
}

function applySummary(summary) {
  state.maxEvents = summary.maxEvents ?? state.maxEvents
  elements.batchCount.textContent = numberFormatter.format(summary.receivedBatches ?? 0)
  elements.itemCount.textContent = numberFormatter.format(summary.receivedItems ?? 0)
  elements.byteCount.textContent = formatBytes(summary.receivedBytes ?? 0)
  elements.packetRate.textContent = `${numberFormatter.format(
    summary.recentBatchesPerMinute ?? 0,
  )}/min`
  elements.lastBatch.textContent = summary.latest
    ? `${summary.latest.count} items`
    : 'none'
}

function appendEvent(event) {
  state.events.push(event)

  while (state.events.length > state.maxEvents) {
    const removed = state.events.shift()

    if (removed?.id === state.selectedId) {
      state.selectedId = state.events[0]?.id
    }
  }
}

function renderPackets() {
  if (state.events.length === 0) {
    elements.packetList.innerHTML = '<div class="empty">No packets yet.</div>'
    return
  }

  elements.packetList.innerHTML = state.events
    .slice()
    .reverse()
    .map((event) => {
      const active = event.id === state.selectedId ? ' active' : ''
      const forward = event.forward
        ? `forward: ${event.forward.status}`
        : 'local only'

      return `
        <button class="packet${active}" data-id="${event.id}" type="button">
          <span class="packet-main">
            <span>${formatTime(event.receivedAt)}</span>
            <span>${event.count} items</span>
          </span>
          <span class="packet-meta">
            <span>${formatBytes(event.bytes)}</span>
            <span>${forward}</span>
          </span>
        </button>
      `
    })
    .join('')
}

function matchesFilter(item) {
  if (!state.filter) {
    return true
  }

  const haystack = `${item.edge} ${item.tag} ${item.value}`.toLowerCase()
  return haystack.includes(state.filter)
}

function renderDetails() {
  const selected = getSelectedEvent()

  if (!selected) {
    elements.detailTitle.textContent = 'Waiting for ingest'
    elements.detailMeta.textContent = 'POST /api/ingest'
    elements.jsonMeta.textContent = 'No payload selected'
    elements.itemTable.innerHTML = ''
    elements.rawPayload.textContent = 'No payload yet.'
    return
  }

  const visibleItems = selected.items.filter(matchesFilter)

  elements.detailTitle.textContent = `${selected.count} values received`
  elements.detailMeta.textContent = `${formatTime(selected.receivedAt)} · ${formatBytes(
    selected.bytes,
  )}${selected.forward ? ` · forward: ${selected.forward.status}` : ''}`
  elements.jsonMeta.textContent = `${formatBytes(selected.bytes)} - ${selected.count} values`
  elements.detailMeta.textContent = `${formatTime(selected.receivedAt)} - ${formatBytes(
    selected.bytes,
  )}${selected.forward ? ` - forward: ${selected.forward.status}` : ''}`
  elements.rawPayload.textContent = getSelectedJson()

  if (elements.jsonModal.classList.contains('open')) {
    elements.jsonModalTitle.textContent = `${selected.count} values - ${formatTime(
      selected.receivedAt,
    )}`
    elements.jsonModalPayload.textContent = getSelectedJson()
  }

  elements.itemTable.innerHTML =
    visibleItems.length === 0
      ? '<tr><td class="empty" colspan="4">No matching values.</td></tr>'
      : visibleItems
          .map(
            (item) => `
              <tr>
                <td>${item.tag}</td>
                <td>${item.edge}</td>
                <td class="value">${item.value}</td>
                <td>${formatTime(item.timestamp)}</td>
              </tr>
            `,
          )
          .join('')
}

function render() {
  elements.followButton.classList.toggle('active', state.followLatest)
  elements.followButton.textContent = state.followLatest
    ? 'Following latest'
    : 'Follow latest'
  renderPackets()
  renderDetails()
}

async function loadSnapshot() {
  const response = await fetch('/api/events')
  applySnapshot(await response.json())
}

function connectEvents() {
  const source = new EventSource('/events')

  source.onopen = () => setConnectionStatus('live')
  source.onerror = () => setConnectionStatus('offline')
  source.onmessage = (message) => {
    const data = JSON.parse(message.data)

    if (data.snapshot) {
      applySnapshot(data.snapshot)
      return
    }

    if (data.type === 'ingest') {
      appendEvent(data.event)
      applySummary(data.summary)

      if (state.followLatest || !state.selectedId) {
        state.selectedId = data.event.id
      }

      render()
    }
  }
}

elements.packetList.addEventListener('click', (event) => {
  const packet = event.target.closest('.packet')

  if (!packet) {
    return
  }

  state.selectedId = packet.dataset.id
  state.followLatest = false
  render()
})

elements.followButton.addEventListener('click', () => {
  state.followLatest = !state.followLatest

  if (state.followLatest && state.events.length > 0) {
    state.selectedId = state.events[state.events.length - 1].id
  }

  render()
})

elements.filterInput.addEventListener('input', (event) => {
  state.filter = event.target.value.trim().toLowerCase()
  renderDetails()
})

elements.copyButton.addEventListener('click', async () => {
  await copySelectedJson(elements.copyButton)
})

elements.copyRawButton.addEventListener('click', async () => {
  await copySelectedJson(elements.copyRawButton)
})

elements.expandJsonButton.addEventListener('click', () => {
  openJsonModal()
})

elements.copyModalJsonButton.addEventListener('click', async () => {
  await copySelectedJson(elements.copyModalJsonButton)
})

elements.closeJsonModalButton.addEventListener('click', () => {
  closeJsonModal()
})

elements.jsonModalBackdrop.addEventListener('click', () => {
  closeJsonModal()
})

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeJsonModal()
  }
})

elements.clearButton.addEventListener('click', async () => {
  await fetch('/api/events', { method: 'DELETE' })
  state.events = []
  state.selectedId = undefined
  state.followLatest = true
  render()
  await loadSnapshot()
})

setConnectionStatus('connecting')
await loadSnapshot()
connectEvents()