const $ = s => document.querySelector(s)
const $$ = s => document.querySelectorAll(s)
const EXIF_NAMES = { 1: "nai", 2: "comfy", 3: "sd", 4: "mj", 5: "celsys", 6: "photoshop", 7: "nai_stealth", 8: "invoke", 9: "fooocus", 10: "swarm", 11: "nai_vibe" }
const EXIF_CODES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
const CATEGORY_NAMES = { ...EXIF_NAMES, 0: "None" }
const FILTER_CODES = [1, 7, 11, 2, 3, 4, 5, 6, 8, 9, 10, 0]
const TOP_FILTER_CODES = [1, 7, 11, 2, 3]
const BOTTOM_FILTER_CODES = [6, 5, 0]
const COUNT_FILTER_CODES = FILTER_CODES.filter(code =>
  !TOP_FILTER_CODES.includes(code) && !BOTTOM_FILTER_CODES.includes(code)
)
const EXIF_FILTER_KEY = "pixif2-exif-types"
const LONG_DIGITS_RE = /\d{6,}/g
const POST_ID_RE = /\d+/g
const PAGE_SIZE = 60
const SEARCH_PAGE_SIZE = 10
const EAGER_IMAGE_COUNT = 12
const IMAGE_URL_VERSION = 5
const VIEWER_GAP = 16
const VIEWER_MIN_SCALE = .25
const VIEWER_MAX_SCALE = 6
const VIEWER_BUTTON_STEP = .25
const VIEWER_WHEEL_STEP = .15
let viewerScale = 1
let viewerX = 0
let viewerY = VIEWER_GAP
let viewerDrag = null
let viewerPostId = ""
let viewerPages = []
let viewerPageIndex = 0
let viewerItems = []
let viewerItemIndex = 0
let viewerFocus = null
let explorerEvents = null
let explorerPage = 1
let explorerDebounce = null
let lastExplorerHash = "#/explorer"
let currentExplorerView = null
let loadedExplorerListPage = null
let submittedSearchId = null
let submittedFilterKey = null
let resultCardCache = new Map()
let postSearchCardCache = new Map()
let exifCountsCache = new Map()

function syncDeepScanTargets() {
  const enabled = $("#input-deep-scan").checked
  const targeted = $("#input-targeted-deep-scan")
  targeted.disabled = !enabled
  $("#deep-scan-filters").classList.toggle("hidden", !enabled || !targeted.checked)
}

$("#input-deep-scan").addEventListener("change", syncDeepScanTargets)
$("#input-targeted-deep-scan").addEventListener("change", syncDeepScanTargets)

$$(".tab").forEach(tab => {
  tab.addEventListener("click", () => {
    location.hash = tab.dataset.tab === "explorer" ? lastExplorerHash : `#/${tab.dataset.tab}`
  })
})

$("#btn-refresh-explorer").addEventListener("click", refreshExplorer)
$("#sort-bookmarks").addEventListener("change", () => {
  const [path] = (location.hash.slice(2) || "").split("?")
  const parts = path.split("/").filter(Boolean)
  if (parts[0] !== "explorer" || !parts[1]) return
  const id = decodeURIComponent(parts[1])
  const show = submittedSearchId === id
  const hash = explorerHash(id, 1)
  resultCardCache = new Map()
  currentExplorerView = null
  if (location.hash === hash) openSearch(id, 1, show)
  else location.hash = hash
})
$("#btn-download-all").addEventListener("click", () => {
  const input = $("#download-through")
  const through = Math.min(parseInt(input.value) || 0, parseInt(input.max) || 0)
  if (through < 1) return
  input.value = through
  const id = $("#detail-title").textContent
  const types = getExifTypes()
  const exifTypes = types.length ? types.join(",") : "none"
  location.href = `/api/results/${encodeURIComponent(id)}/download?through=${through}&exif_types=${exifTypes}`
})

$("#btn-submit").addEventListener("click", async () => {
  const url = $("#input-url").value.trim()
  if (!url) return
  const pages = parseInt($("#input-pages").value) || 30
  const mode = $("#input-mode").value
  const deepScan = $("#input-deep-scan").checked
  const targeted = deepScan && $("#input-targeted-deep-scan").checked
  const deepScanTypes = targeted ? selectedCategoryTypes("#deep-scan-filters") : []
  const status = $("#submit-status")
  if (targeted && !deepScanTypes.length) {
    status.textContent = "Select at least one deep scan category"
    status.className = "status-err"
    return
  }
  status.textContent = "Submitting..."
  status.className = ""

  const userIds = [...new Set(url.match(LONG_DIGITS_RE) || [])]
  const hasSearch = /search/i.test(url)
  const isUserInput = userIds.length > 0 && !hasSearch

  if (userIds.length > 0 && hasSearch) {
    status.textContent = "Ambiguous input - pick either user IDs or a search URL"
    status.className = "status-err"
    return
  }

  try {
    let resp
    if (isUserInput) {
      resp = await fetch("/api/submit_users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ user_ids: userIds, deep_scan: deepScan, deep_scan_types: deepScanTypes })
      })
    } else {
      resp = await fetch("/api/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url, pages, mode, deep_scan: deepScan, deep_scan_types: deepScanTypes })
      })
    }
    const data = await resp.json()
    const ids = data.ids || [data.id]
    status.textContent = `Submitted as ${ids.join(", ")} - you can close this page`
    status.className = "status-ok"
  } catch (e) {
    status.textContent = `Error: ${e.message}`
    status.className = "status-err"
  }
})

$("#btn-reclass").addEventListener("click", async () => {
  const types = selectedCategoryTypes("#reclass-filters")
  const status = $("#reclass-status")
  if (!types.length) {
    status.textContent = "Select at least one category"
    status.className = "status-err"
    return
  }
  $("#btn-reclass").disabled = true
  status.textContent = "Starting..."
  status.className = ""
  try {
    const resp = await fetch("/api/reclass", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ exif_types: types })
    })
    const data = await resp.json()
    if (data.error) throw new Error(data.error)
    status.textContent = `Submitted as ${data.id}`
    status.className = "status-ok"
    location.hash = explorerHash(data.id, 1)
  } catch (e) {
    status.textContent = `Error: ${e.message}`
    status.className = "status-err"
  } finally {
    $("#btn-reclass").disabled = false
  }
})

$("#btn-post-search").addEventListener("click", async () => {
  const status = $("#post-search-status")
  const postIds = parsePostIds($("#input-post-ids").value)
  if (!postIds.length) {
    status.textContent = "Enter at least one post ID"
    status.className = "status-err"
    $("#post-search-grid").replaceChildren()
    return
  }
  $("#btn-post-search").disabled = true
  status.textContent = "Loading..."
  status.className = ""
  try {
    const resp = await fetch("/api/post_search", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ post_ids: postIds })
    })
    const data = await resp.json()
    if (data.error) throw new Error(data.error)
    status.textContent = `${data.total} image${data.total === 1 ? "" : "s"}`
    status.className = "status-ok"
    postSearchCardCache = new Map()
    renderPostSearchResults(data.items || [])
  } catch (e) {
    status.textContent = `Error: ${e.message}`
    status.className = "status-err"
  } finally {
    $("#btn-post-search").disabled = false
  }
})

function route() {
  const raw = location.hash.slice(2) || "submit"
  const [path, qs = ""] = raw.split("?")
  const parts = path.split("/").filter(Boolean)
  const tab = parts[0] || "submit"
  const params = new URLSearchParams(qs)
  if (tab === "progress") {
    location.hash = "#/explorer"
    return
  }
  $$(".tab").forEach(t => t.classList.toggle("active", t.dataset.tab === tab))
  $$(".panel").forEach(p => p.classList.toggle("active", p.id === tab))
  if (tab === "explorer") {
    lastExplorerHash = location.hash || "#/explorer"
    if (parts[1]) {
      closeExplorerEvents()
      const id = decodeURIComponent(parts[1])
      const page = parseInt(params.get("page")) || 1
      const show = submittedSearchId === id
      const view = explorerDetailView(id, page, show)
      if (currentExplorerView !== view) openSearch(id, page, show, view)
    } else {
      resetSubmittedSearch()
      const page = parseInt(params.get("page")) || 1
      if (currentExplorerView !== "list" || loadedExplorerListPage !== page) loadSearches(page)
      openExplorerEvents()
    }
  } else {
    closeExplorerEvents()
  }
}

function parsePostIds(raw) {
  return [...new Set(raw.match(POST_ID_RE) || [])]
}


function explorerHash(id, page) {
  return `#/explorer/${encodeURIComponent(id)}?page=${page}`
}

function explorerDetailView(id, page, show) {
  const sort = $("#sort-bookmarks").checked ? 1 : 0
  return `detail:${id}:${page}:${show ? 1 : 0}:${filterKey(getExifTypes())}:${sort}`
}

function resetSubmittedSearch() {
  submittedSearchId = null
  submittedFilterKey = null
  resultCardCache = new Map()
  $("#sort-bookmarks").checked = true
}

function taskCount(t) {
  if (t.raw_total) {
    const done = Math.min((t.scanned_base || 0) + (t.done || 0), t.raw_total)
    return `${done}/${t.raw_total}`
  }
  return t.total > 0 ? `${t.done}/${t.total}` : "..."
}


async function loadSearches(page = 1, silent = false) {
  explorerPage = page
  currentExplorerView = null
  loadedExplorerListPage = null
  const list = $("#search-list")
  const detail = $("#search-detail")
  detail.classList.add("hidden")
  if (!silent) list.innerHTML = "Loading..."
  try {
    const [searchResp, taskResp] = await Promise.all([fetch(`/api/searches?page=${page}`), fetch("/api/progress")])
    const data = await searchResp.json()
    const tasks = await taskResp.json()
    const active = tasks.filter(t => t.phase !== "canceling" && (t.type === "search" || t.type === "search+scan" || t.type === "scan" || t.type === "user_search" || t.type === "reclass"))
    const activeIds = new Set(active.map(t => t.id))
    const searches = (data.items || []).filter(s => (s.kind === "reclass" || (s.found_exif || 0) > 0) && !activeIds.has(s.id))
    if (!searches.length && !active.length) {
      list.innerHTML = "No searches yet"
      currentExplorerView = "list"
      loadedExplorerListPage = page
      return
    }
    const activeHtml = active.map(t => {
      const label = taskCount(t)
      return `<div class="search-item active-task" data-id="${esc(t.id)}">
        <span class="id">${esc(t.id)}</span>
        <span class="time">${esc(t.type)} ${esc(t.phase)} ${label}</span>
        <span class="search-actions">
          <span class="search-status active-mark">...</span>
          <button class="btn-icon btn-delete" title="Cancel and delete">&times;</button>
        </span>
      </div>`
    }).join("")
    const savedHtml = searches.map(s => {
      const d = new Date(parseInt(s.created_at) * 1000)
      const ts = d.toLocaleString()
      const count = s.kind === "reclass" ? `${s.changed || 0}/${s.total || 0}` : `${s.found_exif || 0}/${s.total_searched || 0}`
      const kind = s.kind === "reclass" ? "reclass " : ""
      const title = s.kind === "reclass" ? "changed / total" : "found exif / total searched"
      return `<div class="search-item" data-id="${esc(s.id)}">
        <span class="id">${esc(s.id)}</span>
        <span class="time">${kind}${ts}</span>
        <span class="search-actions">
          <span class="search-status done-mark" title="${title}">${count}</span>
          ${s.kind === "reclass" ? "" : `<button class="btn-icon btn-rename" title="Rename">&#9998;</button>`}
          <button class="btn-icon btn-delete" title="Delete">&times;</button>
        </span>
      </div>`
    }).join("")
    list.innerHTML = activeHtml + savedHtml + renderSearchPager(data)
    list.querySelectorAll(".search-item").forEach(el => {
      if (!el.dataset.id) return
      el.querySelector(".id").addEventListener("click", () => {
        resetSubmittedSearch()
        location.hash = explorerHash(el.dataset.id, 1)
      })
      const rename = el.querySelector(".btn-rename")
      const del = el.querySelector(".btn-delete")
      if (rename) rename.addEventListener("click", e => { e.stopPropagation(); renameSearch(el.dataset.id) })
      if (del) del.addEventListener("click", e => { e.stopPropagation(); deleteSearch(el.dataset.id) })
    })
    const prev = $("#search-prev")
    const next = $("#search-next")
    if (prev) prev.onclick = () => { location.hash = `#/explorer?page=${Math.max(page - 1, 1)}` }
    if (next) next.onclick = () => { location.hash = `#/explorer?page=${Math.min(page + 1, data.pages)}` }
    currentExplorerView = "list"
    loadedExplorerListPage = page
  } catch (e) {
    list.innerHTML = `Error: ${e.message}`
  }
}

async function refreshExplorer() {
  const btn = $("#btn-refresh-explorer")
  btn.disabled = true
  btn.textContent = "Refreshing"
  try {
    await fetch("/api/searches/refresh", { method: "POST" })
    exifCountsCache = new Map()
    currentExplorerView = null
    if ((location.hash.slice(2) || "submit").startsWith("explorer/")) route()
    else await loadSearches(explorerPage, true)
  } finally {
    btn.disabled = false
    btn.textContent = "Refresh"
  }
}

function openExplorerEvents() {
  if (explorerEvents) return
  explorerEvents = new EventSource("/api/events")
  explorerEvents.onmessage = () => {
    const raw = location.hash.slice(2) || "submit"
    const [path] = raw.split("?")
    const parts = path.split("/").filter(Boolean)
    if ((parts[0] || "submit") === "explorer" && !parts[1]) {
      clearTimeout(explorerDebounce)
      explorerDebounce = setTimeout(() => loadSearches(explorerPage, true), 500)
    }
  }
}

function closeExplorerEvents() {
  if (!explorerEvents) return
  explorerEvents.close()
  explorerEvents = null
}

function renderSearchPager(data) {
  if (!data.total || data.pages <= 1) return ""
  const start = (data.page - 1) * SEARCH_PAGE_SIZE + 1
  const end = Math.min(data.page * SEARCH_PAGE_SIZE, data.total)
  return `<div class="list-pager">
    <button class="btn-secondary" id="search-prev" ${data.page <= 1 ? "disabled" : ""}>Prev</button>
    <span>${start}-${end} of ${data.total} | page ${data.page}/${data.pages}</span>
    <button class="btn-secondary" id="search-next" ${data.page >= data.pages ? "disabled" : ""}>Next</button>
  </div>`
}

function getExifTypes() {
  const raw = localStorage.getItem(EXIF_FILTER_KEY)
  if (raw === null) return [...FILTER_CODES]
  const types = raw.split(",").map(Number).filter(n => FILTER_CODES.includes(n))
  return types
}

function setExifTypes(types) {
  const sorted = [...new Set(types)].filter(n => FILTER_CODES.includes(n)).sort((a, b) => a - b)
  if (sorted.length === FILTER_CODES.length && sorted.every(n => FILTER_CODES.includes(n))) {
    localStorage.removeItem(EXIF_FILTER_KEY)
  } else {
    localStorage.setItem(EXIF_FILTER_KEY, sorted.join(","))
  }
  return sorted
}

function filterKey(types) {
  return [...new Set(types)].filter(n => FILTER_CODES.includes(n)).sort((a, b) => a - b).join(",")
}

function selectedExifTypes() {
  return [...$$("#exif-filters .filter-btn")]
    .filter(el => el.classList.contains("active"))
    .map(el => Number(el.dataset.code))
}

function selectedCategoryTypes(root) {
  return [...$$(`${root} .filter-btn`)]
    .filter(el => el.classList.contains("active"))
    .map(el => Number(el.dataset.code))
}

function renderCategoryFilters(root, codes = FILTER_CODES) {
  const buttons = codes.map(code => {
    return `<button class="filter-btn active" data-code="${code}">${esc(CATEGORY_NAMES[code])}</button>`
  }).join("")
  $(root).innerHTML = `${buttons}
    <button class="filter-action" data-action="all">Select all</button>
    <button class="filter-action" data-action="none">Select none</button>`
  $$(`${root} .filter-btn`).forEach(btn => {
    btn.onclick = () => btn.classList.toggle("active")
  })
  $$(`${root} .filter-action`).forEach(btn => {
    btn.onclick = () => {
      const filters = [...$$(`${root} .filter-btn`)]
      if (btn.dataset.action === "all") filters.forEach(el => el.classList.add("active"))
      if (btn.dataset.action === "none") filters.forEach(el => el.classList.remove("active"))
    }
  })
}

function renderExifFilters(id, submitted = false, counts = null) {
  const shownCounts = counts ?? exifCountsCache.get(id) ?? visibleExifCounts(id)
  if (shownCounts) exifCountsCache.set(id, shownCounts)
  const active = new Set(getExifTypes())
  const remaining = [...COUNT_FILTER_CODES].sort((a, b) =>
    (shownCounts?.[b] || 0) - (shownCounts?.[a] || 0) || COUNT_FILTER_CODES.indexOf(a) - COUNT_FILTER_CODES.indexOf(b)
  )
  const codes = [...TOP_FILTER_CODES, ...remaining, ...BOTTOM_FILTER_CODES]
  const buttons = codes.map(code => {
    const count = shownCounts ? ` (${shownCounts[code] || 0})` : ""
    return `<button class="filter-btn${active.has(code) ? " active" : ""}" data-code="${code}">${esc(CATEGORY_NAMES[code])}${count}</button>`
  }).join("")
  const root = $("#exif-filters")
  root.dataset.id = id
  root.innerHTML = `${buttons}
    <button class="filter-action" data-action="all">Select all</button>
    <button class="filter-action" data-action="none">Select none</button>
    <button class="filter-action submit" data-action="submit">${submitted ? "Update" : "Submit"}</button>`
  $$("#exif-filters .filter-btn").forEach(btn => {
    btn.onclick = () => btn.classList.toggle("active")
  })
  $$("#exif-filters .filter-action").forEach(btn => {
    btn.onclick = () => {
      const action = btn.dataset.action
      const filters = [...$$("#exif-filters .filter-btn")]
      if (action === "all") filters.forEach(el => el.classList.add("active"))
      if (action === "none") filters.forEach(el => el.classList.remove("active"))
      if (action !== "submit") return
      const types = selectedExifTypes()
      const key = filterKey(types)
      if (submittedSearchId === id && submittedFilterKey === key) return
      setExifTypes(types)
      if (submittedSearchId !== id) resultCardCache = new Map()
      submittedSearchId = id
      submittedFilterKey = key
      const hash = explorerHash(id, 1)
      if (location.hash === hash) openSearch(id, 1, true)
      else location.hash = hash
    }
  })
}

function visibleExifCounts(id) {
  const root = $("#exif-filters")
  if (root.dataset.id !== id) return null
  const counts = {}
  let found = false
  $$("#exif-filters .filter-btn").forEach(btn => {
    const match = btn.textContent.match(/\((\d+)\)$/)
    if (!match) return
    counts[Number(btn.dataset.code)] = Number(match[1])
    found = true
  })
  return found ? counts : null
}

async function openSearch(id, page = 1, show = false, view = explorerDetailView(id, page, show)) {
  currentExplorerView = null
  loadedExplorerListPage = null
  const list = $("#search-list")
  const detail = $("#search-detail")
  const exifTypes = getExifTypes()
  const sortBookmarks = $("#sort-bookmarks").checked
  list.innerHTML = ""
  detail.classList.remove("hidden")
  $("#detail-title").textContent = id
  $("#detail-stats").textContent = ""
  $("#pager").innerHTML = ""
  $("#download-all").classList.add("hidden")
  if (!show) $("#results-grid").replaceChildren()
  $("#btn-back").onclick = () => { location.hash = "#/explorer" }
  const reclass = await loadReclass(id)
  if (reclass) {
    $("#bookmark-sort").classList.add("hidden")
    detail.classList.add("reclass-detail")
    renderReclassDetail(reclass)
    currentExplorerView = view
    return
  }
  $("#bookmark-sort").classList.remove("hidden")
  detail.classList.remove("reclass-detail")
  $("#detail-stats").classList.remove("reclass-stats")
  $("#results-grid").classList.remove("log-grid")
  renderExifFilters(id, show)
  if (!show) {
    $("#detail-stats").textContent = "Loading counts..."
    try {
      const resp = await fetch(`/api/result_counts/${encodeURIComponent(id)}`)
      const data = await resp.json()
      if (data.error) { $("#detail-stats").textContent = data.error; return }
      renderExifFilters(id, show, data.type_counts || {})
      $("#detail-stats").textContent = `${data.found_exif}/${data.raw_total} found | ${data.scanned_count}/${data.raw_total} scanned`
      currentExplorerView = view
    } catch (e) {
      $("#detail-stats").textContent = e.message
    }
    return
  }

  $("#detail-stats").textContent = "Loading..."

  try {
    const typesParam = exifTypes.length ? exifTypes.join(",") : "none"
    const url = `/api/results/${encodeURIComponent(id)}?page=${page}&exif_types=${typesParam}&sort_bookmarks=${sortBookmarks}`
    const resp = await fetch(url)
    const data = await resp.json()
    if (data.error) { $("#detail-stats").textContent = data.error; return }
    renderExifFilters(id, show, data.type_counts || {})

    $("#detail-stats").textContent = `${data.total}/${data.raw_total} shown | ${data.scanned_count}/${data.raw_total} scanned`
    const input = $("#download-through")
    input.max = data.raw_total
    if (input.dataset.id !== id) input.value = data.raw_total
    input.dataset.id = id
    $("#download-all").classList.remove("hidden")

    renderPager(id, data)
    renderResults(data)
    currentExplorerView = view
  } catch (e) {
    $("#detail-stats").textContent = e.message
  }
}

async function loadReclass(id) {
  if (!id.endsWith("_reclass")) return null
  try {
    const resp = await fetch(`/api/reclass/${encodeURIComponent(id)}`)
    const data = await resp.json()
    return data.error ? null : data
  } catch {
    return null
  }
}

function renderReclassDetail(data) {
  const grid = $("#results-grid")
  $("#search-detail").classList.add("reclass-detail")
  $("#exif-filters").innerHTML = ""
  $("#pager").innerHTML = ""
  const filters = (data.summary.filters || data.filters.map(code => CATEGORY_NAMES[code] || code)).join(", ")
  const stats = $("#detail-stats")
  stats.classList.add("reclass-stats")
  if (!stats.querySelector("[data-stat]")) {
    stats.innerHTML = `<span class="reclass-count" data-stat="changed"></span>
      <span class="reclass-count" data-stat="scanned"></span>
      <span data-stat="filters"></span>
      <span class="reclass-phase" data-stat="phase"></span>`
  }
  stats.querySelector('[data-stat="changed"]').textContent = `${data.changed}/${data.total} changed`
  stats.querySelector('[data-stat="scanned"]').textContent = `${data.scanned}/${data.total} scanned`
  stats.querySelector('[data-stat="filters"]').textContent = filters
  stats.querySelector('[data-stat="phase"]').textContent = data.active ? data.active.phase : ""
  const log = data.log.length
    ? data.log.map(item => `<div class="log-row">
        <span>${esc(item.post_id)}</span>
        <span>${esc(item.from)}</span>
        <span>${esc(item.to)}</span>
      </div>`).join("")
    : `<div class="empty-log">No classification changes</div>`
  grid.classList.add("log-grid")
  const panel = grid.querySelector(".reclass-panel")
  if (panel && panel.querySelector("[data-count]")) {
    panel.querySelector('[data-count="total"]').textContent = data.total
    panel.querySelector('[data-count="scanned"]').textContent = data.scanned
    panel.querySelector('[data-count="changed"]').textContent = data.changed
    const list = panel.querySelector(".log-list")
    if (list.innerHTML !== log) {
      const scrollTop = list.scrollTop
      list.innerHTML = log
      list.scrollTop = scrollTop
    }
  } else {
    grid.innerHTML = `<div class="reclass-panel">
      <h2>Summary</h2>
      <div class="summary-grid">
        <div class="summary-item"><span>Total</span><strong data-count="total">${data.total}</strong></div>
        <div class="summary-item"><span>Scanned</span><strong data-count="scanned">${data.scanned}</strong></div>
        <div class="summary-item"><span>Changed</span><strong data-count="changed">${data.changed}</strong></div>
      </div>
      <h2>Detailed log</h2>
      <div class="log-head"><span>Post ID</span><span>From</span><span>To</span></div>
      <div class="log-list">${log}</div>
    </div>`
  }
}

function pageSuffix(url) {
  if (!url) return ""
  const m = url.match(/_p(\d+)\./)
  return m ? `_p${m[1]}` : ""
}

function resultCardKey(item) {
  return `${item.post_id}|${item.url || ""}|${(item.pages || []).join(",")}|${(item.exif_types || []).join(",")}|${item.bookmark_count ?? ""}`
}

function resultBadge(item) {
  if (!item.scanned) return `<span class="result-badge not-scanned">not scanned</span>`
  const types = item.exif_types?.length ? item.exif_types : item.exif_type ? [item.exif_type] : []
  if (!types.length) return `<span class="result-badge no-exif">NIL</span>`
  return `<span class="result-badges">${types.map(type =>
    `<span class="result-badge exif-badge exif-${type}">${EXIF_NAMES[type] || "?"}</span>`
  ).join("")}</span>`
}

function resultCardHtml(item, eager) {
  const pid = item.post_id
  const pg = item.url ? pageSuffix(item.url) : ""
  const label = pid + pg
  const index = item.scan_index || 0
  const pageCount = item.page_count || 1
  const download = item.download_url ? `<a class="download-link" href="${esc(item.download_url)}">Download</a>` : ""
  const thumb = item.image_url
    ? `<button class="thumb" data-preview="${esc(item.preview_url || item.image_url)}" data-download="${esc(item.download_url || "")}"><img src="${esc(item.image_url)}" loading="${eager ? "eager" : "lazy"}" decoding="async" alt="${esc(label)}"></button>`
    : ""
  return `<div class="result-card" data-pid="${esc(pid)}">
      ${thumb}
      <div class="result-meta">
        <span class="result-link">${label}</span>
        ${download}
      </div>
      ${resultBadge(item)}
      ${pageCount > 1 ? `<span class="result-pages">${pageCount}</span>` : ""}
      <span class="result-bookmarks">${item.bookmark_count ?? "-"}</span>
      <span class="result-index">${index}</span>
    </div>`
}

function createResultCard(item, eager = false) {
  const template = document.createElement("template")
  template.innerHTML = resultCardHtml(item, eager).trim()
  const card = template.content.firstElementChild
  card.querySelector(".result-link").addEventListener("click", () => {
    window.open(`https://www.pixiv.net/artworks/${card.dataset.pid}`, "_blank")
  })
  const thumb = card.querySelector(".thumb")
  if (thumb) {
    const img = thumb.querySelector("img")
    thumb.addEventListener("click", () => openViewer(item))
    img.addEventListener("load", () => thumb.classList.add("thumb-loaded"))
    img.addEventListener("error", () => thumb.classList.add("thumb-error"))
    if (img.complete) thumb.classList.add(img.naturalWidth ? "thumb-loaded" : "thumb-error")
  }
  return card
}

function renderResults(data) {
  viewerItems = data.items
  const cards = data.items.map((item, index) => {
    const key = resultCardKey(item)
    let card = resultCardCache.get(key)
    if (!card || card.querySelector(".thumb-error")) {
      card = createResultCard(item, index < EAGER_IMAGE_COUNT)
      resultCardCache.set(key, card)
    }
    return card
  })
  $("#results-grid").replaceChildren(...cards)
}

function renderPostSearchResults(items) {
  viewerItems = items
  const cards = items.map((item, index) => {
    const key = resultCardKey(item)
    let card = postSearchCardCache.get(key)
    if (!card || card.querySelector(".thumb-error")) {
      card = createResultCard(item, index < EAGER_IMAGE_COUNT)
      postSearchCardCache.set(key, card)
    }
    return card
  })
  $("#post-search-grid").replaceChildren(...cards)
}

function openViewer(item) {
  if (!item.preview_url && !item.image_url) return
  viewerFocus = document.activeElement
  viewerItemIndex = Math.max(viewerItems.findIndex(row => row.post_id === item.post_id), 0)
  setViewerItem(item)
  viewerScale = 1
  $("#viewer").classList.remove("hidden")
  $("#viewer").setAttribute("aria-hidden", "false")
  $("#viewer").focus({ preventScroll: true })
  showViewerPage()
}

function setViewerItem(item) {
  viewerPostId = item.post_id
  const pages = item.pages?.length ? item.pages : [item.page || 0]
  const enabled = new Set(getExifTypes())
  const hasTags = item.exif_types?.length
  viewerPages = pages.filter(page => {
    const type = Number(item.page_types?.[page] ?? item.exif_type ?? 0)
    return enabled.has(type) && (type || !hasTags)
  })
  if (!viewerPages.length) viewerPages = pages
  viewerPageIndex = Math.max(viewerPages.indexOf(item.page || 0), 0)
}

function showViewerPage() {
  const page = viewerPages[viewerPageIndex]
  const pid = encodeURIComponent(viewerPostId)
  $("#viewer-img").src = `/api/i/${pid}/v?p=${page}&v=${IMAGE_URL_VERSION}`
  $("#viewer-download").href = `/api/i/${pid}/o?p=${page}&v=${IMAGE_URL_VERSION}`
  $("#viewer-prev").disabled = viewerPageIndex <= 0
  $("#viewer-next").disabled = viewerPageIndex >= viewerPages.length - 1
  $("#viewer-prev").classList.toggle("hidden", viewerPages.length <= 1)
  $("#viewer-next").classList.toggle("hidden", viewerPages.length <= 1)
  viewerScale = 1
  viewerX = 0
  viewerY = VIEWER_GAP
  applyViewerZoom()
}

function moveViewerPage(step) {
  const next = Math.min(Math.max(viewerPageIndex + step, 0), viewerPages.length - 1)
  if (next === viewerPageIndex) return
  viewerPageIndex = next
  showViewerPage()
}

function moveViewerPost(step) {
  const next = Math.min(Math.max(viewerItemIndex + step, 0), viewerItems.length - 1)
  if (next === viewerItemIndex) return
  viewerItemIndex = next
  setViewerItem(viewerItems[next])
  showViewerPage()
}

function closeViewer() {
  $("#viewer").classList.add("hidden")
  $("#viewer").setAttribute("aria-hidden", "true")
  $("#viewer-img").src = ""
  $("#viewer-download").href = ""
  viewerPostId = ""
  viewerPages = []
  viewerDrag = null
  $("#viewer-stage").classList.remove("dragging")
  viewerFocus?.focus({ preventScroll: true })
  viewerFocus = null
}

function applyViewerZoom() {
  $("#viewer-img").style.transform = `translate3d(${viewerX}px, ${viewerY}px, 0) scale(${viewerScale})`
  $("#viewer-zoom").textContent = `${Math.round(viewerScale * 100)}%`
}

function resetViewerZoom() {
  const stage = $("#viewer-stage")
  viewerScale = 1
  viewerX = (stage.clientWidth - $("#viewer-img").naturalWidth) / 2
  viewerY = VIEWER_GAP
  applyViewerZoom()
}

function zoomViewer(scale, x, y) {
  const next = Math.min(Math.max(scale, VIEWER_MIN_SCALE), VIEWER_MAX_SCALE)
  if (next === viewerScale) return
  const rect = $("#viewer-stage").getBoundingClientRect()
  const anchorX = (x ?? rect.left + rect.width / 2) - rect.left
  const anchorY = (y ?? rect.top + rect.height / 2) - rect.top
  const ratio = next / viewerScale
  viewerX = anchorX - (anchorX - viewerX) * ratio
  viewerY = anchorY - (anchorY - viewerY) * ratio
  viewerScale = next
  applyViewerZoom()
}

$("#viewer-img").addEventListener("load", resetViewerZoom)
$("#viewer-zoom-in").addEventListener("click", () => {
  zoomViewer(viewerScale + VIEWER_BUTTON_STEP)
})

$("#viewer-zoom-out").addEventListener("click", () => {
  zoomViewer(viewerScale - VIEWER_BUTTON_STEP)
})

$("#viewer-close").addEventListener("click", closeViewer)
$("#viewer-prev").addEventListener("click", () => moveViewerPage(-1))
$("#viewer-next").addEventListener("click", () => moveViewerPage(1))
$("#viewer").addEventListener("click", e => { if (e.target.id === "viewer") closeViewer() })
$("#viewer-stage").addEventListener("wheel", e => {
  e.preventDefault()
  zoomViewer(viewerScale + (e.deltaY < 0 ? VIEWER_WHEEL_STEP : -VIEWER_WHEEL_STEP), e.clientX, e.clientY)
})
$("#viewer-stage").addEventListener("pointerdown", e => {
  if (e.button !== 0 || e.target.closest(".viewer-nav")) return
  e.preventDefault()
  const stage = $("#viewer-stage")
  viewerDrag = {
    x: e.clientX,
    y: e.clientY,
    left: viewerX,
    top: viewerY,
  }
  stage.classList.add("dragging")
  stage.setPointerCapture(e.pointerId)
})
$("#viewer-stage").addEventListener("pointermove", e => {
  if (!viewerDrag) return
  viewerX = viewerDrag.left + e.clientX - viewerDrag.x
  viewerY = viewerDrag.top + e.clientY - viewerDrag.y
  applyViewerZoom()
})
$("#viewer-stage").addEventListener("pointerup", e => {
  viewerDrag = null
  $("#viewer-stage").classList.remove("dragging")
  $("#viewer-stage").releasePointerCapture(e.pointerId)
})
$("#viewer-stage").addEventListener("pointercancel", () => {
  viewerDrag = null
  $("#viewer-stage").classList.remove("dragging")
})
$("#viewer").addEventListener("keydown", e => {
  const actions = {
    Escape: closeViewer,
    ArrowLeft: () => moveViewerPage(-1),
    ArrowRight: () => moveViewerPage(1),
    ArrowUp: () => moveViewerPost(-1),
    ArrowDown: () => moveViewerPost(1),
  }
  const action = actions[e.key]
  if (!action) return
  e.preventDefault()
  e.stopPropagation()
  action()
})

function renderPager(id, data) {
  const pager = $("#pager")
  const prev = Math.max(data.page - 1, 1)
  const next = Math.min(data.page + 1, data.pages)
  const start = data.total ? (data.page - 1) * PAGE_SIZE + 1 : 0
  const end = Math.min(data.page * PAGE_SIZE, data.total)
  pager.innerHTML = `<button class="btn-secondary" id="page-prev" ${data.page <= 1 ? "disabled" : ""}>Prev</button>
    <span>${start}-${end} of ${data.total} | page ${data.page}/${data.pages}</span>
    <button class="btn-secondary" id="page-next" ${data.page >= data.pages ? "disabled" : ""}>Next</button>`
  $("#page-prev").onclick = () => { location.hash = explorerHash(id, prev) }
  $("#page-next").onclick = () => { location.hash = explorerHash(id, next) }
}

function esc(s) {
  const d = document.createElement("div")
  d.textContent = s
  return d.innerHTML
}

async function deleteSearch(id) {
  if (!confirm(`Cancel/delete "${id}"?`)) return
  await fetch(`/api/search/${id}`, { method: "DELETE" })
  location.hash = "#/explorer"
  loadSearches(explorerPage)
}

async function renameSearch(id) {
  const newId = prompt("New name:", id)
  if (!newId || newId === id) return
  await fetch(`/api/search/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ new_id: newId })
  })
  location.hash = "#/explorer"
  loadSearches()
}

window.addEventListener("hashchange", route)
renderCategoryFilters("#deep-scan-filters", EXIF_CODES)
renderCategoryFilters("#reclass-filters")
syncDeepScanTargets()
if (!location.hash) location.hash = "#/submit"
route()