"use client"

import { useSyncExternalStore } from "react"
import { TIER_LIMITS, type SubscriptionTier } from "@asa-news/shared"
import { useUserProfile } from "@/lib/queries/use-user-profile"

function subscribe(callback: () => void) {
  window.addEventListener("online", callback)
  window.addEventListener("offline", callback)
  return () => {
    window.removeEventListener("online", callback)
    window.removeEventListener("offline", callback)
  }
}

function getSnapshot() {
  return navigator.onLine
}

function getServerSnapshot() {
  return true
}

export function OfflineBanner() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
  const { data: userProfile } = useUserProfile()

  if (isOnline) return null

  const tier = (userProfile?.tier ?? "free") as SubscriptionTier
  const allowsOffline = TIER_LIMITS[tier]?.allowsOfflineReading ?? false

  return (
    <div className="border-b border-border bg-background-tertiary px-3 py-1.5 text-center text-text-dim">
      {allowsOffline
        ? "you are offline \u2014 showing cached content"
        : "you are offline \u2014 offline reading is available on pro and developer plans"}
    </div>
  )
}