数据获取与网络

// src/api/client.ts —— 统一请求层
const BASE_URL = 'https://api.example.com'
const DEFAULT_TIMEOUT_MS = 10_000

export class ApiError extends Error {
  constructor(
    public readonly status: number, // HTTP 状态码；0 表示没拿到响应（网络/超时/取消）
    public readonly code: 'http' | 'network' | 'timeout' | 'abort' | string,
    message: string,
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

export interface RequestOptions extends Omit<RequestInit, 'body'> {
  body?: unknown
  timeoutMs?: number
  withAuth?: boolean
}

let accessToken: string | null = null
export function setAccessToken(token: string | null) {
  accessToken = token
}

export async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
  const { body, timeoutMs = DEFAULT_TIMEOUT_MS, withAuth = true, headers, signal, ...rest } = options

  // 超时与外部取消共用一个 controller：谁先触发谁说了算
  const controller = new AbortController()
  let timedOut = false
  const timer = setTimeout(() => {
    timedOut = true
    controller.abort()
  }, timeoutMs)
  if (signal) {
    if (signal.aborted) controller.abort()
    else signal.addEventListener('abort', () => controller.abort(), { once: true })
  }

  try {
    const res = await fetch(`${BASE_URL}${path}`, {
      ...rest,
      signal: controller.signal,
      headers: {
        'Content-Type': 'application/json',
        ...(withAuth && accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
        ...headers,
      },
      body: body === undefined ? undefined : JSON.stringify(body),
    })

    // Response 的 body 是一次性流，.json() 调第二次直接抛错。
    // 先读成文本，再解析，方便非 2xx 时把服务端错误信息带出来。
    const text = await res.text()
    const json: Record<string, unknown> | null = text ? JSON.parse(text) : null

    if (!res.ok) {
      throw new ApiError(res.status, String(json?.code ?? 'http'), String(json?.message ?? res.statusText))
    }
    return json as T
  } catch (err) {
    if (timedOut) throw new ApiError(0, 'timeout', `请求超时（${timeoutMs}ms）`)
    if (err instanceof Error && err.name === 'AbortError') throw new ApiError(0, 'abort', '请求被取消')
    if (err instanceof ApiError) throw err
    throw new ApiError(0, 'network', err instanceof Error ? err.message : '未知网络错误')
  } finally {
    clearTimeout(timer)
  }
}

export const api = {
  get: <T>(path: string, options?: RequestOptions) => request<T>(path, { ...options, method: 'GET' }),
  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
    request<T>(path, { ...options, body, method: 'POST' }),
  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
    request<T>(path, { ...options, body, method: 'PUT' }),
  del: <T>(path: string, options?: RequestOptions) => request<T>(path, { ...options, method: 'DELETE' }),
}

// src/screens/ArticleScreen.tsx
function useArticle(id: string) {
  const [article, setArticle] = useState<Article | null>(null)

  useEffect(() => {
    const controller = new AbortController()
    api
      .get<Article>(`/articles/${id}`, { signal: controller.signal })
      .then(setArticle)
      .catch((err: unknown) => {
        // 卸载导致的取消不是错误，静默处理
        if (err instanceof ApiError && err.code === 'abort') return
        if (err instanceof ApiError && err.code === 'network') Toast.show('网络不可用，请检查连接')
      })
    return () => controller.abort() // 组件卸载/依赖变化即取消
  }, [id])

  return article
}

// src/query/queryClient.ts
import { QueryClient, focusManager, onlineManager } from '@tanstack/react-query'
import NetInfo from '@react-native-community/netinfo'
import { AppState } from 'react-native'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      retry: 2,
    },
  },
})

// 断网时 Query 自动暂停所有请求，恢复后再发
onlineManager.setEventListener((setOnline) => {
  const unsubscribe = NetInfo.addEventListener((state) => {
    setOnline(state.isConnected ?? false)
  })
  return unsubscribe
})

// src/query/queryClient.ts（续）
focusManager.setEventListener((handleFocus) => {
  const sub = AppState.addEventListener('change', (status) => {
    handleFocus(status === 'active') // 回到前台视作窗口获得焦点
  })
  return () => sub.remove()
})

// src/screens/FeedScreen.tsx
interface FeedPage {
  items: Post[]
  nextCursor: string | null
}

function fetchFeed(cursor: string | null): Promise<FeedPage> {
  return api.get<FeedPage>(cursor ? `/feed?cursor=${cursor}` : '/feed')
}

function FeedScreen() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch, isRefetching } =
    useInfiniteQuery({
      queryKey: ['feed'],
      queryFn: ({ pageParam }) => fetchFeed(pageParam),
      initialPageParam: null as string | null,
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    })

  const items = useMemo(() => data?.pages.flatMap((page) => page.items) ?? [], [data])

  const onEndReached = useCallback(() => {
    // 关键守卫：hasNextPage 之外必须挡住 isFetchingNextPage。
    // 用 isRefetching 守卫下拉刷新，用 isFetchingNextPage 守卫分页，两者别混用。
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage()
    }
  }, [hasNextPage, isFetchingNextPage, fetchNextPage])

  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <PostRow post={item} />}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.3} // 比默认 0.5 更晚触发，预取时机依然富余
      ListFooterComponent={isFetchingNextPage ? <ActivityIndicator /> : null}
    />
  )
}

<FlatList
  data={items}
  refreshControl={
    <RefreshControl
      refreshing={isRefetching}
      onRefresh={refetch}
      tintColor="#3b82f6" // iOS 下拉圈颜色；Android 用 colors 属性
    />
  }
/>

// 回到前台时标记数据过期，由 focusManager 驱动的 refetchOnWindowFocus 处理
useEffect(() => {
  const sub = AppState.addEventListener('change', (status) => {
    if (status === 'active') {
      queryClient.invalidateQueries({ queryKey: ['feed'] })
    }
  })
  return () => sub.remove()
}, [])

// src/net/socket.ts —— 心跳 + 指数退避重连的最小实现
export class SocketClient {
  private ws: WebSocket | null = null
  private retries = 0
  private heartbeat: ReturnType<typeof setInterval> | null = null
  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
  private closedByUser = false

  constructor(
    private readonly url: string,
    private readonly onMessage: (event: MessageEvent) => void,
  ) {}

  connect(): void {
    this.closedByUser = false
    this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {
      this.retries = 0
      // RN 的 WebSocket 不暴露协议层 ping 帧，心跳只能做成应用层 JSON 消息，
      // 服务端按约定的 pong 回包判定连接还活着
      this.heartbeat = setInterval(() => this.send({ type: 'ping' }), 25_000)
    }

    this.ws.onmessage = (event) => {
      const payload = this.safeParse(event.data)
      if (payload?.type !== 'pong') this.onMessage(event) // pong 只用于保活，不上抛
    }

    this.ws.onclose = () => {
      this.clearTimers()
      if (!this.closedByUser) this.scheduleReconnect()
    }
    this.ws.onerror = () => {
      /* onerror 之后必然跟 onclose，重连逻辑统一在 onclose 里做 */
    }
  }

  send(data: unknown): void {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data))
    }
  }

  disconnect(): void {
    this.closedByUser = true
    this.clearTimers()
    this.ws?.close()
  }

  private scheduleReconnect(): void {
    const delay = Math.min(1_000 * 2 ** this.retries, 30_000)
    this.retries += 1
    this.reconnectTimer = setTimeout(() => this.connect(), delay)
  }

  private clearTimers(): void {
    if (this.heartbeat) clearInterval(this.heartbeat)
    if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
    this.heartbeat = null
    this.reconnectTimer = null
  }

  private safeParse(raw: string): { type?: string } | null {
    try {
      return JSON.parse(raw)
    } catch {
      return null
    }
  }
}

// src/api/upload.ts
export async function uploadPhoto(photoUri: string, caption: string, signal?: AbortSignal) {
  const form = new FormData()
  form.append('caption', caption)
  // RN 特有约定：值传 { uri, name, type } 对象而不是 Blob/File。
  // TS 官方类型没有覆盖这种写法，这里需要一次断言。
  form.append('file', {
    uri: photoUri, // 相册选择器返回的 file:// 开头 URI，见 06-表单与交互.md
    name: 'photo.jpg',
    type: 'image/jpeg',
  } as unknown as string)

  // 上传走 multipart，不能再设 Content-Type: application/json，
  // 交给浏览器/RN 自动生成 boundary
  return request<{ id: string }>('/photos', {
    method: 'POST',
    body: form as BodyInit,
    signal,
    headers: { 'Content-Type': undefined as unknown as string }, // 覆盖默认 JSON 头，让它回落到 multipart
    timeoutMs: 60_000, // 上传超时给足
  })
}

// 列表快滚到某项之前，提前拉下一屏的封面图
useEffect(() => {
  const next = items.slice(items.length - 10, items.length)
  const handles = next.map((item) => Image.prefetch(item.coverUrl))
  return () => {
    handles.forEach((h) => h.catch(() => undefined)) // 预加载失败静默，别炸渲染
  }
}, [items])