import type { ReactNode } from 'react'
import { Loader2 } from 'lucide-react'
import { API_PROBE_INTERVAL_MS, retryApiHealth, useApiHealth, useApiUnavailable } from '@/shared/api'
import { Button } from '@/shared/ui'

/**
 * App-wide「api error」intermediate state.
 *
 * `ApiErrorGate` sits above the router: while the rolling failure rate stays
 * above the threshold in `@/shared/api/health` it replaces the whole tree with
 * the outage screen, so a dead backend reads as one clear page instead of a
 * grid of half-rendered panels each showing its own error.
 *
 * Unmounting is also the recovery mechanism: the health store probes the
 * service on its own, and as soon as one request answers, the tree remounts and
 * every view refetches through `useAsync` — no document reload involved.
 */
export function ApiErrorGate({ children }: { children: ReactNode }) {
  const unavailable = useApiUnavailable()
  if (unavailable) return <ServiceUnavailableScreen />
  return <>{children}</>
}

/** Failure reason in words: status 0 / transport error means "no answer". */
function failureLabel(status: number | null): string {
  if (status === null) return '无响应'
  if (status === 0) return '网络错误（无响应）'
  if (status >= 500) return `HTTP ${status} · 服务端错误`
  return `HTTP ${status}`
}

function ServiceUnavailableScreen() {
  const {
    failures,
    samples,
    errorRate,
    burstFailures,
    lastFailureStatus,
    lastFailureUrl,
    probing,
    lastProbeAt,
  } = useApiHealth()
  const percent = Math.round(errorRate * 100)
  const path = lastFailureUrl ? lastFailureUrl.replace(/^https?:\/\/[^/]+/, '') : null

  return (
    <main
      role="alert"
      aria-live="assertive"
      className="flex h-dvh w-full flex-col items-center justify-center gap-5 overflow-y-auto bg-shell-surface px-6 py-10 text-center text-shell-ink"
    >
      <img
        src="/wronged.png"
        alt="服务暂不可用"
        draggable={false}
        className="max-h-[38vh] w-auto max-w-[min(420px,72vw)] shrink-0 select-none object-contain"
      />
      <div className="flex max-w-md flex-col gap-1.5">
        <h1 className="text-[17px] font-semibold tracking-tight">服务暂不可用</h1>
        <p className="text-[13px] leading-relaxed text-shell-ink-muted">
          接口调用持续失败（连续 {burstFailures} 次请求无成功响应），页面已暂停渲染。
          请确认后端服务是否已启动。
        </p>
      </div>
      <p className="max-w-[min(560px,92vw)] truncate font-mono text-[11px] text-shell-ink-muted">
        {`最近一次失败：${failureLabel(lastFailureStatus)}${path ? ` · ${path}` : ''} ｜ 窗口失败率 ${percent}%（${failures}/${samples}）`}
      </p>
      <div className="justify-self-center">
        <Button onClick={retryApiHealth} disabled={probing} className="min-w-32">
          {probing ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> : null}
          {probing ? '连接中…' : '重试连接'}
        </Button>
      </div>
      <p className="text-[11px] text-shell-ink-muted">
        每 {Math.round(API_PROBE_INTERVAL_MS / 1000)}s 自动探测一次
        {lastProbeAt ? ` · 上次 ${new Date(lastProbeAt).toLocaleTimeString([], { hour12: false })}` : ''}
      </p>
    </main>
  )
}