// The globe's nerd stats drawn where they belong (owner decision 2026-10-06: instruments in the scene, not a table): the
// Sun's ray to the point it stands over, the day/night line and the twilights, the declination and the noon meridian;
// a focused post's horizon, its Sun's height and its day; the tropics and the polar circles; the view's centre and
// reach and the posts in view; the Sun's track through the year; a small orrery with the Earth–Sun distance and the
// seasons; and the frame rate as a ring around the globe. Numbers are small chips beside their drawings.
//
// It costs nothing while the globe is idle: its geometry changes only where globe.js has already woken the globe (the
// Sun moving, the view flying, a hover, the theme, a resize), and the chips are placed after each frame globe.gl
// renders (scene.onAfterRender). three.js's classes come from objects globe.gl already made: the bundle does not expose
// THREE, and defining it would mix two copies. Where they can't be found, only the ring and the legend remain.
import { analemma, seasonsOf, sunAtPlace } from "./sun.js"

const RAD = Math.PI / 180
const R = 100//the globe's radius in scene units
const DoubleSide = 2//three.js's DoubleSide: the bundle does not expose THREE
const BANNER = 320//a canvas less tall than this is a phone's banner: the day/night line and the subsolar point only
const PERIHELION = 103//the Earth's heliocentric longitude at perihelion (the Sun's ≈283°; it drifts 1.7° a century)
const ECCENTRICITY = 0.117//the orbit's 0.0167, seven times: drawn true it would look like a circle

export function createInstruments(globe, host, options) {
	const labels = options?.labels ?? {}
	const language = options?.language || undefined
	const colour = options?.colour
	const text = (key, ...args) => (labels[key] ?? key).replace(/\{(\d)\}/g, (_, i) => args[+i] ?? "")
	const decimals = digits => new Intl.NumberFormat(language, { minimumFractionDigits: digits, maximumFractionDigits: digits })
	const fixed2 = decimals(2), fixed1 = decimals(1), whole = decimals(0), au = decimals(5)
	const coordinates = (lat, lng) => `${fixed2.format(lat)}, ${fixed2.format(lng)}`

	const overlay = document.createElement("div")
	overlay.className = "globe-instruments"
	overlay.setAttribute("aria-hidden", "true")
	host.appendChild(overlay)
	const ring = ringElement(overlay)
	const legend = document.createElement("div")
	legend.className = "globe-legend"
	overlay.appendChild(legend)
	const description = host.parentElement?.querySelector("[data-globe-view-description]") ?? null

	let size = { width: host.clientWidth, height: host.clientHeight }
	let full = size.height >= BANNER
	let failed = false//the chips threw once: they stay where they are
	let tries = 0//renders that looked for three.js's classes; globe.gl adds its globe on its first update, after this
	let frames = 0
	let cameraText = ""
	let cameraAt = 0
	const facts = { points: 0, posts: 0, servers: 0, cdnGroups: 0, countries: 0, named: 0, borders: 0, night: false, anisotropy: 0, renderer: null }
	const fps = { value: 0, idle: false, paused: false, autoRotate: false }
	const chips = []
	let placed = []

	// what is drawn, and what it says: built on the first render that finds the globe (see attach)
	const scene = globe.scene()
	let three = null, root = null, parts = null, tags = null, missing = null
	const previous = scene.onAfterRender
	scene.onAfterRender = (...args) => {
		previous?.(...args)
		frame()
	}
	const before = scene.onBeforeRender
	scene.onBeforeRender = (...args) => {
		before?.(...args)
		if (!parts && tries >= 0)
			attach()
		placeOrrery()
	}

	let sun = null, point = null, focus = null, view = null, spreadKm = 0, arc = null, track = [], lastView = null, orreryBox = null
	let legendBox = null
	const Vector3 = globe.camera().position.constructor
	const temp = new Vector3()
	const temp2 = new Vector3()

	function buildParts() {
		const lines = alpha => new three.LineBasicMaterial({ transparent: true, opacity: alpha, depthWrite: false })
		const fills = (alpha, side = 0) => new three.MeshBasicMaterial({ transparent: true, opacity: alpha, depthWrite: false, side })
		const hud = material => {
			material.depthTest = false
			return material
		}
		const part = {}

		// the Sun: built around +Z, pointed at the subsolar point
		part.sunRig = group("YXZ")
		part.marker = segments(dashed(circle(1.5, R * 1.003, 48), false), lines(0.95), "sun")
		part.dot = mesh(sphere(0.9, 12, 8), fills(1), "sun")
		part.dot.position.set(0, 0, R * 1.004)
		part.ray = polyline([v(0, 0, R * 1.004), v(0, 0, R * 1.45)], lines(0.9), "sun")
		part.beam = mesh(beam(0.6, 2.6, R, R * 1.45, 10), fills(0.16, DoubleSide), "sun")
		part.bead = mesh(sphere(2.2, 16, 12), fills(0.95), "sun")
		part.bead.position.set(0, 0, R * 1.45)
		part.terminator = mesh(band(89.825, 90.175, R * 1.0025, 180), fills(0.55, DoubleSide), "white")
		part.twilight = [84, 96, 102, 108].map(angle => segments(dashed(circle(angle, R * 1.002, 180), true), lines(0.6), "twilight"))
		part.meridian = segments(dashed(greatCircleX(R * 1.002, 180), true), lines(0.45), "sun")
		part.sunRig.add(part.marker, part.dot, part.ray, part.beam, part.bead, part.terminator, ...part.twilight, part.meridian)

		// the declination: the subsolar meridian from the equator to the Sun's latitude
		part.meridianRig = group("XYZ")
		part.declination = polyline(arcPoints(0, 0, 24), lines(0.9), "sun")
		part.meridianRig.add(part.declination)

		// the Earth's own lines: tropics, polar circles, the CDN ring at 68°N
		part.earthRig = group("XYZ")
		part.tropics = [23.44, -23.44, 66.56, -66.56].map(lat => segments(dashed(latitudeCircle(lat, R * 1.0015, 240), true), lines(0.22), "white"))
		part.cdnRing = segments(dashed(latitudeCircle(68, R * 1.0015, 240), true), lines(0.55), "server")
		part.earthRig.add(...part.tropics, part.cdnRing)

		// the Sun's year: where it stands over at this hour each day, the stretch to the next equinox or solstice brighter
		part.year = polyline(Array.from({ length: 366 }, () => v(0, 0, R)), lines(0.3), "sun")
		part.yearNext = polyline(Array.from({ length: 366 }, () => v(0, 0, R)), lines(0.85), "sun")
		part.yearRig = group("XYZ")
		part.yearRig.add(part.year, part.yearNext)

		// a focused post's place: built around +Z, pointed at it; its Sun line, elevation and day in the scene's frame
		part.placeRig = group("YXZ")
		part.horizon = segments(dashed(circle(2, R * 1.002, 48), false), lines(0.9), "place")
		part.pole = polyline([v(0, 0, R * 1.001), v(0, 0, R * 1.07)], lines(0.9), "place")
		part.placeRig.add(part.horizon, part.pole)
		part.placeWorld = group("XYZ")
		part.sunLine = polyline([v(0, 0, 0), v(0, 0, 1)], lines(0.95), "sun")
		part.sunLineBelow = segments(dashed(Array.from({ length: 13 }, () => v(0, 0, 0)), false), lines(0.6), "sun")
		part.elevation = polyline(Array.from({ length: 17 }, () => v(0, 0, 0)), lines(0.9), "place")
		part.dayLit = polyline(Array.from({ length: 121 }, () => v(0, 0, 0)), lines(0.95), "sun")
		part.dayDark = segments(Array.from({ length: 240 }, () => v(0, 0, 0)), lines(0.4), "twilight")
		part.placeWorld.add(part.sunLine, part.sunLineBelow, part.elevation, part.dayLit, part.dayDark)

		// the view: its centre, its reach, and a ring around each placed post in view
		part.viewRig = group("YXZ")
		part.cross = segments([v(-2.2, 0, R * 1.002), v(2.2, 0, R * 1.002), v(0, -2.2, R * 1.002), v(0, 2.2, R * 1.002)], lines(0.9), "server")
		part.spread = segments(dashed(circle(10, R * 1.002, 128), true), lines(0.65), "server")
		part.viewRig.add(part.cross, part.spread)
		part.inView = segments(Array.from({ length: 32 * 24 }, () => v(0, 0, 0)), lines(0.85), "place")
		part.inView.geometry.setDrawRange(0, 0)

		// the orrery: the Sun, the orbit (eccentricity drawn sevenfold), the Earth lit on its Sun's side with its axis
		// fixed in space, ticks at the equinoxes and solstices; placed in the camera's corner before each frame
		part.orrery = group("XYZ")
		part.orrerySun = mesh(sphere(0.17, 16, 12), hud(fills(1)), "sun")
		part.orbit = polyline(Array.from({ length: 145 }, (_, i) => orbitPoint(i * 2.5)), hud(lines(0.6)), "content")
		part.ticks = segments([0, 90, 180, 270].flatMap(l => [orbitPoint(l, 0.93), orbitPoint(l, 1.07)]), hud(lines(0.8)), "content")
		part.earth = group("XYZ")
		part.earthDay = mesh(sphere(0.1, 16, 8, Math.PI / 2), hud(fills(1)), "server")
		part.earthNight = mesh(sphere(0.1, 16, 8, Math.PI / 2), hud(fills(0.9)), "night")
		part.earthNight.rotation.x = Math.PI
		part.earth.add(part.earthDay, part.earthNight)
		const tilt = 23.44 * RAD
		part.axis = polyline([v(-Math.sin(tilt) * 0.2, 0, -Math.cos(tilt) * 0.2), v(Math.sin(tilt) * 0.2, 0, Math.cos(tilt) * 0.2)], hud(lines(0.9)), "content")
		part.orrery.add(part.orrerySun, part.orbit, part.ticks, part.earth, part.axis)
		part.orrery.traverse(o => o.renderOrder = 20)
		part.orreryTilt = new (globe.camera().quaternion.constructor)().setFromAxisAngle(v(1, 0, 0), -1.05)

		root.add(part.sunRig, part.meridianRig, part.earthRig, part.yearRig, part.placeRig, part.placeWorld, part.viewRig, part.inView, part.orrery)
		return part
	}

	// the chips: what each says, where, and which goes first. Where is a point in the scene (hidden behind the globe), the
	// same never hidden ("always"), or a point on screen whose chip starts there ("screen", the orrery's); a lifted chip
	// sits that many pixels above its point, clear of what is drawn there.
	const chip = (name, priority, anchor, mode = "scene", lift = 0) => {
		const element = document.createElement("div")
		element.className = `globe-tag globe-tag-${name}`
		element.style.visibility = "hidden"
		overlay.appendChild(element)
		const made = { name, priority, anchor, mode, lift, element, text: "", width: 0, height: 0, x: NaN, y: NaN, shown: false }
		chips.push(made)
		return made
	}
	const say = (target, value) => {
		value ??= ""
		if (target.text === value)
			return
		target.text = value
		target.element.textContent = value
		target.width = target.element.offsetWidth
		target.height = target.element.offsetHeight
	}

	const ringTag = chip("ring", 0, null)

	function makeTags() {
		const made = {
			// the orrery's, first: nothing else is drawn in its corner
			distance: chip("orrery", 1, () => belowOrrery(0), "screen"),
			seasons: chip("orrery", 1, () => belowOrrery(1), "screen"),
			next: chip("orrery", 2, () => belowOrrery(2), "screen"),
			apsis: chip("orrery", 3, () => belowOrrery(3), "screen"),
			scale: chip("orrery-faint", 3, () => orreryBox ? { x: orreryBox.right + 4, y: orreryBox.middle } : null, "screen"),
			subsolar: chip("sun", 4, () => worldOf(parts.sunRig, 0, 0, R * 1.004), "scene", 12),
			place: chip("place", 5, () => focus && Number.isFinite(focus.lat) ? coords(focus.lat, focus.lng, 0.002) : null, "scene", 16),
			terminator: chip("white", 6, () => nearestOn(parts.sunRig, 90, R * 1.004)),
			view: chip("server", 9, () => view ? worldOf(parts.viewRig, 0, -3.2, R * 1.004) : null),
			spread: chip("server", 10, () => view && spreadKm > 0 ? nearestOn(parts.viewRig, Math.min(80, spreadKm / 6371 / RAD), R * 1.004) : null),
			arc: chip("server", 11, () => arcTop()),
			irradiance: chip("sun", 12, () => worldOf(parts.sunRig, 0, 0, R * 1.52)),
			declination: chip("sun", 13, () => sun ? worldOf(parts.meridianRig, 0, R * Math.sin(sun.lat * RAD / 2), R * Math.cos(sun.lat * RAD / 2)) : null),
			golden: chip("twilight", 14, () => nearestOn(parts.sunRig, 84, R * 1.004)),
			civil: chip("twilight", 15, () => nearestOn(parts.sunRig, 96, R * 1.004)),
			nautical: chip("twilight", 16, () => nearestOn(parts.sunRig, 102, R * 1.004)),
			astronomical: chip("twilight", 17, () => nearestOn(parts.sunRig, 108, R * 1.004)),
			noon: chip("sun", 18, () => worldOf(parts.sunRig, 0, R * Math.sin(25 * RAD), R * Math.cos(25 * RAD))),
			midnight: chip("sun", 19, () => worldOf(parts.sunRig, 0, R * Math.sin(205 * RAD), R * Math.cos(205 * RAD))),
			yearNext: chip("sun", 20, () => track.length > 0 ? coords(track.at(-1).lat, track.at(-1).lng, 0.02) : null),
			year: chip("sun-faint", 21, () => yearTop()),
			cancer: chip("white", 22, () => cameraLongitude(23.44)),
			capricorn: chip("white", 23, () => cameraLongitude(-23.44)),
			arctic: chip("white", 24, () => cameraLongitude(66.56)),
			antarctic: chip("white", 25, () => cameraLongitude(-66.56)),
			cdn: chip("server", 26, () => facts.cdnGroups > 0 ? cameraLongitude(68) : null)
		}
		chips.sort((a, b) => a.priority - b.priority)
		say(made.terminator, text("day/night line"))
		say(made.golden, text("golden hour"))
		say(made.civil, text("civil twilight"))
		say(made.nautical, text("nautical twilight"))
		say(made.astronomical, text("astronomical twilight"))
		say(made.noon, text("solar noon"))
		say(made.midnight, text("solar midnight"))
		say(made.year, text("this hour, all year"))
		say(made.cancer, `${text("Tropic of Cancer")} · ${text("axial tilt")} ${fixed2.format(23.44)}°`)
		say(made.capricorn, text("Tropic of Capricorn"))
		say(made.arctic, `${text("Arctic Circle")} ${fixed2.format(66.56)}°`)
		say(made.antarctic, text("Antarctic Circle"))
		say(made.scale, text("not to scale"))
		return made
	}

	// three.js's classes, once globe.gl has put its globe in the scene: the parts built and told what globe.js already
	// said. Looked for before each render until found; after 120 renders without them only the ring and the legend remain.
	function attach() {
		const found = classesOf(globe)
		if (typeof found === "string") {
			missing = found
			if (++tries < 120)
				return
			tries = -1
			console.warn(`globe.instruments: ${missing}; only the ring and the legend remain`)
			return
		}
		three = found
		try {
			root = new three.Group()
			parts = buildParts()
			scene.add(root)
			tags = makeTags()
			setColours()
			refresh()
			if (point)
				setSun(point)
			if (sun)
				setMoment(sun, focus)
			if (lastView)
				setView(...lastView)
			setArc(arc)
			setPoints({})
		} catch (e) {
			tries = -1
			parts = null
			root?.removeFromParent()
			console.error(e)
			window.logFromJs?.(e.message, "globe.instruments.attach")
		}
	}

	setSize(size.width, size.height)

	// --- what globe.js tells it ---

	function setSize(width, height) {
		size = { width, height }
		full = height >= BANNER
		overlay.dataset.detail = full ? "full" : "banner"
		ring.svg.style.display = full ? "" : "none"
		legend.style.display = full ? "" : "none"
		measureLegend()
		refresh()
	}

	// what shows: in a banner the day/night line and the subsolar point only; the place and the view when there are some
	function refresh() {
		if (!parts)
			return
		for (const object of [parts.ray, parts.beam, parts.bead, ...parts.twilight, parts.meridian, parts.meridianRig, parts.earthRig, parts.yearRig,
			parts.inView, parts.orrery])
			object.visible = full
		parts.placeRig.visible = parts.placeWorld.visible = full && !!focus && Number.isFinite(focus.lat)
		parts.viewRig.visible = full && !!view
		parts.cdnRing.visible = facts.cdnGroups > 0
	}

	// the subsolar point as it eases towards the Sun's (every frame while it travels)
	function setSun(eased) {
		point = eased
		if (!parts)
			return
		parts.sunRig.rotation.set(-eased.lat * RAD, eased.lng * RAD, 0, "YXZ")
		parts.meridianRig.rotation.set(0, eased.lng * RAD, 0)
		rewrite(parts.declination, arcPoints(0, eased.lat, 24))
		drawPlace()
	}

	// a new moment (now, or the focused post's) and the place it is focused on
	function setMoment(moment, focused) {
		sun = moment
		focus = focused
		if (!parts)
			return
		say(tags.subsolar, `${text("subsolar point")} ${coordinates(moment.lat, moment.lng)}`)
		const deviation = (moment.irradiance - 1) * 100
		say(tags.irradiance, `${text("irradiance")} ${whole.format(moment.irradiance * 1361)} W/m² (${deviation >= 0 ? "+" : "−"}${fixed1.format(Math.abs(deviation))}%)`)
		say(tags.declination, `${text("declination")} ${moment.lat >= 0 ? "+" : "−"}${fixed2.format(Math.abs(moment.lat))}°`)
		// the year from this moment, at this hour
		const seasons = seasonsOf(moment)
		track = analemma(moment.date)
		rewrite(parts.year, track.map(p => toVector(coords(p.lat, p.lng, 0.0025))))
		// the nearest and farthest the Earth comes in the year ahead, to the day: whichever is first
		let nearest = 0, farthest = 0
		track.forEach((p, day) => {
			if (p.distance < track[nearest].distance)
				nearest = day
			if (p.distance > track[farthest].distance)
				farthest = day
		})
		say(tags.apsis, nearest <= farthest
			? text("{0} in {1} days", text("perihelion"), whole.format(nearest))
			: text("{0} in {1} days", text("aphelion"), whole.format(farthest)))
		const days = Math.max(1, Math.min(365, seasons.nextEventDays))
		track = track.slice(0, days + 1)
		rewrite(parts.yearNext, track.map(p => toVector(coords(p.lat, p.lng, 0.0025))))
		parts.yearNext.geometry.setDrawRange(0, track.length)
		say(tags.yearNext, eventName(seasons.nextEvent))
		// the orrery: the Earth where it is on its orbit (the Sun's ecliptic longitude, seen from the other side)
		const earthAt = orbitXYZ(moment.eclipticLongitude + 180, 1)
		parts.earth.position.set(...earthAt)
		parts.axis.position.set(...earthAt)
		say(tags.distance, `${au.format(moment.distance)} AU · ${whole.format(moment.distance * 149597870.7)} km`)
		say(tags.seasons, text("{0} in the north, {1} in the south", seasonName(seasons.north), seasonName(seasons.south)))
		say(tags.next, text("{0} in {1} days", eventName(seasons.nextEvent), whole.format(seasons.nextEventDays)))
		const place = focus && Number.isFinite(focus.lat) ? sunAtPlace(moment, focus.lat, focus.lng) : null
		refresh()
		if (place) {
			parts.placeRig.rotation.set(-focus.lat * RAD, focus.lng * RAD, 0, "YXZ")
			const phase = place.phase === "day" ? text("daylight") : place.phase === "night" ? text("night")
				: text("{0}, {1}", text(`${place.phase === "golden" ? "golden hour" : `${place.phase} twilight`}`), text(place.morning ? "morning" : "evening"))
			const day = place.dayLength >= 24 ? text("the Sun never sets") : place.dayLength <= 0 ? text("the Sun never rises")
				: `${text("day length")} ${Math.floor(place.dayLength)} h ${String(Math.round(place.dayLength % 1 * 60)).padStart(2, "0")} min`
			say(tags.place, [
				[focus.label || coordinates(focus.lat, focus.lng), phase, text("solar time {0}", place.solarTime)].join(" · "),
				`${text("elevation")} ${place.elevation >= 0 ? "" : "−"}${fixed1.format(Math.abs(place.elevation))}° · ${day}`
			].join("\n"))
			tags.place.element.dataset.phase = place.phase
		} else
			say(tags.place, "")
		drawPlace()
	}

	// the view's centre and reach (null with no placed post in view), and the placed posts in view
	function setView(centre, reachKm, inView, counts) {
		lastView = [centre, reachKm, inView, counts]
		view = centre
		spreadKm = reachKm
		if (description)
			description.textContent = centre
				? `${text("centre of view")} ${coordinates(centre.lat, centre.lng)}; ${text("spread")} ${whole.format(reachKm)} km; ${text("in view")} ${counts.located}/${counts.visible} ${text("placed")}`
				: `${text("in view")} ${counts.located}/${counts.visible} ${text("placed")}`
		if (!parts)
			return
		refresh()
		if (centre) {
			parts.viewRig.rotation.set(-centre.lat * RAD, centre.lng * RAD, 0, "YXZ")
			rewrite(parts.spread, dashed(circle(Math.max(0.5, Math.min(80, reachKm / 6371 / RAD)), R * 1.002, 128), true))
			say(tags.view, `${text("centre of view")} ${coordinates(centre.lat, centre.lng)} · ${text("in view")} ${counts.located}/${counts.visible}`)
			say(tags.spread, `${text("spread")} ${whole.format(reachKm)} km`)
		} else {
			say(tags.view, "")
			say(tags.spread, "")
		}
		// a small ring around each placed post in view
		const points = parts.inView.geometry.attributes.position
		let n = 0
		for (const post of inView.slice(0, 32))
			for (const [a, b] of ringSegments(post.lat, post.lng, 1, 12)) {
				points.setXYZ(n++, a.x, a.y, a.z)
				points.setXYZ(n++, b.x, b.y, b.z)
			}
		points.needsUpdate = true
		parts.inView.geometry.setDrawRange(0, n)
	}

	// the hovered post's arc ({ startLat, startLng, endLat, endLng, label }), or none
	function setArc(hovered) {
		arc = hovered
		if (!tags)
			return
		say(tags.arc, hovered ? `${hovered.label ? `${hovered.label} · ` : ""}${whole.format(greatCircleKm(hovered))} km` : "")
	}

	function setPoints(counts) {
		Object.assign(facts, counts)
		refresh()
		if (tags)
			say(tags.cdn, facts.cdnGroups > 0 ? `${text("CDN groups")} ${facts.cdnGroups}` : "")
		drawLegend()
	}

	function setFacts(more) {
		Object.assign(facts, more)
		drawLegend()
	}

	// the frame rate, every second; the DOM only, so an idle globe stays idle
	function setFps(value, state) {
		Object.assign(fps, { value }, state)
		const pace = fps.paused ? "paused" : fps.idle ? "idle" : value >= 50 ? "good" : value >= 30 ? "fair" : "poor"
		ring.svg.dataset.pace = pace
		ring.value.style.strokeDasharray = pace === "idle" || pace === "paused" ? `0 ${ring.length}` : `${ring.length * Math.min(1, value / 60)} ${ring.length}`
		const rate = fps.paused ? text("paused") : fps.idle ? text("idle") : `${value} fps`
		say(ringTag, [rate, fps.autoRotate ? text("auto-rotate") : null, cameraText].filter(Boolean).join(" · "))
	}

	function setColours() {
		if (!parts || !colour)
			return
		const paint = kind => {
			const rgb = colour(kind, 1).match(/[\d.]+/g)?.slice(0, 3).join(",") ?? "128,128,128"
			return `rgb(${rgb})`
		}
		root.traverse(object => {
			if (object.userData.paint && object.material?.color)
				object.material.color.setStyle(object.userData.paint === "white" ? "rgb(255,255,255)" : paint(object.userData.paint))
		})
	}

	// the boxes the chips took, which the country names keep clear of
	function boxes() {
		return placed
	}

	function summary() {
		let error = null
		if (parts && point) {
			// as the rig stands now, not as the last frame drew it
			parts.sunRig.updateMatrixWorld(true)
			const at = worldOf(parts.sunRig, 0, 0, R)
			const want = globe.getCoords(point.lat, point.lng, 0)
			error = Math.hypot(at.x - want.x, at.y - want.y, at.z - want.z)
		}
		return { built: !!parts, missing: parts ? null : missing, tries, detail: full ? "full" : "banner", frames, chips: chips.filter(c => c.shown).length, subsolarError: error }
	}

	function dispose() {
		tries = -1
		root?.traverse(object => {
			object.geometry?.dispose?.()
			object.material?.dispose?.()
		})
		root?.removeFromParent()
		scene.onAfterRender = () => { }
		scene.onBeforeRender = () => { }
		overlay.remove()
	}

	// --- after each frame globe.gl renders: the chips placed, and the ring around the globe ---

	function frame() {
		if (failed)
			return
		try {
			frames++
			const camera = globe.camera()
			const now = performance.now()
			if (now - cameraAt > 100) {
				cameraAt = now
				const pov = globe.pointOfView()
				const next = `${text("camera")} ${coordinates(pov.lat, pov.lng)} @ ${fixed2.format(pov.altitude)}`
				if (next !== cameraText) {
					cameraText = next
					setFps(fps.value, fps)
				}
			}
			const taken = [[0, 0, size.width, 44]]
			if (orreryBox)
				taken.push(Object.assign([0, orreryBox.top - 4, orreryBox.right, orreryBox.bottom + 4], { orrery: true }))
			if (legendBox)
				taken.push(legendBox)
			for (const target of chips) {
				if (target === ringTag)
					continue
				const at = full && target.text && target.anchor ? target.anchor() : null
				if (!at || (target.mode === "scene" && behindGlobe(at, camera.position))) {
					hide(target)
					continue
				}
				let x = 0, y = 0
				if (target.mode === "screen") {
					x = at.x + target.width / 2
					y = at.y
				} else {
					temp2.copy(at).project(camera)
					if (temp2.z > 1) {
						hide(target)
						continue
					}
					x = (temp2.x + 1) / 2 * size.width
					y = (1 - temp2.y) / 2 * size.height - (target.lift ? target.lift + target.height / 2 : 0)
					// a point on the canvas whose chip would run past its edge: the chip slides back inside
					if (x >= 0 && x <= size.width)
						x = Math.max(target.width / 2 + 3, Math.min(size.width - target.width / 2 - 3, x))
				}
				const box = [x - target.width / 2 - 2, y - target.height / 2 - 1, x + target.width / 2 + 2, y + target.height / 2 + 1]
				// the orrery's own chips may sit on it
				const own = target.name.startsWith("orrery")
				if (box[0] < 0 || box[1] < 0 || box[2] > size.width || box[3] > size.height || taken.some(b => !(own && b.orrery) && overlap(b, box))) {
					hide(target)
					continue
				}
				taken.push(box)
				show(target, x, y)
			}
			placeRing(camera, taken)
			placed = taken
		} catch (e) {
			failed = true
			console.error(e)
			window.logFromJs?.(e.message, "globe.instruments.frame")
		}
	}

	// the ring hugs the globe's outline on screen: its centre projected, its radius the globe's apparent one
	function placeRing(camera, taken) {
		if (!full)
			return
		temp2.set(0, 0, 0).project(camera)
		const cx = (temp2.x + 1) / 2 * size.width, cy = (1 - temp2.y) / 2 * size.height
		const distance = camera.position.length()
		const half = Math.asin(Math.min(1, R / distance))
		const radius = size.height / 2 * Math.tan(half) / Math.tan(camera.fov * RAD / 2) + 6
		if (Math.abs(radius - ring.radius) > 0.5 || Math.abs(cx - ring.cx) > 0.5 || Math.abs(cy - ring.cy) > 0.5) {
			ring.radius = radius
			ring.cx = cx
			ring.cy = cy
			for (const circleElement of [ring.track, ring.value]) {
				circleElement.setAttribute("cx", cx.toFixed(1))
				circleElement.setAttribute("cy", cy.toFixed(1))
				circleElement.setAttribute("r", radius.toFixed(1))
			}
			ring.value.setAttribute("transform", `rotate(-90 ${cx.toFixed(1)} ${cy.toFixed(1)})`)
			ring.length = 2 * Math.PI * radius
			setFps(fps.value, fps)
		}
		// its words at its foot, or above the globe's foot when the ring runs off the canvas
		const y = Math.min(cy + radius + 4 + ringTag.height / 2, size.height - ringTag.height / 2 - 2)
		const box = [cx - ringTag.width / 2, y - ringTag.height / 2, cx + ringTag.width / 2, y + ringTag.height / 2]
		if (ringTag.text && !taken.some(b => overlap(b, box))) {
			taken.push(box)
			show(ringTag, cx, y)
		} else
			hide(ringTag)
	}

	// the orrery in the camera's top-left corner, tilted towards the reader, before each frame
	// the orrery in the top left corner, below the moment's caption, sized in pixels: its orbit seen from 60° above the
	// ecliptic is half as tall as it is wide; its chips stack under it
	function placeOrrery() {
		if (!parts || !parts.orrery.visible) {
			orreryBox = null
			return
		}
		const camera = globe.camera()
		const depth = 30
		const perPixel = 2 * depth * Math.tan(camera.fov * RAD / 2) / size.height
		const radius = Math.max(52, Math.min(96, size.width * 0.15))
		const cx = 12 + radius * 1.25, cy = 56 + radius * 0.6
		orreryBox = { left: 12, top: cy - radius * 0.6, right: cx + radius * 1.25, bottom: cy + radius * 0.6, middle: cy }
		parts.orrery.position.set((cx - size.width / 2) * perPixel, (size.height / 2 - cy) * perPixel, -depth).applyQuaternion(camera.quaternion).add(camera.position)
		parts.orrery.quaternion.copy(camera.quaternion).multiply(parts.orreryTilt)
		parts.orrery.scale.setScalar(radius * perPixel)
		parts.orrery.updateMatrixWorld(true)
		// the Earth's lit half faces the Sun
		parts.orrerySun.getWorldPosition(temp)
		parts.earth.lookAt(temp)
		parts.earth.updateMatrixWorld(true)
	}

	// --- the focused place's Sun line, elevation and day, as the Sun eases ---

	function drawPlace() {
		if (!parts || !point || !focus || !Number.isFinite(focus.lat) || !sun)
			return
		const n = unitOf(focus.lat, focus.lng)
		const s = unitOf(point.lat, point.lng)
		const at = n.clone().multiplyScalar(R * 1.002)
		const up = n.dot(s)
		const elevation = Math.asin(Math.max(-1, Math.min(1, up))) / RAD
		const tip = s.clone().multiplyScalar(9).add(at)
		rewrite(parts.sunLine, [at, tip])
		parts.sunLine.visible = elevation >= 0
		parts.sunLineBelow.visible = elevation < 0
		if (elevation < 0)
			rewrite(parts.sunLineBelow, Array.from({ length: 13 }, (_, i) => s.clone().multiplyScalar(9 * i / 12).add(at)))
		// the arc from the horizon to the Sun's direction, 6 units out
		const flat = s.clone().addScaledVector(n, -up)
		if (flat.lengthSq() < 1e-6)
			flat.copy(perpendicular(n))
		flat.normalize()
		rewrite(parts.elevation, Array.from({ length: 17 }, (_, i) => {
			const t = elevation * RAD * i / 16
			return flat.clone().multiplyScalar(Math.cos(t) * 6).addScaledVector(n, Math.sin(t) * 6).add(at)
		}))
		// the day at the place's latitude: lit around the Sun's meridian for the day's length, dark dashes for the night
		const place = sunAtPlace(sun, focus.lat, focus.lng)
		const half = Math.max(0, Math.min(180, place.dayLength * 7.5))
		rewrite(parts.dayLit, Array.from({ length: 121 }, (_, i) => toVector(coords(focus.lat, point.lng - half + 2 * half * i / 120, 0.003))))
		parts.dayLit.visible = half > 0
		const dark = []
		const nightSpan = 360 - 2 * half
		for (let i = 0; i < 120; i++) {
			const a = point.lng + half + nightSpan * i / 120
			const b = point.lng + half + nightSpan * (i + 0.5) / 120
			dark.push(toVector(coords(focus.lat, a, 0.003)), toVector(coords(focus.lat, b, 0.003)))
		}
		rewrite(parts.dayDark, dark)
		parts.dayDark.visible = nightSpan > 0
	}

	// --- anchors ---

	function arcTop() {
		if (!arc)
			return null
		const a = unitOf(arc.startLat, arc.startLng), b = unitOf(arc.endLat, arc.endLng)
		const middle = a.clone().add(b)
		if (middle.lengthSq() < 1e-6)
			return null
		middle.normalize()
		const angle = Math.acos(Math.max(-1, Math.min(1, a.dot(b))))
		return temp.copy(middle).multiplyScalar(R * (1 + angle / 2 * 0.4 * 1.1))
	}

	function yearTop() {
		const positions = parts.year.geometry.attributes.position
		let best = 0
		for (let i = 1; i < positions.count; i++)
			if (positions.getY(i) > positions.getY(best))
				best = i
		return temp.set(positions.getX(best), positions.getY(best) * 1.004, positions.getZ(best))
	}

	// the orrery's chips, one under another below it
	function belowOrrery(slot) {
		return orreryBox ? { x: orreryBox.left, y: orreryBox.bottom + 12 + slot * 20 } : null
	}

	function cameraLongitude(lat) {
		return coords(lat, globe.pointOfView().lng, 0.004)
	}

	// the point of a circle (polar angle from the rig's +Z) nearest the camera
	function nearestOn(rig, angle, radius) {
		temp.copy(globe.camera().position)
		rig.worldToLocal(temp)
		const phi = Math.atan2(temp.y, temp.x)
		return worldOf(rig, radius * Math.sin(angle * RAD) * Math.cos(phi), radius * Math.sin(angle * RAD) * Math.sin(phi), radius * Math.cos(angle * RAD))
	}

	function worldOf(object, x, y, z) {
		return temp.set(x, y, z).applyMatrix4(object.matrixWorld)
	}

	function coords(lat, lng, altitude) {
		const at = globe.getCoords(lat, lng, altitude)
		return temp.set(at.x, at.y, at.z)
	}

	function toVector(at) {
		return v(at.x, at.y, at.z)
	}

	// three-globe's frame: x = cos lat · sin lng, y = sin lat, z = cos lat · cos lng
	function unitOf(lat, lng) {
		return v(Math.cos(lat * RAD) * Math.sin(lng * RAD), Math.sin(lat * RAD), Math.cos(lat * RAD) * Math.cos(lng * RAD))
	}

	function perpendicular(n) {
		return Math.abs(n.y) < 0.9 ? v(0, 1, 0).cross(n) : v(1, 0, 0).cross(n)
	}

	function ringSegments(lat, lng, radiusDeg, steps) {
		const n = unitOf(lat, lng)
		const e = perpendicular(n).normalize()
		const u = n.clone().cross(e)
		const a = radiusDeg * RAD
		const points = Array.from({ length: steps }, (_, i) => {
			const t = 2 * Math.PI * i / steps
			return n.clone().multiplyScalar(Math.cos(a)).addScaledVector(e, Math.sin(a) * Math.cos(t)).addScaledVector(u, Math.sin(a) * Math.sin(t)).multiplyScalar(R * 1.003)
		})
		return points.map((p, i) => [p, points[(i + 1) % steps]])
	}

	function greatCircleKm(a) {
		const p = unitOf(a.startLat, a.startLng), q = unitOf(a.endLat, a.endLng)
		return 6371 * Math.acos(Math.max(-1, Math.min(1, p.dot(q))))
	}

	function behindGlobe(point, camera) {
		const dx = point.x - camera.x, dy = point.y - camera.y, dz = point.z - camera.z
		const a = dx * dx + dy * dy + dz * dz
		const b = 2 * (camera.x * dx + camera.y * dy + camera.z * dz)
		const c = camera.x * camera.x + camera.y * camera.y + camera.z * camera.z - R * R * 0.998
		const discriminant = b * b - 4 * a * c
		if (discriminant <= 0)
			return false
		const t = (-b - Math.sqrt(discriminant)) / (2 * a)
		return t > 0 && t < 0.999
	}

	function show(target, x, y) {
		if (!target.shown) {
			target.shown = true
			target.element.style.visibility = ""
		}
		// a chip placed for the first time has no x nor y (NaN), which no comparison is true of
		if (!(Math.abs(x - target.x) < 0.5 && Math.abs(y - target.y) < 0.5)) {
			target.x = x
			target.y = y
			target.element.style.transform = `translate(${(x - target.width / 2).toFixed(1)}px, ${(y - target.height / 2).toFixed(1)}px)`
		}
	}

	function hide(target) {
		if (target.shown) {
			target.shown = false
			target.element.style.visibility = "hidden"
		}
	}

	function drawLegend() {
		const lines = [
			`${text("points")} ${facts.points} · ${text("posts")} ${facts.posts} · ${text("servers")} ${facts.servers}${facts.cdnGroups > 0 ? ` · ${text("CDN groups")} ${facts.cdnGroups}` : ""}`,
			[`${text(facts.night ? "day and night maps" : "day map")} 4096×2048`, facts.anisotropy ? text("{0}× anisotropic", facts.anisotropy) : null,
				facts.countries ? `${text("countries")} ${facts.named}/${facts.countries}` : null,
				facts.borders ? `${text("borders")} ${facts.borders} ${text("lines")}` : null].filter(Boolean).join(" · "),
			facts.renderer ?? ""
		].filter(Boolean)
		const value = lines.join("\n")
		if (legend.textContent === value)
			return
		legend.textContent = value
		measureLegend()
	}

	// the legend's box, which the chips keep clear of; measured when its words or the canvas change, never per frame
	function measureLegend() {
		legendBox = full && legend.textContent ? [legend.offsetLeft, legend.offsetTop - 4, legend.offsetLeft + legend.offsetWidth, size.height] : null
	}

	function seasonName(season) {
		return text(season)
	}

	function eventName(next) {
		return text({ "march-equinox": "March equinox", "june-solstice": "June solstice", "september-equinox": "September equinox" }[next] ?? "December solstice")
	}

	// --- geometry, built with three's own classes ---

	function v(x, y, z) {
		return new three.Vector3(x, y, z)
	}

	function group(order) {
		const made = new three.Group()
		made.rotation.order = order
		return made
	}

	function painted(object, kind) {
		object.userData.paint = kind
		object.frustumCulled = false
		return object
	}

	function polyline(points, material, kind) {
		return painted(new three.Line(new three.BufferGeometry().setFromPoints(points), material), kind)
	}

	function segments(points, material, kind) {
		return painted(new three.LineSegments(new three.BufferGeometry().setFromPoints(points), material), kind)
	}

	function mesh(geometry, material, kind) {
		return painted(new three.Mesh(geometry, material), kind)
	}

	// a line's points written in place (same count), or its geometry made again when the count changed
	function rewrite(object, points) {
		const positions = object.geometry.attributes.position
		if (positions && positions.count === points.length) {
			points.forEach((p, i) => positions.setXYZ(i, p.x, p.y, p.z))
			positions.needsUpdate = true
			return
		}
		object.geometry.dispose()
		object.geometry = new three.BufferGeometry().setFromPoints(points)
	}

	// a circle at an angle from +Z
	function circle(angle, radius, steps) {
		return Array.from({ length: steps + 1 }, (_, i) => {
			const t = 2 * Math.PI * i / steps
			return v(radius * Math.sin(angle * RAD) * Math.cos(t), radius * Math.sin(angle * RAD) * Math.sin(t), radius * Math.cos(angle * RAD))
		})
	}

	// the great circle through +Z and +Y (x = 0): in the Sun's rig, the meridian of noon and midnight
	function greatCircleX(radius, steps) {
		return Array.from({ length: steps + 1 }, (_, i) => {
			const t = 2 * Math.PI * i / steps
			return v(0, radius * Math.sin(t), radius * Math.cos(t))
		})
	}

	function latitudeCircle(lat, radius, steps) {
		return Array.from({ length: steps + 1 }, (_, i) => {
			const lng = 2 * Math.PI * i / steps
			return v(radius * Math.cos(lat * RAD) * Math.sin(lng), radius * Math.sin(lat * RAD), radius * Math.cos(lat * RAD) * Math.cos(lng))
		})
	}

	// the meridian at longitude 0 from one latitude to another
	function arcPoints(from, to, steps) {
		return Array.from({ length: steps + 1 }, (_, i) => {
			const lat = (from + (to - from) * i / steps) * RAD
			return v(0, R * 1.003 * Math.sin(lat), R * 1.003 * Math.cos(lat))
		})
	}

	// a polyline as segments, every other one left out (or, solid, every one kept)
	function dashed(points, gaps) {
		const pairs = []
		for (let i = 0; i < points.length - 1; i += gaps ? 2 : 1)
			pairs.push(points[i], points[i + 1])
		return pairs
	}

	function setIndexed(points, index) {
		const geometry = new three.BufferGeometry().setFromPoints(points)
		geometry.setIndex(index)
		return geometry
	}

	// a band between two angles from +Z
	function band(inner, outer, radius, steps) {
		const points = []
		const index = []
		for (let i = 0; i <= steps; i++) {
			const t = 2 * Math.PI * i / steps
			for (const angle of [inner, outer])
				points.push(v(radius * Math.sin(angle * RAD) * Math.cos(t), radius * Math.sin(angle * RAD) * Math.sin(t), radius * Math.cos(angle * RAD)))
			if (i < steps)
				index.push(2 * i, 2 * i + 1, 2 * i + 2, 2 * i + 1, 2 * i + 3, 2 * i + 2)
		}
		return setIndexed(points, index)
	}

	// a tapered tube along +Z
	function beam(from, to, start, end, sides) {
		const points = []
		const index = []
		for (let i = 0; i <= sides; i++) {
			const t = 2 * Math.PI * i / sides
			points.push(v(from * Math.cos(t), from * Math.sin(t), start), v(to * Math.cos(t), to * Math.sin(t), end))
			if (i < sides)
				index.push(2 * i, 2 * i + 1, 2 * i + 2, 2 * i + 1, 2 * i + 3, 2 * i + 2)
		}
		return setIndexed(points, index)
	}

	// a sphere (or a cap of it, to a polar angle from +Z)
	function sphere(radius, around, down, cap = Math.PI) {
		const points = []
		const index = []
		for (let j = 0; j <= down; j++) {
			const polar = cap * j / down
			for (let i = 0; i <= around; i++) {
				const t = 2 * Math.PI * i / around
				points.push(v(radius * Math.sin(polar) * Math.cos(t), radius * Math.sin(polar) * Math.sin(t), radius * Math.cos(polar)))
			}
		}
		for (let j = 0; j < down; j++)
			for (let i = 0; i < around; i++) {
				const a = j * (around + 1) + i, b = a + around + 1
				index.push(a, b, a + 1, b, b + 1, a + 1)
			}
		return setIndexed(points, index)
	}

	// the orbit's point at a heliocentric longitude, from the Sun at the focus (the ellipse's scale is 1)
	function orbitXYZ(longitude, out = 1) {
		const anomaly = (longitude - PERIHELION) * RAD
		const r = (1 - ECCENTRICITY * ECCENTRICITY) / (1 + ECCENTRICITY * Math.cos(anomaly)) * out
		return [r * Math.cos(longitude * RAD), r * Math.sin(longitude * RAD), 0]
	}

	function orbitPoint(longitude, out = 1) {
		return v(...orbitXYZ(longitude, out))
	}

	return { setSize, setSun, setMoment, setView, setArc, setPoints, setFacts, setFps, setColours, boxes, summary, dispose }
}

// three.js's classes, from objects globe.gl made: its globe mesh in its group, the graticules (a LineSegments with its
// LineBasicMaterial, added hidden), an empty Mesh for its default geometry and material, the camera's Vector3. Each is
// checked by three's own is* flags; what is missing, as words, when one isn't there.
function classesOf(globe) {
	try {
		const scene = globe.scene()
		const globeMaterial = globe.globeMaterial()
		let earth = null, graticules = null
		scene.traverse(object => {
			if (!earth && object.isMesh && object.material === globeMaterial)
				earth = object
			if (!graticules && object.isLineSegments)
				graticules = object
		})
		if (!earth?.parent?.isGroup)
			return "no globe mesh in a group"
		if (!graticules?.material?.isLineBasicMaterial)
			return "no graticules"
		const Mesh = earth.constructor
		const Group = earth.parent.constructor
		const LineSegments = graticules.constructor
		const Line = Object.getPrototypeOf(LineSegments)
		const LineBasicMaterial = graticules.material.constructor
		const probe = new Mesh()
		const BufferGeometry = probe.geometry.constructor
		const MeshBasicMaterial = probe.material.constructor
		const Vector3 = globe.camera().position.constructor
		const line = new Line()
		const ok = line.isLine && !line.isLineSegments && new Group().isGroup && probe.isMesh && new BufferGeometry().isBufferGeometry
			&& new MeshBasicMaterial().isMeshBasicMaterial && new Vector3().isVector3
		for (const made of [probe, line]) {
			made.geometry.dispose()
			made.material.dispose()
		}
		return ok ? { Mesh, Group, LineSegments, Line, LineBasicMaterial, BufferGeometry, MeshBasicMaterial, Vector3 } : "a class without its is* flag"
	} catch (e) {
		console.error(e)
		return e.message
	}
}

// the frame-rate ring: a track and a value arc, an SVG over the canvas
function ringElement(overlay) {
	const ns = "http://www.w3.org/2000/svg"
	const svg = document.createElementNS(ns, "svg")
	svg.setAttribute("class", "globe-ring")
	const track = document.createElementNS(ns, "circle")
	track.setAttribute("class", "globe-ring-track")
	const value = document.createElementNS(ns, "circle")
	value.setAttribute("class", "globe-ring-value")
	svg.append(track, value)
	overlay.appendChild(svg)
	return { svg, track, value, radius: 0, cx: 0, cy: 0, length: 0 }
}

function overlap(a, b) {
	return a[0] < b[2] && a[2] > b[0] && a[1] < b[3] && a[3] > b[1]
}