// Generated by scripts/sync-shared.mjs from shared/client/settings/PluginSettingsCard.tsx. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
/**
 * Family-shared chrome for plugin settings cards: a disclosure header naming
 * the plugin and what its settings govern, the controls inside, and the save
 * that writes them. Renders nothing while the namespace is unavailable — a
 * deployment that does not compose the owning plugin should show no trace of
 * it. Inlined into each consumer's client bundle; mirrors the official
 * ui-plugin-config PluginCard in a self-contained slice.
 */

import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
import type { CardShell } from './settings-form.ts'
import css from './settings-card.module.css'

/** Copy keys the card chrome itself reads; every consumer locale carries this shared vocabulary. */
export const CARD_COPY_KEYS = [
  'settings.collapse',
  'settings.expand',
  'settings.notExposed',
  'settings.unsaved',
  'settings.readOnly',
  'settings.saveFailed',
  'settings.discard',
  'settings.save',
  'settings.saving',
] as const

/** Copy key the card chrome itself reads. */
export type CardCopyKey = (typeof CARD_COPY_KEYS)[number]

/** Key domain for the plugin's own copy (inferred per consumer). */
export type SettingsCardKey<TKey extends string = string> = TKey | CardCopyKey

/** Card chrome shared by every plugin settings card. */
export interface PluginSettingsCardProps<TKey extends string = string> {
  /** Locale reader for this card's copy. */
  t: (key: SettingsCardKey<TKey>, params?: Record<string, string | number>) => string
  /** Locale key of the plugin's name. */
  titleKey: TKey
  /** Locale key of the line describing what this plugin's settings govern. */
  descriptionKey: TKey
  /** Optional rich header description rendered instead of the plain t(descriptionKey) text (the plain text stays as the tooltip). */
  descriptionNode?: ReactNode
  /** The card's form state: availability, writability, and what a save would do. */
  state: CardShell
  /** Write every staged edit. */
  onSave: () => void
  /** Drop every staged edit. */
  onDiscard: () => void
  /**
   * Render the controls expanded on arrival (still collapsible). Defaults to
   * true: promoted first-level sections show their settings immediately.
   */
  defaultOpen?: boolean
  /**
   * Render without the collapse affordance: a static header and an always
   * visible body. Used by first-level settings sections whose nav entry
   * already provides the selection.
   */
  alwaysOpen?: boolean
  /**
   * Hide the save/discard footer: cards whose body applies its own changes
   * immediately (an embedded external settings section) have no staged
   * edits, so the footer would sit there permanently disabled.
   */
  hideFooter?: boolean
  /** The plugin's controls. */
  children: ReactNode
}

/**
 * Render one plugin settings card.
 * @param props - the plugin's copy keys, its form state, and its controls.
 * @returns the card, or nothing while the namespace is still loading.
 */
export function PluginSettingsCard<TKey extends string = string>(props: PluginSettingsCardProps<TKey>) {
  const [open, setOpen] = useState(props.defaultOpen ?? true)
  const { state, alwaysOpen } = props
  if (!state.available) return null
  const title = props.t(props.titleKey)
  const description = props.t(props.descriptionKey)
  const blocked = !state.dirty || state.invalid || state.saving
  const expanded = alwaysOpen === true || open
  const cardClass = expanded ? `${css.cardOpen} ${css.card}` : css.card
  // With alwaysOpen the nav entry already provides the selection, so the
  // header is a static title row instead of a disclosure button.
  const header = alwaysOpen === true
    ? (
      <div className={css.headerStatic}>
        <span className={css.headText}>
          <span className={css.name} title={title}>{title}</span>
          <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>
        </span>
        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
      </div>
    )
    : (
      <button
        type="button"
        className={css.header}
        aria-expanded={open}
        aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
        onClick={() => { setOpen(!open) }}
      >
        <span className={css.headText}>
          <span className={css.name} title={title}>{title}</span>
          <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>
        </span>
        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
        >
          <path
            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
            fill="currentColor"
          />
        </svg>
      </button>
    )
  // The namespace exists but the Host does not serve it to this client (the
  // official settings allowlist omits third-party namespaces): show a card
  // that explains the gap instead of vanishing, so a missing card never
  // reads as a missing plugin.
  if (!state.exposed) {
    return (
      <li className={cardClass}>
        {header}
        {expanded
          ? (
            <div className={css.body}>
              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
            </div>
          )
          : null}
      </li>
    )
  }
  return (
    <li className={cardClass}>
      {header}
      {expanded
        ? (
          <div className={css.body}>
            {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
            {props.children}
            {props.hideFooter === true
              ? null
              : (
            <div className={css.footer}>
              {state.failed
                ? (
                  <p className={css.failed} role="status">
                    {props.t('settings.saveFailed')}{state.failedReason ? ' - ' + state.failedReason : ''}
                  </p>
                )
                : null}
              <button
                type="button"
                className={css.discard}
                disabled={!state.dirty || state.saving}
                onClick={props.onDiscard}
              >
                {props.t('settings.discard')}
              </button>
              <button
                type="button"
                className={css.save}
                disabled={blocked}
                onClick={props.onSave}
              >
                {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
              </button>
            </div>
              )}
          </div>
        )
        : null}
    </li>
  )
}

/** Props every field control needs regardless of its value type. */
export interface FieldProps {
  /** Stable id associating the label with its control. */
  id: string
  /** Visible label. */
  label: string
  /** One-line explanation rendered under the control. */
  hint: string
  /** Draft text this control renders. */
  text: string
  /** True when saving would leave a user-layer entry for this field. */
  overridden: boolean
  /** True when the draft is not a value this field accepts. */
  invalid: boolean
  /** Copy for the overridden badge. */
  overriddenLabel: string
  /** Copy for the reset control. */
  resetLabel: string
  /** Copy shown in place of the hint while the draft is invalid. */
  invalidLabel: string
  /** Disables every control (read-only document, or an unavailable namespace). */
  disabled: boolean
  /** Stage draft text. */
  onEdit: (text: string) => void
  /** Stage a clear so the field re-inherits the composition layer. */
  onReset: () => void
}

/** A staged value field. `numeric` only hints the keypad: which drafts a field accepts is decided by its spec. */
export function ValueField(props: FieldProps & {
  /** Hints a numeric keypad without narrowing what the control accepts. */
  numeric?: boolean
  /** Placeholder shown while the draft is empty. */
  placeholder?: string
}) {
  return (
    <div className={css.field}>
      <div className={css.head}>
        <label className={css.label} htmlFor={props.id}>{props.label}</label>
        {props.overridden
          ? (
            <span className={css.badges}>
              <span className={css.badge}>{props.overriddenLabel}</span>
              <button
                type="button"
                className={css.reset}
                disabled={props.disabled}
                onClick={props.onReset}
              >
                {props.resetLabel}
              </button>
            </span>
          )
          : null}
      </div>
      <input
        id={props.id}
        className={props.invalid ? css.inputInvalid : css.input}
        type="text"
        {...props.numeric === true ? { inputMode: 'numeric' as const } : {}}
        {...props.invalid ? { 'aria-invalid': true } : {}}
        value={props.text}
        placeholder={props.placeholder ?? ''}
        disabled={props.disabled}
        onChange={(event) => { props.onEdit(event.target.value) }}
      />
      <p className={props.invalid ? css.invalid : css.hint}>
        {props.invalid ? props.invalidLabel : props.hint}
      </p>
    </div>
  )
}

const NON_SKIN_BODY_MARKERS = new Set(['dshSkinCenter', 'dshSidebarCollapsed'])
// 检测使用使用皮肤，用了皮肤退回原生select样式，防止样式冲突。默认外观下使用优化后的select样式。
function isSkinActive(): boolean {
  const datasetList = Object.keys(document.body.dataset)
  const isActive = datasetList.some(key => key.startsWith('dsh') && !NON_SKIN_BODY_MARKERS.has(key))
  return isActive
}

interface SelectOption {
  value: string
  label: string
}

const SELECT_CLOSE_MS = 100

/**
 * The shared dual-mode select control. While an appearance skin is active it
 * renders the legacy native `<select>` untouched, so element-level skin
 * selectors keep working; under the default appearance it renders a
 * self-drawn `role="listbox"` popup whose open/close is transition-animated.
 * Staged cards reach it through BooleanField/ChoiceField; immediate-apply
 * editors (the side-card prefs) bind it directly through onEdit.
 * 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
 */
export function SelectField(props: {
  id: string
  options: ReadonlyArray<SelectOption>
  value: string
  disabled: boolean
  invalid: boolean
  onEdit: (text: string) => void
}) {
  const { id, options, value } = props
  const [open, setOpen] = useState(false)
  const [closing, setClosing] = useState(false)
  const [phase, setPhase] = useState<'initial' | 'open'>('initial')
  const [activeIndex, setActiveIndex] = useState(0)
  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
  const wrapRef = useRef<HTMLDivElement | null>(null)
  const popupRef = useRef<HTMLDivElement | null>(null)

  const currentIndex = () => {
    const index = options.findIndex(option => option.value === value)
    return index >= 0 ? index : 0
  }

  const close = useCallback(() => {
    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
    setClosing(true)
    closeTimer.current = setTimeout(() => {
      setClosing(false)
      setOpen(false)
    }, SELECT_CLOSE_MS)
  }, [])

  const openPopup = () => {
    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
    setActiveIndex(currentIndex())
    setPhase('initial')
    setClosing(false)
    setOpen(true)
  }

  const commit = (index: number) => {
    const option = options[index]
    if (option) props.onEdit(option.value)
    close()
  }

  const onTriggerClick = () => {
    if (props.disabled) return
    if (open && !closing) close()
    else openPopup()
  }

  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    if (props.disabled) return
    const count = options.length
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowUp':
      case 'Enter':
      case ' ':
        event.preventDefault()
        if (!open) {
          openPopup()
        } else if (!closing) {
          if (event.key === 'ArrowDown') setActiveIndex(index => (index + 1) % count)
          else if (event.key === 'ArrowUp') setActiveIndex(index => (index - 1 + count) % count)
          else commit(activeIndex)
        }
        break
      case 'Escape':
        if (open) {
          event.preventDefault()
          event.stopPropagation()
          close()
        }
        break
      case 'Tab':
        if (open) close()
        break
    }
  }

  useEffect(() => () => {
    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
  }, [])
  useLayoutEffect(() => {
    if (open && !closing && phase === 'initial') {
      void popupRef.current?.offsetHeight
      setPhase('open')
    }
  }, [open, closing, phase])

  useEffect(() => {
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      const target = event.target
      if (target instanceof Node && !wrapRef.current?.contains(target)) close()
    }
    document.addEventListener('pointerdown', onPointerDown)
    return () => document.removeEventListener('pointerdown', onPointerDown)
  }, [open, close])

  useEffect(() => {
    if (props.disabled && open) close()
  }, [props.disabled, open, close])

  // 使用了皮肤则退回原生select样式防止样式冲突。
  if (isSkinActive()) {
    return (
      <select
        id={id}
        className={css.select}
        value={value}
        disabled={props.disabled}
        onChange={(event) => { props.onEdit(event.target.value) }}
      >
        {options.map(option => (
          <option key={option.value} value={option.value}>{option.label}</option>
        ))}
      </select>
    )
  }

  const label = options.find(option => option.value === value)?.label ?? ''
  const popupClass = closing
    ? `${css.selectPopup} ${css.selectPopupClose}`
    : phase === 'open'
      ? `${css.selectPopup} ${css.selectPopupOpen}`
      : css.selectPopup
  return (
    <div className={css.selectWrap} ref={wrapRef}>
      <button
        type="button"
        id={id}
        className={`${css.select} ${css.selectButton}`}
        disabled={props.disabled}
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-activedescendant={open ? `${id}-o${activeIndex}` : undefined}
        aria-invalid={props.invalid || undefined}
        onClick={onTriggerClick}
        onKeyDown={onKeyDown}
      >
        <span className={css.selectLabel}>{label}</span>
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={open ? `${css.selectChevron} ${css.selectChevronOpen}` : css.selectChevron}
          aria-hidden="true"
        >
          <path
            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
            fill="currentColor"
          />
        </svg>
      </button>
      {open
        ? (
          <div className={popupClass} role="listbox" ref={popupRef}>
            {options.map((option, index) => (
              <div
                key={option.value}
                id={`${id}-o${index}`}
                role="option"
                aria-selected={option.value === value}
                className={`${css.selectOption}${option.value === value ? ` ${css.selectOptionSelected}` : ''}${index === activeIndex && !closing ? ` ${css.selectOptionActive}` : ''}`}
                onClick={() => { commit(index) }}
              >
                {option.label}
              </div>
            ))}
          </div>
        )
        : null}
    </div>
  )
}

/** A staged boolean field: 继承 / 开 / 关. */
export function BooleanField(props: FieldProps & {
  /** Copy for the inherit option. */
  inheritLabel: string
  /** Copy for the on option. */
  onLabel: string
  /** Copy for the off option. */
  offLabel: string
}) {
  return (
    <div className={css.field}>
      <div className={css.head}>
        <label className={css.label} htmlFor={props.id}>{props.label}</label>
        {props.overridden
          ? (
            <span className={css.badges}>
              <span className={css.badge}>{props.overriddenLabel}</span>
              <button
                type="button"
                className={css.reset}
                disabled={props.disabled}
                onClick={props.onReset}
              >
                {props.resetLabel}
              </button>
            </span>
          )
          : null}
      </div>
      <SelectField
        id={props.id}
        options={[
          { value: '', label: props.inheritLabel },
          { value: 'true', label: props.onLabel },
          { value: 'false', label: props.offLabel },
        ]}
        value={props.text}
        disabled={props.disabled}
        invalid={props.invalid}
        onEdit={props.onEdit}
      />
      <p className={css.hint}>{props.hint}</p>
    </div>
  )
}

/** A staged enumerated field rendered as a select. */
export function ChoiceField(props: FieldProps & {
  /** Copy for the inherit option (draft text is the empty string). */
  inheritLabel: string
  /** Choices rendered in order; `value` is the draft/stored text. */
  choices: ReadonlyArray<{ value: string; label: string }>
}) {
  return (
    <div className={css.field}>
      <div className={css.head}>
        <label className={css.label} htmlFor={props.id}>{props.label}</label>
        {props.overridden
          ? (
            <span className={css.badges}>
              <span className={css.badge}>{props.overriddenLabel}</span>
              <button
                type="button"
                className={css.reset}
                disabled={props.disabled}
                onClick={props.onReset}
              >
                {props.resetLabel}
              </button>
            </span>
          )
          : null}
      </div>
      <SelectField
        id={props.id}
        options={[{ value: '', label: props.inheritLabel }, ...props.choices]}
        value={props.text}
        disabled={props.disabled}
        invalid={props.invalid}
        onEdit={props.onEdit}
      />
      <p className={props.invalid ? css.invalid : css.hint}>
        {props.invalid ? props.invalidLabel : props.hint}
      </p>
    </div>
  )
}