'use client'

/** 重命名对话弹框（居中 modal + 输入框）。renaming=true 时禁用，显示「保存中」。 */
export function H5RenameModal({
  value,
  renaming,
  onValueChange,
  onConfirm,
  onClose,
}: {
  value: string
  renaming: boolean
  onValueChange: (v: string) => void
  onConfirm: () => void
  onClose: () => void
}): React.JSX.Element {
  return (
    <div className="h5-modal-overlay" onClick={onClose}>
      <div className="h5-modal" role="dialog" aria-label="重命名对话" onClick={(e) => e.stopPropagation()}>
        <div className="h5-modal-title">重命名对话</div>
        <input
          className="h5-modal-input"
          value={value}
          onChange={(e) => onValueChange(e.target.value)}
          autoFocus
          maxLength={100}
          placeholder="输入新的对话名称"
          onKeyDown={(e) => {
            if (e.key === 'Enter' && value.trim() && !renaming) onConfirm()
          }}
        />
        <div className="h5-modal-actions">
          <button type="button" className="h5-modal-btn" onClick={onClose} disabled={renaming}>
            取消
          </button>
          <button
            type="button"
            className="h5-modal-btn primary"
            onClick={onConfirm}
            disabled={!value.trim() || renaming}
          >
            {renaming ? '保存中' : '保存'}
          </button>
        </div>
      </div>
    </div>
  )
}