import { WifiOff } from "lucide-react"
import { AnimatePresence, motion } from "motion/react"
import { useSyncExternalStore } from "react"

import { ago } from "@/components/Health/queries"
import { connectionStore } from "@/lib/connectionStore"
import { fadeIn } from "@/lib/motion"
import { isPortal } from "@/lib/portal"

/**
 * Says when the installation cannot be reached, and when it was last heard
 * from.
 *
 * Only ever shown under a portal: a local install cannot lose contact with
 * itself. The screen underneath keeps its last data rather than blanking —
 * stale readings with a timestamp are more use than an empty page, which is
 * why the banner leads with when we last heard anything.
 */
export function ConnectionBanner() {
  const connection = useSyncExternalStore(
    connectionStore.subscribe,
    connectionStore.snapshot,
    connectionStore.snapshot,
  )
  if (!isPortal()) return null

  return (
    <AnimatePresence>
      {connection.offline && (
        <motion.div
          variants={fadeIn}
          initial="hidden"
          animate="visible"
          exit="hidden"
          role="status"
          aria-live="polite"
          className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center px-4"
        >
          <div className="flex items-center gap-2 rounded-full border border-border bg-card/80 px-4 py-2 text-sm shadow-e2 backdrop-blur-md">
            <WifiOff className="size-4 shrink-0 text-muted-foreground" />
            <span className="font-medium">Installation offline</span>
            <span className="text-muted-foreground">
              {connection.lastSeen
                ? `last seen ${ago(connection.lastSeen / 1000)} — reconnecting…`
                : "reconnecting…"}
            </span>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}