// 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 { useState, 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
  /** 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
  /** 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}>{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}>{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}
            <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>
  )
}

/** 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>
      <select
        id={props.id}
        className={css.select}
        value={props.text}
        disabled={props.disabled}
        onChange={(event) => { props.onEdit(event.target.value) }}
      >
        <option value="">{props.inheritLabel}</option>
        <option value="true">{props.onLabel}</option>
        <option value="false">{props.offLabel}</option>
      </select>
      <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>
      <select
        id={props.id}
        className={css.select}
        value={props.text}
        disabled={props.disabled}
        onChange={(event) => { props.onEdit(event.target.value) }}
      >
        <option value="">{props.inheritLabel}</option>
        {props.choices.map(choice => (
          <option key={choice.value} value={choice.value}>{choice.label}</option>
        ))}
      </select>
      <p className={props.invalid ? css.invalid : css.hint}>
        {props.invalid ? props.invalidLabel : props.hint}
      </p>
    </div>
  )
}