// VPN: this machine's WireGuard tunnels, and the devices on them.
//
// Per machine, like every other tab, which here is the whole point: the tunnel people dial
// into and a tunnel this machine dials out through are different machines, and showing them
// together would invite the question "which box is this actually on".
import { useCallback, useEffect, useState } from 'react'
import { api, VPNReport, VPNPeer, VPNTunnel } from './api'
import { fmtBytes } from './fmt'
import { Loading } from './ui'
import { useRefreshMs } from './prefs'

// WireGuard says nothing when it has nothing to say, so "online" is a handshake in the last
// few minutes rather than a connection — there is no connection to have.
const ago = (iso?: string) => {
  if (!iso) return 'never'
  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000)
  if (s < 60) return `${Math.floor(s)}s ago`
  if (s < 3600) return `${Math.floor(s / 60)} min ago`
  if (s < 86400) return `${Math.floor(s / 3600)} h ago`
  return `${Math.floor(s / 86400)} d ago`
}

// A public key is long and nobody reads the middle of it; the ends are what you compare.
const shortKey = (k: string) => (k.length > 16 ? `${k.slice(0, 8)}…${k.slice(-6)}` : k)

function Peer({ p, server }: { p: VPNPeer; server: boolean }) {
  return (
    <div className="card iface vpn-peer">
      <div className="sub-head">
        <span className={'sdot ' + (p.online ? 'ok' : p.handshake ? '' : 'bad')} />
        <span className="dname">{p.name || <span className="muted">unnamed</span>}</span>
        {p.online && <span className="badge ok">online</span>}
        {!p.handshake && <span className="badge">never connected</span>}
        <span className="spacer" />
        <span className="muted small mono">{(p.allowed_ips ?? []).join(', ')}</span>
      </div>
      <div className="props">
        <div><span className="k">Last handshake</span><span>{ago(p.handshake)}</span></div>
        {p.endpoint && <div><span className="k">{server ? 'Comes from' : 'Endpoint'}</span><span className="mono">{p.endpoint}</span></div>}
        <div><span className="k">Moved</span><span className="mono">↓ {fmtBytes(p.rx)} · ↑ {fmtBytes(p.tx)}</span></div>
        {!!p.keepalive && <div><span className="k">Keepalive</span><span>every {p.keepalive}s</span></div>}
        <div><span className="k">Public key</span><span className="mono" title={p.public_key}>{shortKey(p.public_key)}</span></div>
        {p.psk && <div><span className="k">Pre-shared key</span><span>in use</span></div>}
      </div>
    </div>
  )
}

function Tunnel({ t }: { t: VPNTunnel }) {
  const server = t.kind === 'server'
  const online = t.peers.filter((p) => p.online).length
  return (
    <>
      <div className="dash-bar">
        <h2 className="section">{t.name}</h2>
        <span className="badge">{server ? 'devices dial in' : t.kind === 'client' ? 'this machine dials out' : 'tunnel'}</span>
        <span className="spacer" />
        <span className="muted small">{server ? `${online} of ${t.peers.length} online` : t.exit ? `via ${t.exit}` : ''}</span>
      </div>
      <section className="card">
        <div className="props">
          {!!t.addrs?.length && <div><span className="k">Address</span><span className="mono">{t.addrs.join(', ')}</span></div>}
          {!!t.listen_port && <div><span className="k">Listening on</span><span className="mono">{t.listen_port}/udp</span></div>}
          {!!t.mtu && <div><span className="k">MTU</span><span>{t.mtu}</span></div>}
          <div><span className="k">Public key</span><span className="mono" title={t.public_key}>{shortKey(t.public_key)}</span></div>
          {t.fwmark && <div><span className="k">Firewall mark</span><span className="mono">{t.fwmark}</span></div>}
        </div>
      </section>
      {t.peers.map((p) => <Peer key={p.public_key} p={p} server={server} />)}
      {t.peers.length === 0 && <section className="card"><div className="empty">No peers are configured on this tunnel.</div></section>}
    </>
  )
}

export default function VPN() {
  const [d, setD] = useState<VPNReport | null>(null)
  const [err, setErr] = useState('')
  const rate = useRefreshMs()
  const load = useCallback(async () => {
    try { setD(await api.vpn()); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
  }, [])
  useEffect(() => { load() }, [load])
  // Handshakes and counters move; nothing here is expensive to read.
  useEffect(() => {
    const t = setInterval(() => { if (document.visibilityState === 'visible') load() }, Math.max(5000, rate))
    return () => clearInterval(t)
  }, [load, rate])

  if (!d) return <div className="dash">{err ? <div className="notice">{err === 'not found' ? "This machine's Ham Lab is older than the VPN tab. Update it from Machines." : err}</div> : <Loading label="Reading the tunnels…" />}</div>

  return (
    <div className="dash net">
      {d.tunnels.length === 0 && (
        <>
          <div className="dash-bar"><h2 className="section">VPN</h2></div>
          <section className="card"><div className="empty">{d.note || 'Nothing here.'}</div>
            <div className="muted small" style={{ marginTop: 6 }}>
              Tunnels are the machine's own, so look on the one that carries them — the switcher at the top of the rail.
            </div>
          </section>
        </>
      )}
      {d.tunnels.map((t) => <Tunnel key={t.name} t={t} />)}
      {d.tunnels.length > 0 && (
        <div className="muted small method" style={{ marginTop: 12 }}>
          Read from the kernel with <span className="mono">wg show</span>; names come from the configuration beside it.
          Online means a handshake in the last three minutes — WireGuard is silent when idle, so there is no connection to be in.
          Private and pre-shared keys are never read.
        </div>
      )}
    </div>
  )
}