const OVERLAY_ID = 'sa-server-unavailable-overlay'
const MESSAGE = 'خطا در برقراری ارتباط با سرور'

export function isServerUnreachableConfig(config: unknown): boolean {
  if (!config || typeof config !== 'object') return false
  const root = config as Record<string, unknown>
  const user =
    root.user && typeof root.user === 'object'
      ? (root.user as Record<string, unknown>)
      : null

  if (root.server_reachable === false) return true
  if (user && user.server_reachable === false) return true
  return false
}

export function showServerUnavailableOverlay(message = MESSAGE) {
  if (typeof document === 'undefined') return
  let root = document.getElementById(OVERLAY_ID)
  if (!root) {
    root = document.createElement('div')
    root.id = OVERLAY_ID
    document.body.appendChild(root)
  }

  root.innerHTML = `
    <div style="position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;direction:rtl;font-family:sans-serif;padding:24px;background:#ffffff;color:#111827;">
      <div style="width:min(420px,100%);text-align:center;background:#fff;border:1px solid rgba(15,23,42,0.08);border-radius:24px;padding:28px 22px;">
        <div style="font-size:42px;margin-bottom:12px;">⚠️</div>
        <h2 style="margin:0 0 20px;font-size:20px;">${message}</h2>
        <button
          type="button"
          onclick="location.reload()"
          style="padding:11px 22px;border:0;border-radius:12px;background:#2563eb;color:white;cursor:pointer;font-weight:700;"
        >
          تلاش مجدد
        </button>
      </div>
    </div>
  `
}

export function hideServerUnavailableOverlay() {
  if (typeof document === 'undefined') return
  const root = document.getElementById(OVERLAY_ID)
  if (root) root.remove()
}

export function assertServerReachableConfig(config: unknown) {
  if (isServerUnreachableConfig(config)) {
    showServerUnavailableOverlay()
    throw new Error(MESSAGE)
  }
}