import { BundleType, getBundleType, getVersion } from '@tauri-apps/api/app'
import { invoke } from '@tauri-apps/api/core'
import { listen } from '@tauri-apps/api/event'
import { openUrl } from '@tauri-apps/plugin-opener'
import { relaunch } from '@tauri-apps/plugin-process'
import { check, type Update } from '@tauri-apps/plugin-updater'
import './styles.css'

type CaptureMode = 'raw-proxy' | 'spool-folder' | 'both'

type AppConfig = {
  mode: CaptureMode
  listenAddr: string
  forwardAddr: string
  spoolDir: string
  apiBaseUrl: string
  issuer: string
  clientId: string
  stationId: string
  installationId: string
  deviceId?: string | null
}

type Barcode = { format: string; value: string }

type Job = {
  id: string
  source: string
  label: string
  bytes: number
  barcodes: Barcode[]
  capturedAt: string
  forwarded: boolean
  error?: string | null
}

type Status = {
  running: boolean
  mode: CaptureMode
  pending: number
  jobs: number
}

type LoginStart = {
  userCode: string
  verificationUri: string
  verificationUriComplete?: string | null
  expiresIn: number
  interval: number
}

const app = document.querySelector<HTMLDivElement>('#app')!
let config: AppConfig
let jobs: Job[] = []
let status: Status
let loginTimer: number | undefined
let currentVersion = '0.1.1'
let bundleType: BundleType | null = null
let availableUpdate: Update | null = null
let updateBusy = false

app.innerHTML = `
  <div class="shell">
    <header>
      <div class="brand">
        <div class="mark">FL</div>
        <div><h1>FieldLens Print</h1><p class="subtitle">Digital barcode capture before the label leaves the printer.</p></div>
      </div>
      <div id="status-pill" class="status"><span class="dot"></span><span>Loading</span></div>
    </header>

    <div class="grid">
      <section class="card">
        <div class="card-head"><h2>Capture</h2><span class="muted">RAW + spool routes</span></div>
        <div class="card-body">
          <div class="fields">
            <label>Capture mode
              <select id="mode">
                <option value="raw-proxy">RAW 9100 proxy</option>
                <option value="spool-folder">Spool / virtual-printer drop</option>
                <option value="both">Both routes</option>
              </select>
            </label>
            <label>Listen address
              <input id="listenAddr" placeholder="127.0.0.1:9100" />
            </label>
            <label>Forward printer
              <input id="forwardAddr" placeholder="10.0.0.50:9100" />
              <span class="help">Leave blank for capture-only testing.</span>
            </label>
            <label>Spool capture folder
              <input id="spoolDir" placeholder="C:\\Users\\me\\FieldLensPrint\\spool" />
              <span class="help">Accepts .zpl, .raw, .prn and .spl drops from a virtual/print-to-file route.</span>
            </label>
          </div>
          <div class="actions">
            <button class="btn" id="save">Save settings</button>
            <button class="btn primary" id="start">Start capture</button>
            <button class="btn stop" id="stop">Stop</button>
          </div>
        </div>
      </section>

      <section class="card">
        <div class="card-head"><h2>FieldLens</h2><span class="muted">Device login</span></div>
        <div class="card-body">
          <div class="metrics">
            <div class="metric"><b id="job-count">0</b><span>Jobs</span></div>
            <div class="metric"><b id="code-count">0</b><span>Codes</span></div>
            <div class="metric"><b id="pending-count">0</b><span>Pending</span></div>
          </div>
          <div class="login-box">
            <div id="login-state" class="muted">Not signed in.</div>
            <div id="login-code" class="login-code"></div>
            <div class="actions">
              <button class="btn blue" id="login">Sign in</button>
              <button class="btn" id="sync">Sync now</button>
            </div>
          </div>
          <details style="margin-top:14px">
            <summary class="muted">Connection settings</summary>
            <div class="fields" style="margin-top:12px">
              <label class="full">FieldLens API<input id="apiBaseUrl" /></label>
              <label class="full">Keycloak issuer<input id="issuer" /></label>
              <label>Desktop client<input id="clientId" /></label>
              <label>Station ID<input id="stationId" placeholder="optional" /></label>
            </div>
          </details>

          <div class="update-box">
            <div>
              <strong>App updates</strong>
              <span id="version-label" class="muted">Version …</span>
              <small id="update-state" class="muted">Checking for updates shortly after startup.</small>
            </div>
            <div class="actions update-actions">
              <button class="btn" id="check-update">Check for updates</button>
              <button class="btn blue" id="install-update" hidden>Download & restart</button>
            </div>
            <div id="update-progress" class="update-progress" hidden><span></span></div>
          </div>
        </div>
      </section>

      <section class="card" style="grid-column: 1 / -1">
        <div class="card-head"><h2>Recent print jobs</h2><span id="job-hint" class="muted">Waiting for capture</span></div>
        <div class="card-body"><div id="jobs" class="jobs"></div></div>
      </section>
    </div>
  </div>
`

function el<T extends HTMLElement>(id: string) {
  return document.getElementById(id) as T
}

function readForm(): AppConfig {
  return {
    ...config,
    mode: el<HTMLSelectElement>('mode').value as CaptureMode,
    listenAddr: el<HTMLInputElement>('listenAddr').value.trim(),
    forwardAddr: el<HTMLInputElement>('forwardAddr').value.trim(),
    spoolDir: el<HTMLInputElement>('spoolDir').value.trim(),
    apiBaseUrl: el<HTMLInputElement>('apiBaseUrl').value.trim(),
    issuer: el<HTMLInputElement>('issuer').value.trim(),
    clientId: el<HTMLInputElement>('clientId').value.trim(),
    stationId: el<HTMLInputElement>('stationId').value.trim(),
  }
}

function writeForm(next: AppConfig) {
  el<HTMLSelectElement>('mode').value = next.mode
  el<HTMLInputElement>('listenAddr').value = next.listenAddr
  el<HTMLInputElement>('forwardAddr').value = next.forwardAddr
  el<HTMLInputElement>('spoolDir').value = next.spoolDir
  el<HTMLInputElement>('apiBaseUrl').value = next.apiBaseUrl
  el<HTMLInputElement>('issuer').value = next.issuer
  el<HTMLInputElement>('clientId').value = next.clientId
  el<HTMLInputElement>('stationId').value = next.stationId
}

function render() {
  const pill = el<HTMLDivElement>('status-pill')
  pill.classList.toggle('live', status?.running ?? false)
  pill.querySelector('span:last-child')!.textContent = status?.running ? `Capturing · ${status.mode}` : 'Stopped'
  el('job-count').textContent = String(status?.jobs ?? jobs.length)
  el('code-count').textContent = String(jobs.reduce((sum, job) => sum + job.barcodes.length, 0))
  el('pending-count').textContent = String(status?.pending ?? 0)
  el('job-hint').textContent = jobs.length ? `${jobs.length} retained locally` : 'Waiting for capture'

  el('jobs').innerHTML = jobs.length ? jobs.map((job) => `
    <article class="job">
      <div class="job-top"><span>${escapeHtml(job.source)} · ${escapeHtml(job.label)}</span><span>${new Date(job.capturedAt).toLocaleTimeString()}</span></div>
      <strong>${job.barcodes.length ? `${job.barcodes.length} barcode${job.barcodes.length === 1 ? '' : 's'} detected` : '<span class="warn">No supported barcode command detected</span>'}</strong>
      <div class="codes">${job.barcodes.map((code) => `<span class="code">${escapeHtml(code.format)} · ${escapeHtml(code.value)}</span>`).join('')}</div>
      <div class="muted small" style="margin-top:7px">${job.bytes.toLocaleString()} bytes · ${job.forwarded ? 'forwarded' : 'not forwarded'}${job.error ? ` · <span class="error">${escapeHtml(job.error)}</span>` : ''}</div>
    </article>
  `).join('') : '<div class="muted">No jobs captured yet.</div>'
}

function escapeHtml(value: string) {
  return value.replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[char]!))
}

async function refreshStatus() {
  status = await invoke<Status>('get_status')
  jobs = await invoke<Job[]>('recent_jobs')
  render()
}

el('save').addEventListener('click', async () => {
  config = await invoke<AppConfig>('save_config', { config: readForm() })
  writeForm(config)
  await refreshStatus()
})

el('start').addEventListener('click', async () => {
  config = await invoke<AppConfig>('save_config', { config: readForm() })
  await invoke('start_capture')
  await refreshStatus()
})

el('stop').addEventListener('click', async () => {
  await invoke('stop_capture')
  await refreshStatus()
})

el('sync').addEventListener('click', async () => {
  const result = await invoke<{ synced: number; pending: number }>('sync_pending')
  el('login-state').textContent = `Synced ${result.synced}. ${result.pending} pending.`
  await refreshStatus()
})

el('login').addEventListener('click', async () => {
  const session = await invoke<LoginStart>('begin_login')
  el('login-code').textContent = session.userCode
  el('login-state').textContent = 'Authorize this device in your browser…'
  const target = session.verificationUriComplete || session.verificationUri
  await openUrl(target)

  if (loginTimer) window.clearInterval(loginTimer)
  loginTimer = window.setInterval(async () => {
    try {
      const result = await invoke<{ status: string }>('poll_login')
      if (result.status === 'authorized') {
        window.clearInterval(loginTimer)
        loginTimer = undefined
        el('login-state').textContent = 'Signed in to FieldLens.'
        el('login-code').textContent = ''
      } else if (result.status === 'expired' || result.status === 'denied') {
        window.clearInterval(loginTimer)
        loginTimer = undefined
        el('login-state').textContent = `Login ${result.status}.`
      }
    } catch (error) {
      el('login-state').textContent = String(error)
    }
  }, Math.max(3, session.interval) * 1000)
})

async function checkForUpdates(manual = false) {
  if (updateBusy) return
  const state = el('update-state')
  const installButton = el<HTMLButtonElement>('install-update')
  const checkButton = el<HTMLButtonElement>('check-update')

  try {
    checkButton.disabled = true
    state.textContent = manual ? 'Checking for updates…' : 'Checking quietly for updates…'
    const update = await check()
    availableUpdate = update

    if (!update) {
      installButton.hidden = true
      state.textContent = `FieldLens Print ${currentVersion} is up to date.`
      return
    }

    state.textContent = `Version ${update.version} is available.`
    installButton.hidden = false
    installButton.textContent = bundleType === BundleType.Deb ? 'Open Linux installer' : 'Download & restart'
  } catch (error) {
    if (manual) state.textContent = `Update check failed: ${String(error)}`
    else state.textContent = 'Automatic update check unavailable. You can retry manually.'
  } finally {
    checkButton.disabled = false
  }
}

async function installAvailableUpdate() {
  if (!availableUpdate || updateBusy) return

  const state = el('update-state')
  const button = el<HTMLButtonElement>('install-update')
  const progress = el<HTMLDivElement>('update-progress')
  const bar = progress.querySelector('span') as HTMLSpanElement

  if (bundleType === BundleType.Deb) {
    state.textContent = 'Debian packages update through the Linux installer.'
    await openUrl('https://fieldlens.arrowstack.dev/downloads')
    return
  }

  if (status?.running) {
    state.textContent = 'Stop capture before installing an update.'
    return
  }

  updateBusy = true
  button.disabled = true
  progress.hidden = false
  bar.style.width = '8%'
  let downloaded = 0
  let total = 0

  try {
    state.textContent = `Downloading FieldLens Print ${availableUpdate.version}…`
    await availableUpdate.downloadAndInstall((event) => {
      if (event.event === 'Started') {
        total = event.data.contentLength ?? 0
        downloaded = 0
        bar.style.width = '10%'
      } else if (event.event === 'Progress') {
        downloaded += event.data.chunkLength
        if (total > 0) {
          const percent = Math.min(92, Math.max(10, Math.round((downloaded / total) * 100)))
          bar.style.width = `${percent}%`
        }
      } else if (event.event === 'Finished') {
        bar.style.width = '100%'
        state.textContent = 'Update installed. Restarting…'
      }
    })

    await relaunch()
  } catch (error) {
    state.textContent = `Update failed: ${String(error)}`
    progress.hidden = true
  } finally {
    updateBusy = false
    button.disabled = false
  }
}

el('check-update').addEventListener('click', () => { void checkForUpdates(true) })
el('install-update').addEventListener('click', () => { void installAvailableUpdate() })

await listen<Job>('capture-job', (event) => {
  jobs = [event.payload, ...jobs.filter((job) => job.id !== event.payload.id)].slice(0, 200)
  void refreshStatus()
})

config = await invoke<AppConfig>('get_config')
writeForm(config)
await refreshStatus()

currentVersion = await getVersion()
bundleType = await getBundleType().catch(() => null)
el('version-label').textContent = `Version ${currentVersion}${bundleType ? ` · ${bundleType}` : ''}`

window.setTimeout(() => { void checkForUpdates(false) }, 3000)
window.setInterval(() => { void refreshStatus() }, 5000)