Region Picker省市区选择

"use client"

import * as React from "react"
import { Dialog } from "@base-ui/react/dialog"
import { ChevronDown, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { useControllableState } from "@/hooks/use-controllable-state"

import { DEFAULT_LABELS, SHEET_QUERY } from "./config"
import { RegionPickerPanel } from "./region-picker-panel"
import { regionPickerTriggerVariants } from "./region-picker-parts"
import type { RegionOption, RegionPickerProps } from "./types"
import { createRegionIndex, formatRegionPath } from "./utils"

const EMPTY_PATH: RegionOption[] = []

// 底部面板的遮罩：用半透明的背景色把后面的页面淡化，亮色下是白雾、暗色下是暗层，随主题走
const SCRIM = "bg-background/70 backdrop-blur-xs"

/** 订阅媒体查询；服务端与首帧按桌面渲染，只影响打开后的容器，触发器两边一致 */
function useMediaQuery(query: string) {
  return React.useSyncExternalStore(
    (onChange) => {
      const list = window.matchMedia(query)
      list.addEventListener("change", onChange)
      return () => list.removeEventListener("change", onChange)
    },
    () => window.matchMedia(query).matches,
    () => false,
  )
}

/**
 * 省市区选择：触发器 + 分步选择面板（①省份 ②城市 ③区县，支持拼音搜索）。
 * 手机与触屏设备从底部弹出面板，桌面在输入框下方弹出浮层。
 * 数据通过 `regions` 传入，函数形式会惰性加载。
 */
function RegionPicker({
  regions,
  value: valueProp,
  defaultValue = null,
  onValueChange,
  depth,
  allowPartial = false,
  name,
  form,
  required = false,
  disabled,
  label,
  error,
  placeholder,
  fallbackLabel,
  title: titleProp,
  size = "default",
  presentation = "auto",
  container,
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  labels: labelsProp,
  className,
  ref,
  ...props
}: RegionPickerProps) {
  const labels = { ...DEFAULT_LABELS, ...labelsProp }
  const maxDepth =
    depth === undefined ? Infinity : Math.max(1, Math.floor(depth))

  const triggerRef = React.useRef<HTMLButtonElement>(null)
  React.useImperativeHandle(ref, () => triggerRef.current as HTMLButtonElement)
  const searchRef = React.useRef<HTMLInputElement>(null)
  const closeRef = React.useRef<HTMLButtonElement>(null)
  const narrow = useMediaQuery(SHEET_QUERY)
  const sheet = presentation === "sheet" || (presentation === "auto" && narrow)
  // 挂进指定容器时（如文档里的手机外框），面板只盖住容器、不锁整页滚动
  const contained = container !== undefined
  const proxyRef = React.useRef<HTMLInputElement>(null)

  const [open, setOpen] = useControllableState({
    prop: openProp,
    defaultProp: defaultOpen,
    onChange: onOpenChange,
  })

  // 惰性加载：浮层第一次打开、或已有值需要显示路径时才调用，且只调用一次。
  // 加载函数放进 ref，调用方每次渲染都写内联箭头函数也不会重复请求。
  const [lazyData, setLazyData] = React.useState<RegionOption[] | null>(null)
  const [failed, setFailed] = React.useState(false)
  const [attempt, setAttempt] = React.useState(0)
  const loaderRef = React.useRef(regions)
  const requestRef = React.useRef<Promise<RegionOption[]> | null>(null)
  React.useEffect(() => {
    loaderRef.current = regions
  })

  // 受控与非受控都要拿到当前值，下面的 onChange 里用它反查路径
  const indexRef = React.useRef<ReturnType<typeof createRegionIndex> | null>(
    null,
  )
  const [code, setCode] = useControllableState<string | null>({
    prop: valueProp,
    defaultProp: defaultValue,
    onChange: (next) =>
      onValueChange?.(
        next,
        (next && indexRef.current?.byCode.get(next)) || EMPTY_PATH,
      ),
  })

  const lazy = typeof regions === "function"
  const wantsData = lazy && (open || code !== null)
  React.useEffect(() => {
    if (!wantsData || lazyData) return
    const loader = loaderRef.current
    if (typeof loader !== "function") return
    const request = (requestRef.current ??= loader())
    let stale = false
    request.then(
      (data) => {
        if (!stale) setLazyData(data)
      },
      () => {
        if (!stale) setFailed(true)
      },
    )
    return () => {
      stale = true
    }
  }, [wantsData, lazyData, attempt])

  const retry = () => {
    requestRef.current = null
    setFailed(false)
    setAttempt((count) => count + 1)
  }

  const data = lazy ? lazyData : regions
  // 数据一到就建一次索引（搜索、回显路径都靠它），数据与 depth 不变就不重建
  const index = React.useMemo(
    () => (data ? createRegionIndex(data, { depth: maxDepth }) : null),
    [data, maxDepth],
  )
  React.useEffect(() => {
    indexRef.current = index
  })

  const valuePath = (code !== null && index?.byCode.get(code)) || EMPTY_PATH
  const status = index ? "ready" : failed ? "error" : "loading"

  // 触发器文字：找得到就显示路径；加载中或代码失效时用调用方存的名称兜底
  let text: React.ReactNode = null
  let title: string | undefined
  if (code !== null) {
    if (valuePath.length) {
      title = formatRegionPath(valuePath)
      // 放不下时只截上级，最末一级（真正选中的那个）始终完整显示
      const last = valuePath[valuePath.length - 1]
      const parents = valuePath.slice(0, -1)
      const sep = <span className="text-muted-foreground/60"> / </span>
      text = (
        <>
          {parents.length > 0 && (
            <span className="min-w-0 truncate">
              {parents.map((node, i) => (
                <React.Fragment key={node.code}>
                  {i > 0 && sep}
                  {node.name}
                </React.Fragment>
              ))}
            </span>
          )}
          {parents.length > 0 && (
            <span className="shrink-0 whitespace-pre">{sep}</span>
          )}
          <span className="shrink-0">{last.name}</span>
        </>
      )
    } else {
      title =
        fallbackLabel ??
        (status === "loading" && lazy
          ? labels.loading
          : `${labels.unknown}（${code}）`)
      text = title
    }
  }

  const commit = (path: RegionOption[]) => {
    setCode(path.length ? path[path.length - 1].code : null)
    setOpen(false)
  }

  // 表单：同名的隐藏输入负责提交代码；它是可校验的文本输入，所以 required 能拦住提交、
  // 浏览器的气泡提示也有地方挂。覆盖在触发器上，聚焦时转交给触发器。
  React.useEffect(() => {
    proxyRef.current?.setCustomValidity(
      required && code === null ? labels.required : "",
    )
  }, [required, code, labels.required])

  // 非受控的表单重置回到初始值；reset 事件在表单清空之前触发，等一帧再覆盖
  const controlled = valueProp !== undefined
  React.useEffect(() => {
    const element = proxyRef.current?.form
    if (!element || controlled) return
    const reset = () => window.setTimeout(() => setCode(defaultValue))
    element.addEventListener("reset", reset)
    return () => element.removeEventListener("reset", reset)
  }, [controlled, defaultValue, setCode])

  const errorId = React.useId()
  const invalid =
    Boolean(error) ||
    props["aria-invalid"] === true ||
    props["aria-invalid"] === "true"
  const describedBy =
    [props["aria-describedby"], error ? errorId : undefined]
      .filter(Boolean)
      .join(" ") || undefined

  const triggerProps = {
    ...props,
    "aria-invalid": invalid || undefined,
    "aria-describedby": describedBy,
    ref: triggerRef,
    "data-slot": "region-picker-trigger",
    disabled,
    title: title ?? titleProp,
    "aria-busy": code !== null && !index && !failed && lazy ? true : undefined,
    className: regionPickerTriggerVariants({ size }),
    children: (
      <>
        {label && (
          <span
            data-slot="region-picker-label"
            className="shrink-0 text-muted-foreground"
          >
            {label}
          </span>
        )}
        <span
          data-slot="region-picker-value-text"
          className={cn(
            "flex min-w-0 flex-1",
            // 有条内标签时值靠右，与方条开关、数值滑块的「左标签右数值」一致
            label && "justify-end",
            code === null && "text-muted-foreground",
          )}
        >
          {typeof text === "string" || code === null ? (
            <span className="min-w-0 truncate">
              {code === null ? (placeholder ?? labels.placeholder) : text}
            </span>
          ) : (
            text
          )}
        </span>
        <ChevronDown
          aria-hidden="true"
          className="size-4 shrink-0 text-muted-foreground"
        />
      </>
    ),
  }

  const panel = (variant: "sheet" | "popover") => (
    <RegionPickerPanel
      variant={variant}
      index={index}
      status={status}
      labels={labels}
      value={code}
      valuePath={valuePath}
      depth={maxDepth}
      allowPartial={allowPartial}
      required={required}
      inputRef={searchRef}
      onRetry={retry}
      onCommit={commit}
    />
  )

  return (
    <div
      data-slot="region-picker"
      data-size={size}
      data-invalid={invalid ? "" : undefined}
      data-disabled={disabled ? "" : undefined}
      className={cn("relative w-full", className)}
    >
      {sheet ? (
        <Dialog.Root
          open={open}
          onOpenChange={(next) => setOpen(next)}
          modal={contained ? "trap-focus" : true}
        >
          <Dialog.Trigger {...triggerProps} />
          <Dialog.Portal container={container}>
            <Dialog.Backdrop
              data-slot="region-picker-backdrop"
              className={cn(
                `inset-0 z-50 ${SCRIM} transition-opacity duration-[320ms] data-ending-style:opacity-0 data-starting-style:opacity-0`,
                contained ? "absolute" : "fixed",
              )}
            />
            <Dialog.Popup
              data-slot="region-picker-sheet"
              // 不自动聚焦搜索框，免得软键盘弹出来盖住列表；焦点先落在关闭按钮上
              // 聚焦时 preventScroll：面板起点在容器下方之外，默认的 focus 会把带
              // overflow 的容器整体滚上去，再随面板上滑滚回来，看起来像遮罩从上面落下
              initialFocus={() => {
                closeRef.current?.focus({ preventScroll: true })
                return false
              }}
              className={cn(
                "inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-xl flex-col rounded-t-xl border-t bg-popover text-sm text-popover-foreground shadow-lg transition-transform duration-[320ms] ease-[cubic-bezier(0.32,0.72,0,1)] outline-none data-ending-style:translate-y-full data-ending-style:duration-200 data-ending-style:ease-in data-starting-style:translate-y-full motion-reduce:transition-none sm:border-x",
                contained ? "absolute h-[85%]" : "fixed h-[85dvh]",
              )}
            >
              <div className="flex h-12 shrink-0 items-center justify-between gap-1 pr-2 pl-4">
                <Dialog.Title className="text-base font-medium">
                  {labels.title}
                </Dialog.Title>
                {/* 标题栏里的按钮同一档 lg：清除与关闭并排 */}
                {code !== null && !required && (
                  <Button
                    type="button"
                    variant="ghost"
                    size="lg"
                    className="ml-auto text-muted-foreground"
                    onClick={() => commit(EMPTY_PATH)}
                  >
                    {labels.clear}
                  </Button>
                )}
                <Dialog.Close
                  ref={closeRef}
                  aria-label={labels.close}
                  render={
                    <Button type="button" variant="ghost" size="icon-lg" />
                  }
                >
                  <X aria-hidden="true" />
                </Dialog.Close>
              </div>
              {panel("sheet")}
            </Dialog.Popup>
          </Dialog.Portal>
        </Dialog.Root>
      ) : (
        <Popover open={open} onOpenChange={(next) => setOpen(next)}>
          <PopoverTrigger {...triggerProps} />
          <PopoverContent
            align="start"
            className="w-[30rem] max-w-[calc(100vw-1rem)] min-w-(--anchor-width) gap-0 p-0"
            initialFocus={searchRef}
          >
            {panel("popover")}
          </PopoverContent>
        </Popover>
      )}
      <input
        ref={proxyRef}
        data-slot="region-picker-value"
        tabIndex={-1}
        aria-hidden="true"
        autoComplete="off"
        name={name}
        form={form}
        required={required}
        disabled={disabled}
        value={code ?? ""}
        onChange={() => {}}
        onFocus={() => triggerRef.current?.focus()}
        // 只盖住触发器那一行，原生的必填气泡指向触发器而不是下面的错误文字
        className="pointer-events-none absolute inset-x-0 top-0 h-full max-h-11 w-full opacity-0"
      />
      {error && (
        <p
          id={errorId}
          data-slot="region-picker-error"
          className="mt-1.5 text-xs text-destructive"
        >
          {error}
        </p>
      )}
    </div>
  )
}

export { RegionPicker, regionPickerTriggerVariants }
export type {
  RegionOption,
  RegionPickerProps,
  RegionPickerSize,
  RegionsSource,
} from "./types"

"use client"

import * as React from "react"
import { Search } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

import { GROUP_THRESHOLD, type RegionPickerLabels } from "./config"
import {
  RegionPickerHighlight,
  RegionPickerNotice,
  RegionPickerOption,
  RegionPickerSteps,
  type RegionPickerStep,
  type RegionPickerVariant,
} from "./region-picker-parts"
import type { RegionOption } from "./types"
import {
  formatRegionPath,
  groupRegionsByInitial,
  isLeafRegion,
  regionTreeDepth,
  searchRegionIndex,
  type RegionGroup,
  type RegionHighlight,
  type RegionIndex,
} from "./utils"

type Row = {
  node: RegionOption
  /** 从 0 数的层级 */
  level: number
  /** 从最顶层到该节点 */
  path: RegionOption[]
  highlights?: (RegionHighlight | null)[]
}

const EMPTY_PATH: RegionOption[] = []

/**
 * 只滚动列表自身，把 `element` 移进可视区。
 * 不用 scrollIntoView：它会连带滚动整个页面，浮层跟着触发器一起上下跳。
 */
function scrollWithin(
  list: HTMLElement,
  element: HTMLElement,
  block: "start" | "center" | "nearest",
) {
  const listRect = list.getBoundingClientRect()
  const rect = element.getBoundingClientRect()
  const top = rect.top - listRect.top + list.scrollTop
  if (block === "start") list.scrollTop = top
  else if (block === "center")
    list.scrollTop = top - (list.clientHeight - rect.height) / 2
  // 上方可能有吸顶的字母标题，往上滚时多留一行的位置
  else if (rect.top < listRect.top + 28) list.scrollTop = top - 28
  else if (rect.bottom > listRect.bottom)
    list.scrollTop = top + rect.height - list.clientHeight
}

const fill = (template: string, values: Record<string, string | number>) =>
  template.replace(/\{(\w+)\}/g, (_, key) => String(values[key] ?? ""))

/**
 * 面板内容：步骤条 → 搜索框 → 当前这一步的选项（或搜索结果）→ 底部操作。
 * 选完一步自动进入下一步，最后一步选完即确认；点已完成的步骤回到那一步重选。
 * 浮层 / 面板关闭时整体卸载，所以浏览位置、搜索词每次打开都是全新的。
 */
function RegionPickerPanel({
  variant,
  index,
  status,
  labels,
  value,
  valuePath,
  depth,
  allowPartial,
  required,
  inputRef,
  onRetry,
  onCommit,
}: {
  variant: RegionPickerVariant
  /** 数据没加载好时为 null */
  index: RegionIndex | null
  status: "loading" | "error" | "ready"
  labels: RegionPickerLabels
  value: string | null
  valuePath: RegionOption[]
  depth: number
  allowPartial: boolean
  required: boolean
  inputRef: React.RefObject<HTMLInputElement | null>
  onRetry: () => void
  /** 确认选择；空数组表示清除 */
  onCommit: (path: RegionOption[]) => void
}) {
  const sheet = variant === "sheet"
  const baseId = React.useId()
  const listId = `${baseId}-list`
  const scrollRef = React.useRef<HTMLDivElement>(null)

  const [query, setQuery] = React.useState("")
  // null = 还没手动浏览过，跟随当前值所在的那一步；这样懒加载的数据到了之后也能自动定位
  const [trailState, setTrailState] = React.useState<RegionOption[] | null>(
    null,
  )
  // 前进从右滑入、后退从左滑入，让人感觉到「下一步 / 上一步」
  // null = 刚打开，列表不做横向动画，只跟着面板整体出现，免得两个方向的动作叠在一起
  const [direction, setDirection] = React.useState<"forward" | "back" | null>(
    null,
  )

  const defaultTrail = React.useMemo(
    () =>
      valuePath.slice(
        0,
        Math.max(0, Math.min(valuePath.length - 1, depth - 1)),
      ),
    [valuePath, depth],
  )
  const trail = trailState ?? defaultTrail
  const level = trail.length
  const roots = index?.roots ?? EMPTY_PATH
  const options = trail.length
    ? (trail[level - 1].children ?? EMPTY_PATH)
    : roots

  // 当前这一步里属于已选路径的那一项（上级路径一致时才算）
  const selectedHere =
    valuePath.length > level &&
    trail.every((node, i) => node.code === valuePath[i].code)
      ? valuePath[level]
      : undefined

  // ---------- 步骤条 ----------
  // 全局最深几级，与当前这条路径最深几级；名称从最深一级往上对齐（直辖市第二步叫「区县」）
  const totalSteps = Math.min(depth, regionTreeDepth(roots))
  const stepCount = Math.max(
    level + 1,
    Math.min(depth, level + regionTreeDepth(options)),
  )
  const stepLabel = (step: number) => {
    const at = step === 0 ? 0 : step + Math.max(0, totalSteps - stepCount)
    return labels.levels[at] ?? fill(labels.stepFallback, { step: step + 1 })
  }
  const steps: RegionPickerStep[] = Array.from(
    { length: stepCount },
    (_, step) => {
      const label = stepLabel(step)
      if (step < level) return { label, value: trail[step].name, state: "done" }
      if (step === level)
        return {
          label,
          value:
            selectedHere?.name ?? fill(labels.stepPending, { level: label }),
          state: "current",
        }
      return { label, state: "todo" }
    },
  )

  // ---------- 列表 ----------
  const searching = query.trim() !== ""
  const search = React.useMemo(
    () => (index && searching ? searchRegionIndex(index, query) : null),
    [index, query, searching],
  )

  // 选项多时像通讯录一样按拼音首字母分组；数据没拼音就保持原顺序
  const groups = React.useMemo<RegionGroup[] | null>(
    () =>
      options.length >= GROUP_THRESHOLD ? groupRegionsByInitial(options) : null,
    [options],
  )

  const rows = React.useMemo<Row[]>(() => {
    if (search)
      return search.results.map(({ node, level, path, highlights }) => ({
        node,
        level,
        path,
        highlights,
      }))
    const ordered = groups ? groups.flatMap((group) => group.items) : options
    return ordered.map((node) => ({ node, level, path: [...trail, node] }))
  }, [search, groups, options, trail, level])

  // 列表一换（进入下一步、搜索词变化），高亮项回到已选项或第一项
  const listKey = searching
    ? `s:${query}`
    : `b:${trail.map((node) => node.code).join(",")}`
  const selectedCode = searching ? value : selectedHere?.code
  const selectedAt = rows.findIndex((row) => row.node.code === selectedCode)
  const fallbackActive = rows.length ? Math.max(0, selectedAt) : -1
  const [activeState, setActiveState] = React.useState({
    key: listKey,
    index: fallbackActive,
  })
  const active = Math.min(
    activeState.key === listKey ? activeState.index : fallbackActive,
    rows.length - 1,
  )
  const setActive = (next: number) =>
    setActiveState({ key: listKey, index: next })
  const optionId = (i: number) => `${baseId}-opt-${i}`
  const activeId = active >= 0 ? optionId(active) : undefined

  // 进入新一步时把已选项滚到中间（重新打开能直接看到上次的选择），键盘移动时只滚进视野
  const lastKey = React.useRef<string | null>(null)
  React.useEffect(() => {
    if (!activeId) return
    const element = document.getElementById(activeId)
    if (!element) return
    const fresh = lastKey.current !== listKey
    lastKey.current = listKey
    if (fresh && selectedAt < 0) {
      scrollRef.current?.scrollTo({ top: 0 })
      return
    }
    if (scrollRef.current)
      scrollWithin(scrollRef.current, element, fresh ? "center" : "nearest")
  }, [activeId, listKey, selectedAt])

  const choose = (row: Row) => {
    if (isLeafRegion(row.node, row.level, depth)) return onCommit(row.path)
    setDirection("forward")
    setTrailState(row.path)
    setQuery("")
    // 手机上不主动聚焦搜索框，免得软键盘弹出来挡住列表
    if (!sheet) inputRef.current?.focus()
  }

  const goTo = (step: number) => {
    setDirection("back")
    setTrailState(trail.slice(0, step))
    setQuery("")
    if (!sheet) inputRef.current?.focus()
  }

  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    // 拼音输入法组词时的方向键、回车是在选候选词，不能当作列表操作
    if (event.nativeEvent.isComposing) return
    const count = rows.length
    switch (event.key) {
      case "ArrowDown":
        if (!count) return
        event.preventDefault()
        setActive(Math.min(count - 1, active + 1))
        return
      case "ArrowUp":
        if (!count) return
        event.preventDefault()
        setActive(Math.max(0, active - 1))
        return
      // 左右键平时是移动光标，搜索框为空时才用来在选项间移动
      case "ArrowRight":
        if (!count || query) return
        event.preventDefault()
        setActive(Math.min(count - 1, active + 1))
        return
      case "ArrowLeft":
        if (!count || query) return
        event.preventDefault()
        setActive(Math.max(0, active - 1))
        return
      case "Enter":
        event.preventDefault()
        if (active >= 0) choose(rows[active])
        return
      case "Backspace":
        if (!query && trail.length) {
          event.preventDefault()
          goTo(trail.length - 1)
        }
        return
    }
  }

  const ready = status === "ready" && index !== null
  const announcement = !ready
    ? status === "error"
      ? labels.loadFailed
      : labels.loading
    : searching
      ? search && search.total
        ? fill(labels.resultStatus, { count: search.total })
        : labels.empty
      : fill(labels.levelStatus, {
          step: level + 1,
          level: stepLabel(level),
          count: rows.length,
        })

  // 允许选中间级时「确定」常驻，没有可确认的路径就置灰：按钮时有时无会让面板高度跳动
  const showConfirm = allowPartial && ready
  const canConfirm = showConfirm && !searching && trail.length > 0
  // 底部面板的「清除」放在标题栏（由外层渲染），这里只管浮层
  const showClear = !sheet && value !== null && !required

  // ---------- 渲染 ----------
  // 内容区高度固定：面板里撑满剩余空间；浮层里固定 16rem。
  // 浮层高度一旦随每一步的选项数变化，定位就会在输入框上方、下方之间来回翻，看起来像在抖
  const bodyClass = sheet ? "flex-1" : "h-64"

  const renderOption = (
    row: Row,
    i: number,
    layout: "row" | "chip",
    className?: string,
  ) => (
    <RegionPickerOption
      key={row.path.map((node) => node.code).join("/")}
      className={className}
      id={optionId(i)}
      title={formatRegionPath(row.path)}
      variant={variant}
      layout={layout}
      active={i === active}
      selected={row.node.code === selectedCode}
      branch={!isLeafRegion(row.node, row.level, depth)}
      onSelect={() => choose(row)}
      onHover={() => i !== active && setActive(i)}
    >
      {searching ? (
        <>
          <span className="min-w-0 flex-1 truncate">
            {row.path.map((node, at) => (
              <React.Fragment key={node.code}>
                {at > 0 && (
                  <span className="text-muted-foreground/60">{" / "}</span>
                )}
                <span className={cn(at < row.level && "text-muted-foreground")}>
                  <RegionPickerHighlight
                    text={node.name}
                    range={row.highlights?.[at]?.name}
                  />
                </span>
              </React.Fragment>
            ))}
          </span>
          <span className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
            <RegionPickerHighlight
              text={row.node.code}
              range={row.highlights?.[row.level]?.code}
            />
          </span>
        </>
      ) : (
        <span className="min-w-0 truncate">{row.node.name}</span>
      )}
    </RegionPickerOption>
  )

  // 浏览时的选项：面板里整行单列，浮层里是一格格按钮；分组时每组前面标字母
  // 每组第一项在 rows 里的序号，渲染时据此拼出选项 id
  const groupStarts = groups
    ? groups.map((_, g) =>
        groups.slice(0, g).reduce((sum, group) => sum + group.items.length, 0),
      )
    : []
  const browseList = groups ? (
    // 浮层里两栏排布：多数字母下只有一两个地名，单栏会留下大片空白
    <div className={cn(!sheet && "gap-x-3 sm:columns-2")}>
      {groups.map((group, g) => {
        const start = groupStarts[g]
        const groupId = `${baseId}-group-${group.letter}`
        return (
          <div
            key={group.letter}
            role="group"
            aria-labelledby={groupId}
            data-slot="region-picker-group"
            data-group-letter={group.letter}
            className={cn(
              sheet
                ? ""
                : "grid break-inside-avoid grid-cols-[1.25rem_minmax(0,1fr)] items-start gap-x-1.5 py-1",
            )}
          >
            <div
              id={groupId}
              data-letter={group.letter}
              className={cn(
                "font-mono text-xs font-medium text-muted-foreground",
                sheet
                  ? "sticky top-0 z-10 bg-muted px-4 py-1"
                  : "flex h-8 items-center justify-center",
              )}
            >
              {group.letter}
            </div>
            <div className={cn(sheet ? "" : "flex flex-wrap gap-1.5")}>
              {group.items.map((node, i) =>
                renderOption(
                  rows[start + i],
                  start + i,
                  sheet ? "row" : "chip",
                  // 右侧给字母索引条留出位置，箭头和对勾不被它压住
                  sheet ? "pr-9" : undefined,
                ),
              )}
            </div>
          </div>
        )
      })}
    </div>
  ) : (
    <div
      className={cn(
        sheet ? "" : "grid grid-cols-2 gap-1.5 py-1 sm:grid-cols-3",
      )}
    >
      {rows.map((row, i) => renderOption(row, i, sheet ? "row" : "chip"))}
    </div>
  )

  const groupElement = (letter: string) =>
    scrollRef.current?.querySelector<HTMLElement>(
      `[data-group-letter="${letter}"]`,
    )

  const jumpTo = (letter: string) => {
    const group = groupElement(letter)
    if (group && scrollRef.current)
      scrollWithin(scrollRef.current, group, "start")
  }

  // 字母栏跟着列表滚动高亮当前所在的字母，让两者连成一体；换一步时回到第一组
  const [spy, setSpy] = React.useState<{ key: string; letter: string } | null>(
    null,
  )
  const spyGroups = sheet && !searching ? groups : null
  const currentLetter =
    spy?.key === listKey ? spy.letter : (spyGroups?.[0]?.letter ?? null)
  const onListScroll = () => {
    const list = scrollRef.current
    if (!list || !spyGroups) return
    const top = list.getBoundingClientRect().top
    let letter = spyGroups[0].letter
    for (const group of spyGroups) {
      const element = groupElement(group.letter)
      if (!element || element.getBoundingClientRect().top - top > 1) break
      letter = group.letter
    }
    if (letter !== currentLetter) setSpy({ key: listKey, letter })
  }

  return (
    <div
      data-slot="region-picker-panel"
      data-variant={variant}
      className={cn("flex min-h-0 flex-col", sheet ? "flex-1" : "gap-2 py-2.5")}
    >
      {ready && !searching && (
        <RegionPickerSteps
          steps={steps}
          variant={variant}
          ariaLabel={labels.stepsNav}
          onSelect={goTo}
        />
      )}

      <div className={cn("relative", sheet ? "px-4 py-2" : "px-2.5")}>
        <Search
          aria-hidden="true"
          className={cn(
            "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-muted-foreground",
            sheet ? "left-7" : "left-5",
          )}
        />
        <Input
          ref={inputRef}
          data-slot="region-picker-search"
          type="search"
          role="combobox"
          aria-label={labels.searchLabel}
          aria-expanded="true"
          aria-autocomplete="list"
          aria-controls={ready && rows.length ? listId : undefined}
          aria-activedescendant={ready ? activeId : undefined}
          autoComplete="off"
          autoCapitalize="off"
          spellCheck={false}
          enterKeyHint="search"
          placeholder={labels.searchPlaceholder}
          // 面板里用 16px 字号与 40px 高，iOS 聚焦时不会放大页面，手指也好点
          className={cn("pl-8", sheet && "h-10 bg-muted/50 text-base")}
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          onKeyDown={onKeyDown}
        />
      </div>

      {!ready ? (
        status === "error" ? (
          <RegionPickerNotice className={bodyClass}>
            <span>{labels.loadFailed}</span>
            <Button
              type="button"
              variant="outline"
              size={sheet ? "lg" : "sm"}
              onClick={onRetry}
            >
              {labels.retry}
            </Button>
          </RegionPickerNotice>
        ) : (
          <RegionPickerNotice loading className={bodyClass}>
            {labels.loading}
          </RegionPickerNotice>
        )
      ) : rows.length ? (
        <div
          className={cn(
            "relative min-h-0",
            sheet ? "flex-1 border-t border-border" : "h-64",
          )}
        >
          <div
            ref={scrollRef}
            id={listId}
            role="listbox"
            aria-label={searching ? labels.searchLabel : stepLabel(level)}
            data-slot="region-picker-list"
            onScroll={onListScroll}
            className={cn(
              "overflow-y-auto overscroll-contain",
              sheet
                ? "h-full pb-[env(safe-area-inset-bottom)]"
                : "h-full px-2.5",
            )}
          >
            <div
              key={listKey}
              className={cn(
                direction &&
                  !searching &&
                  "motion-safe:animate-in motion-safe:duration-200 motion-safe:fade-in-0",
                direction === "forward" &&
                  !searching &&
                  "motion-safe:slide-in-from-right-4",
                direction === "back" &&
                  !searching &&
                  "motion-safe:slide-in-from-left-4",
                searching && !sheet && "flex flex-col gap-0.5",
              )}
            >
              {searching
                ? rows.map((row, i) => renderOption(row, i, "row"))
                : browseList}
            </div>
            {/* 截断提示放在列表末尾一起滚动，不额外占高度 */}
            {search && search.total > search.results.length && (
              <p
                data-slot="region-picker-hint"
                className={cn(
                  "py-2 text-xs text-muted-foreground",
                  sheet && "px-4",
                )}
              >
                {fill(labels.resultTruncated, { limit: search.results.length })}
              </p>
            )}
          </div>

          {/* 手机上的字母索引条：长列表一点就跳到对应字母 */}
          {sheet && groups && !searching && (
            <nav
              aria-label={labels.letterIndex}
              data-slot="region-picker-index"
              className="absolute top-8 right-1 bottom-2 z-20 flex w-6 flex-col items-center justify-center"
            >
              {groups.map((group) => {
                const current = group.letter === currentLetter
                return (
                  <button
                    key={group.letter}
                    type="button"
                    aria-current={current ? "location" : undefined}
                    className="group/letter flex h-5 w-6 items-center justify-center"
                    onClick={() => jumpTo(group.letter)}
                  >
                    <span
                      className={cn(
                        "flex size-4 items-center justify-center rounded-full font-mono text-[10px] leading-none",
                        current
                          ? "bg-primary font-semibold text-primary-foreground"
                          : "text-muted-foreground group-active/letter:text-primary",
                      )}
                    >
                      {group.letter}
                    </span>
                  </button>
                )
              })}
            </nav>
          )}
        </div>
      ) : (
        <RegionPickerNotice className={bodyClass}>
          {labels.empty}
        </RegionPickerNotice>
      )}

      {(showConfirm || showClear) && (
        <div
          data-slot="region-picker-footer"
          className={cn(
            "flex items-center gap-2 border-t border-border",
            sheet
              ? "px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
              : "mx-2.5 pt-2.5",
          )}
        >
          {showClear && (
            <Button
              type="button"
              variant="outline"
              size={sheet ? "lg" : "sm"}
              onClick={() => onCommit(EMPTY_PATH)}
            >
              {labels.clear}
            </Button>
          )}
          {showConfirm && (
            <Button
              type="button"
              size={sheet ? "lg" : "sm"}
              className={cn("ml-auto min-w-0", sheet && "flex-1")}
              disabled={!canConfirm}
              onClick={() => onCommit(trail)}
            >
              <span className="truncate">
                {canConfirm
                  ? fill(labels.confirmPartial, {
                      name: formatRegionPath(trail),
                    })
                  : labels.confirmIdle}
              </span>
            </Button>
          )}
        </div>
      )}

      <span role="status" className="sr-only">
        {announcement}
      </span>
    </div>
  )
}

export { RegionPickerPanel }