"use client"

import * as React from "react"

import { useSidebarReflowZoom } from "./use-sidebar-reflow-zoom"

type Listener = () => void

let listeners: Set<Listener> | null = null
let mql: MediaQueryList | null = null

function ensureMql() {
  if (typeof window === "undefined") return null
  if (!mql) mql = window.matchMedia("(max-width: 767px)")
  return mql
}

function subscribe(callback: Listener): () => void {
  const mq = ensureMql()
  if (!listeners) listeners = new Set()
  listeners.add(callback)
  mq?.addEventListener("change", callback)
  return () => {
    listeners?.delete(callback)
    mq?.removeEventListener("change", callback)
  }
}

function getSnapshot(): boolean {
  return ensureMql()?.matches ?? false
}

function getServerSnapshot(): boolean {
  return false
}

function useMaxMdViewport(): boolean {
  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
}

/**
 * When true, KPI strips should use the horizontal scroll row instead of a
 * container-queried grid (phones, high zoom / reflow — not tablet/desktop).
 */
export function useCompactMetricsStrip(): boolean {
  const reflowZoom = useSidebarReflowZoom()
  const maxMd = useMaxMdViewport()
  return reflowZoom || maxMd
}